Merge pull request #13757 from vvlladd28/improvement/alias-sselect/fetch-new-alias

Refactor EntityAliasSelect and FilterSelect components for improved reactivity

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.html

@@ -74,8 +74,7 @@
         </div>
         <ng-template #searchNotEmpty>
           <span>
-            {{ translate.get('entity.no-alias-matching',
+            {{ 'entity.no-alias-matching' | translate : {alias: (searchText | truncate: true: 6: &apos;...&apos;)} }}
-              {alias: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
           </span>
         </ng-template>
         <span>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, forwardRef, Input, OnInit, SkipSelf, ViewChild } from '@angular/core';
+import { Component, DestroyRef, ElementRef, forwardRef, Input, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import {
   ControlValueAccessor,
   FormBuilder,
@@ -26,18 +26,17 @@ import {
 } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { map, mergeMap, share, tap } from 'rxjs/operators';
-import { TranslateService } from '@ngx-translate/core';
 import { EntityType } from '@shared/models/entity-type.models';
 import { EntityService } from '@core/http/entity.service';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { EntityAlias } from '@shared/models/alias.models';
 import { IAliasController } from '@core/api/widget-api.models';
-import { TruncatePipe } from '@shared/pipe/truncate.pipe';
+import { MatAutocomplete } from '@angular/material/autocomplete';
-import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { EntityAliasSelectCallbacks } from './entity-alias-select.component.models';
 import { ENTER } from '@angular/cdk/keycodes';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-entity-alias-select',
@@ -47,11 +46,7 @@ import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => EntityAliasSelectComponent),
     multi: true
-  }/*,
+  }]
-  {
-    provide: ErrorStateMatcher,
-    useExisting: EntityAliasSelectComponent
-  }*/]
 })
 export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit, ErrorStateMatcher {
 
@@ -72,7 +67,6 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
   showLabel: boolean;
 
   @ViewChild('entityAliasAutocomplete') entityAliasAutocomplete: MatAutocomplete;
-  @ViewChild('autocomplete', { read: MatAutocompleteTrigger }) autoCompleteTrigger: MatAutocompleteTrigger;
 
   @Input()
   @coerceBoolean()
@@ -93,21 +87,18 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
 
   @ViewChild('entityAliasInput', {static: true}) entityAliasInput: ElementRef;
 
-  entityAliasList: Array<EntityAlias> = [];
-
   filteredEntityAliases: Observable<Array<EntityAlias>>;
 
   searchText = '';
 
   private dirty = false;
-
+  private entityAliasList: Array<EntityAlias> = [];
   private propagateChange = (_v: any) => { };
 
   constructor(@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               private entityService: EntityService,
-              public translate: TranslateService,
+              private fb: FormBuilder,
-              public truncate: TruncatePipe,
+              private destroyRef: DestroyRef) {
-              private fb: FormBuilder) {
     this.selectEntityAliasFormGroup = this.fb.group({
       entityAlias: [null]
     });
@@ -121,15 +112,7 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
   }
 
   ngOnInit() {
-    const entityAliases = this.aliasController.getEntityAliases();
+    this.loadEntityAliases();
-    for (const aliasId of Object.keys(entityAliases)) {
-      if (this.allowedEntityTypes && this.allowedEntityTypes.length) {
-        if (!this.entityService.filterAliasByEntityTypes(entityAliases[aliasId], this.allowedEntityTypes)) {
-          continue;
-        }
-      }
-      this.entityAliasList.push(entityAliases[aliasId]);
-    }
 
     this.filteredEntityAliases = this.selectEntityAliasFormGroup.get('entityAlias').valueChanges
       .pipe(
@@ -149,6 +132,12 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
         mergeMap(name => this.fetchEntityAliases(name) ),
         share()
       );
+
+    this.aliasController.entityAliasesChanged.pipe(
+      takeUntilDestroyed(this.destroyRef),
+    ).subscribe(() => {
+      this.loadEntityAliases();
+    });
   }
 
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -271,4 +260,18 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
       );
     }
   }
+
+  private loadEntityAliases(): void {
+    this.entityAliasList = [];
+    const entityAliases = this.aliasController.getEntityAliases();
+    for (const aliasId of Object.keys(entityAliases)) {
+      if (this.allowedEntityTypes?.length) {
+        if (!this.entityService.filterAliasByEntityTypes(entityAliases[aliasId], this.allowedEntityTypes)) {
+          continue;
+        }
+      }
+      this.entityAliasList.push(entityAliases[aliasId]);
+    }
+    this.dirty = true;
+  }
 }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html

@@ -66,8 +66,7 @@
         </div>
         <ng-template #searchNotEmpty>
           <span>
-            {{ translate.get('filter.no-filter-matching',
+            {{ 'filter.no-filter-matching' | translate : {filter: (searchText | truncate: true: 6: &apos;...&apos;)} }}
-            {filter: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
           </span>
         </ng-template>
         <span>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.ts

@@ -14,31 +14,27 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, SkipSelf, ViewChild } from '@angular/core';
+import { Component, DestroyRef, ElementRef, forwardRef, Input, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import {
   ControlValueAccessor,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
   FormGroupDirective,
   NG_VALUE_ACCESSOR,
-  NgForm
+  NgForm,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup
 } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { map, mergeMap, share, tap } from 'rxjs/operators';
-import { Store } from '@ngrx/store';
-import { AppState } from '@app/core/core.state';
-import { TranslateService } from '@ngx-translate/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { IAliasController } from '@core/api/widget-api.models';
-import { TruncatePipe } from '@shared/pipe/truncate.pipe';
+import { MatAutocomplete } from '@angular/material/autocomplete';
-import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { ENTER } from '@angular/cdk/keycodes';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { FilterSelectCallbacks } from './filter-select.component.models';
 import { Filter } from '@shared/models/query/query.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'tb-filter-select',
@@ -54,7 +50,7 @@ import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-
       useExisting: FilterSelectComponent
     }]
 })
-export class FilterSelectComponent implements ControlValueAccessor, OnInit, AfterViewInit, ErrorStateMatcher {
+export class FilterSelectComponent implements ControlValueAccessor, OnInit, ErrorStateMatcher {
 
   selectFilterFormGroup: UntypedFormGroup;
 
@@ -81,40 +77,27 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
   subscriptSizing: SubscriptSizing = 'fixed';
 
   @ViewChild('filterAutocomplete') filterAutocomplete: MatAutocomplete;
-  @ViewChild('autocomplete', { read: MatAutocompleteTrigger }) autoCompleteTrigger: MatAutocompleteTrigger;
 
-
-  private requiredValue: boolean;
-  get tbRequired(): boolean {
-    return this.requiredValue;
-  }
   @Input()
-  set tbRequired(value: boolean) {
+  @coerceBoolean()
-    this.requiredValue = coerceBooleanProperty(value);
+  tbRequired: boolean;
-  }
 
   @Input()
   disabled: boolean;
 
   @ViewChild('filterInput', {static: true}) filterInput: ElementRef;
 
-  filterList: Array<Filter> = [];
-
   filteredFilters: Observable<Array<Filter>>;
 
   searchText = '';
 
   private dirty = false;
+  private filterList: Array<Filter> = [];
+  private propagateChange = (_v: any) => { };
 
-  private creatingFilter = false;
+  constructor(@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
-
+              private fb: UntypedFormBuilder,
-  private propagateChange = (v: any) => { };
+              private destroyRef: DestroyRef) {
-
-  constructor(private store: Store<AppState>,
-              @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
-              public translate: TranslateService,
-              public truncate: TruncatePipe,
-              private fb: UntypedFormBuilder) {
     this.selectFilterFormGroup = this.fb.group({
       filter: [null]
     });
@@ -124,19 +107,16 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
     this.propagateChange = fn;
   }
 
-  registerOnTouched(fn: any): void {
+  registerOnTouched(_fn: any): void {
   }
 
   ngOnInit() {
-    const filters = this.aliasController.getFilters();
+    this.loadFilters();
-    for (const filterId of Object.keys(filters)) {
-      this.filterList.push(filters[filterId]);
-    }
 
     this.filteredFilters = this.selectFilterFormGroup.get('filter').valueChanges
       .pipe(
         tap(value => {
-          let modelValue;
+          let modelValue: Filter;
           if (typeof value === 'string' || !value) {
             modelValue = null;
           } else {
@@ -151,6 +131,12 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
         mergeMap(name => this.fetchFilters(name) ),
         share()
       );
+
+    this.aliasController.filtersChanged.pipe(
+      takeUntilDestroyed(this.destroyRef),
+    ).subscribe(() => {
+      this.loadFilters();
+    });
   }
 
   isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -159,8 +145,6 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
     return originalErrorState || customErrorState;
   }
 
-  ngAfterViewInit(): void {}
-
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
     if (this.disabled) {
@@ -227,7 +211,7 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
   }
 
   textIsNotEmpty(text: string): boolean {
-    return (text && text != null && text.length > 0) ? true : false;
+    return text?.length > 0;
   }
 
   filterEnter($event: KeyboardEvent) {
@@ -242,7 +226,6 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
   createFilter($event: Event, filter: string, focusOnCancel = true) {
     $event.preventDefault();
     $event.stopPropagation();
-    this.creatingFilter = true;
     if (this.callbacks && this.callbacks.createFilter) {
       this.callbacks.createFilter(filter).subscribe((newFilter) => {
           if (!newFilter) {
@@ -253,7 +236,6 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
               }, 0);
             }
           } else {
-            this.filterList.push(newFilter);
             this.modelValue = newFilter.id;
             this.selectFilterFormGroup.get('filter').patchValue(newFilter, {emitEvent: true});
             this.propagateChange(this.modelValue);
@@ -262,4 +244,13 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
       );
     }
   }
+
+  private loadFilters(): void {
+    this.filterList = [];
+    const filters = this.aliasController.getFilters();
+    for (const filterId of Object.keys(filters)) {
+      this.filterList.push(filters[filterId]);
+    }
+    this.dirty = true;
+  }
 }