chore: accommodate new changes to the specs (#2254)

* chore: accommodate new changes to the specs

* chore: fix error

* chore: fix error

frontend/projects/ui/src/app/components/form/form-array/form-array.component.html

@@ -4,7 +4,15 @@
     *ngIf="spec.description"
     [content]="spec.description"
   ></tui-tooltip>
-  <button tuiLink type="button" class="add" (click)="add()">+ Add</button>
+  <button
+    tuiLink
+    type="button"
+    class="add"
+    [disabled]="!canAdd"
+    (click)="add()"
+  >
+    + Add
+  </button>
 </div>
 <tui-error [error]="order | tuiFieldError | async"></tui-error>
 

frontend/projects/ui/src/app/components/form/form-array/form-array.component.ts

@@ -35,6 +35,13 @@ export class FormArrayComponent {
   private readonly dialogs = inject(TuiDialogService)
   private readonly destroy$ = inject(TuiDestroyService)
 
+  get canAdd(): boolean {
+    return (
+      !this.spec.maxLength ||
+      this.spec.maxLength >= this.array.control.controls.length
+    )
+  }
+
   add() {
     if (!this.warned && this.spec.warning) {
       this.dialogs

frontend/projects/ui/src/app/components/form/form-control/form-control.component.html

@@ -1,7 +1,7 @@
 <ng-container [ngSwitch]="spec.type">
   <form-text *ngSwitchCase="'text'"></form-text>
   <form-number *ngSwitchCase="'number'"></form-number>
-  <form-text *ngSwitchCase="'textarea'"></form-text>
+  <form-textarea *ngSwitchCase="'textarea'"></form-textarea>
   <form-toggle *ngSwitchCase="'toggle'"></form-toggle>
   <form-select *ngSwitchCase="'select'"></form-select>
   <form-multiselect *ngSwitchCase="'multiselect'"></form-multiselect>

frontend/projects/ui/src/app/components/form/form-control/form-control.component.ts

@@ -6,7 +6,10 @@ import {
   TemplateRef,
   ViewChild,
 } from '@angular/core'
-import { AbstractTuiNullableControl } from '@taiga-ui/cdk'
+import {
+  AbstractTuiNullableControl,
+  TuiContextWithImplicit,
+} from '@taiga-ui/cdk'
 import {
   TuiAlertService,
   TuiDialogContext,
@@ -17,6 +20,11 @@ import { filter, takeUntil } from 'rxjs'
 import { ValueSpec, ValueSpecText } from 'start-sdk/lib/config/configTypes'
 import { ERRORS } from '../form-group/form-group.component'
 
+interface ValidatorsPatternError {
+  actualValue: string
+  requiredPattern: string | RegExp
+}
+
 @Component({
   selector: 'form-control',
   templateUrl: './form-control.component.html',
@@ -28,7 +36,10 @@ import { ERRORS } from '../form-group/form-group.component'
       deps: [FormControlComponent],
       useFactory: (control: FormControlComponent<ValueSpecText, string>) => ({
         required: 'Required',
-        patterns: () => control.spec.patterns.map(p => p.regex), // @TODO Alex
+        pattern: ({ requiredPattern }: ValidatorsPatternError) =>
+          control.spec.patterns.find(
+            ({ regex }) => String(regex) === String(requiredPattern),
+          )?.description || 'Invalid pattern',
       }),
     },
   ],

frontend/projects/ui/src/app/components/form/form-multiselect/form-multiselect.component.html

@@ -1,9 +1,15 @@
 <tui-multi-select
   [tuiHintContent]="spec.description"
   [editable]="false"
+  [disabledItemHandler]="disabledItemHandler"
   [(ngModel)]="selected"
   (focusedChange)="onFocus($event)"
 >
   {{ spec.name }}
-  <select tuiSelect multiple [items]="items"></select>
+  <select
+    tuiSelect
+    multiple
+    [items]="items"
+    [disabledItemHandler]="disabledItemHandler"
+  ></select>
 </tui-multi-select>

frontend/projects/ui/src/app/components/form/form-multiselect/form-multiselect.component.ts

@@ -13,6 +13,11 @@ export class FormMultiselectComponent extends Control<
 > {
   readonly items = Object.values(this.spec.values)
 
+  readonly disabledItemHandler = (item: string): boolean =>
+    !!this.spec.maxLength &&
+    this.selected.length >= this.spec.maxLength &&
+    !this.selected.includes(item)
+
   get selected(): string[] {
     return this.memoize(this.value)
   }

frontend/projects/ui/src/app/components/form/form-number/form-number.component.html

@@ -1,12 +1,11 @@
-<!-- @TODO Alex look at "attr.step", is this correct? -->
+<!-- @TODO Implement InputNumber step once it is added in Taiga UI -->
 <tui-input-number
   [tuiHintContent]="spec.description"
   [tuiTextfieldPostfix]="spec.units || ''"
   [precision]="Infinity"
   [decimal]="spec.integer ? 'never' : 'not-zero'"
-  [min]="min"
+  [min]="spec.min ?? -Infinity"
-  [max]="max"
+  [max]="spec.max ?? Infinity"
-  [attr.step]="spec.step"
   [(ngModel)]="value"
   (focusedChange)="onFocus($event)"
 >

frontend/projects/ui/src/app/components/form/form-number/form-number.component.ts

@@ -8,14 +8,4 @@ import { Control } from '../control'
 })
 export class FormNumberComponent extends Control<ValueSpecNumber, number> {
   protected readonly Infinity = Infinity
-
-  get min(): number {
-    if (typeof this.spec.min !== 'number') return -Infinity
-    return this.spec.min
-  }
-
-  get max(): number {
-    if (typeof this.spec.max !== 'number') return Infinity
-    return this.spec.max
-  }
 }

frontend/projects/ui/src/app/components/form/form-text/form-text.component.html

@@ -10,8 +10,8 @@
     tuiTextfield
     [class.masked]="spec.masked && masked"
     [placeholder]="spec.placeholder || ''"
-    [minLength]="spec.minLength"
+    [attr.minLength]="spec.minLength"
-    [maxLength]="spec.maxLength"
+    [attr.maxLength]="spec.maxLength"
     [attr.inputmode]="spec.inputmode"
   />
 </tui-input>

frontend/projects/ui/src/app/components/form/form-textarea/form-textarea.component.html

@@ -2,6 +2,7 @@
   [tuiHintContent]="spec.description"
   [expandable]="true"
   [rows]="6"
+  [maxLength]="spec.maxLength"
   [(ngModel)]="value"
   (focusedChange)="onFocus($event)"
 >