UI: Add fetch function for string items list; fix double item addition on blur

ui-ngx/src/app/shared/components/string-items-list.component.html

@@ -30,7 +30,7 @@
       <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
     </mat-chip-row>
     <input matInput type="text"
-           (blur)="onTouched()"
+           (blur)="addOnBlur($event)"
            placeholder="{{ placeholder }}"
            style="max-width: 300px;min-width: 250px"
            #stringItemInput
@@ -40,8 +40,7 @@
            [matChipInputFor]="itemsChipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            matAutocompleteOrigin
-           matChipInputAddOnBlur
-           (matChipInputTokenEnd)="addItem($event)"
+           (matChipInputTokenEnd)="addOnEnd($event)"
            [matAutocompleteConnectedTo]="origin"
            [matAutocomplete]="stringItemAutocomplete"
            [matAutocompleteDisabled]="!predefinedValues?.length">
@@ -49,12 +48,11 @@
   <mat-autocomplete #stringItemAutocomplete="matAutocomplete"
                     [displayWith]="displayValueFn"
                     class="tb-autocomplete">
-    <mat-option *ngFor="let value of filteredValues | async" [value]="value">
-      <span [innerHTML]="value.name | highlight:searchText"></span>
-    </mat-option>
-    <mat-option *ngIf="!(filteredValues | async)?.length" [value]="null">
-      {{ 'common.not-found' | translate }}
-    </mat-option>
+    @for (value of filteredValues | async; track value.value) {
+      <mat-option [value]="value"><span [innerHTML]="value.name | highlight:searchText"></span></mat-option>
+    } @empty {
+      <mat-option [value]="null">{{ 'common.not-found' | translate }}</mat-option>
+    }
   </mat-autocomplete>
   <mat-hint [hidden]="!hint">
     {{ hint }}

ui-ngx/src/app/shared/components/string-items-list.component.ts

@@ -30,6 +30,7 @@ import { coerceArray, coerceBoolean } from '@shared/decorators/coercion';
 import { Observable, of } from 'rxjs';
 import { filter, mergeMap, share, tap } from 'rxjs/operators';
 import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { isDefined } from '@core/utils';
 
 export interface StringItemsOption {
   name: string;
@@ -116,6 +117,9 @@ export class StringItemsListComponent implements ControlValueAccessor, OnInit {
   @coerceArray()
   predefinedValues: StringItemsOption[];
 
+  @Input()
+  fetchOptionsFn: (searchText?: string) => Observable<Array<StringItemsOption>>;
+
   get itemsControl(): AbstractControl {
     return this.stringItemsForm.get('items');
   }
@@ -124,7 +128,7 @@ export class StringItemsListComponent implements ControlValueAccessor, OnInit {
     return this.stringItemsForm.get('item');
   }
 
-  onTouched = () => {};
+  private onTouched = () => {};
   private propagateChange: (value: any) => void = () => {};
   private dirty = false;
 
@@ -136,7 +140,7 @@ export class StringItemsListComponent implements ControlValueAccessor, OnInit {
   }
 
   ngOnInit() {
-    if (this.predefinedValues) {
+    if (this.predefinedValues || isDefined(this.fetchOptionsFn)) {
       this.filteredValues = this.itemControl.valueChanges
         .pipe(
           tap((value) => {
@@ -147,7 +151,7 @@ export class StringItemsListComponent implements ControlValueAccessor, OnInit {
             }
           }),
           filter((value) => typeof value === 'string'),
-          mergeMap(name => this.fetchValues(name)),
+          mergeMap(name => this.fetchOptionsFn ? this.fetchOptionsFn(name) : this.fetchValues(name)),
           share()
         );
     }
@@ -199,19 +203,16 @@ export class StringItemsListComponent implements ControlValueAccessor, OnInit {
     this.dirty = true;
   }
 
-  addItem(event: MatChipInputEvent): void {
-    const item = event.value?.trim() ?? '';
-    if (item) {
-      if (this.predefinedValues) {
-        const findItems = this.predefinedValues
-          .filter(value => value.name.toLowerCase().includes(item.toLowerCase()));
-        if (findItems.length === 1) {
-          this.add(findItems[0]);
-        }
-      } else {
-        this.add({value: item, name: item});
-      }
+  addOnBlur(event: FocusEvent) {
+    const target: HTMLElement = event.relatedTarget as HTMLElement;
+    if (target && target.tagName !== 'MAT-OPTION') {
+      this.addItem(this.stringItemInput.nativeElement.value ?? '')
     }
+    this.onTouched();
+  }
+
+  addOnEnd(event: MatChipInputEvent): void {
+    this.addItem(event.value ?? '')
   }
 
   removeItems(item: StringItemsOption) {
@@ -239,6 +240,21 @@ export class StringItemsListComponent implements ControlValueAccessor, OnInit {
     return values ? values.name : undefined;
   }
 
+  private addItem(value: string) {
+    const item = value.trim();
+    if (item) {
+      if (this.predefinedValues) {
+        const findItems = this.predefinedValues
+          .filter(value => value.name.toLowerCase().includes(item.toLowerCase()));
+        if (findItems.length === 1) {
+          this.add(findItems[0]);
+        }
+      } else {
+        this.add({value: item, name: item});
+      }
+    }
+  }
+
   private add(item: StringItemsOption) {
     if (!this.modelValue || this.modelValue.indexOf(item.value) === -1) {
       if (!this.modelValue) {