diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.html index f2a2ee4b9c..882e27b01b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.html @@ -74,8 +74,7 @@ - {{ translate.get('entity.no-alias-matching', - {alias: truncate.transform(searchText, true, 6, '...')}) | async }} + {{ 'entity.no-alias-matching' | translate : {alias: (searchText | truncate: true: 6: '...')} }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.ts index 2d170f55e3..1af25bd01e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.ts +++ b/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, MatAutocompleteTrigger } from '@angular/material/autocomplete'; +import { MatAutocomplete } 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 = []; - filteredEntityAliases: Observable>; searchText = ''; private dirty = false; - + private entityAliasList: Array = []; private propagateChange = (_v: any) => { }; constructor(@SkipSelf() private errorStateMatcher: ErrorStateMatcher, private entityService: EntityService, - public translate: TranslateService, - public truncate: TruncatePipe, - private fb: FormBuilder) { + private fb: FormBuilder, + private destroyRef: DestroyRef) { this.selectEntityAliasFormGroup = this.fb.group({ entityAlias: [null] }); @@ -121,15 +112,7 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit, } ngOnInit() { - const entityAliases = this.aliasController.getEntityAliases(); - 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.loadEntityAliases(); 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; + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html index ff1bcb06a4..7b11058228 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html @@ -66,8 +66,7 @@ - {{ translate.get('filter.no-filter-matching', - {filter: truncate.transform(searchText, true, 6, '...')}) | async }} + {{ 'filter.no-filter-matching' | translate : {filter: (searchText | truncate: true: 6: '...')} }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.ts index 6484f2ca18..abc6f77e31 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.ts +++ b/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, MatAutocompleteTrigger } from '@angular/material/autocomplete'; +import { MatAutocomplete } 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) { - this.requiredValue = coerceBooleanProperty(value); - } + @coerceBoolean() + tbRequired: boolean; @Input() disabled: boolean; @ViewChild('filterInput', {static: true}) filterInput: ElementRef; - filterList: Array = []; - filteredFilters: Observable>; searchText = ''; private dirty = false; + private filterList: Array = []; + private propagateChange = (_v: any) => { }; - private creatingFilter = false; - - private propagateChange = (v: any) => { }; - - constructor(private store: Store, - @SkipSelf() private errorStateMatcher: ErrorStateMatcher, - public translate: TranslateService, - public truncate: TruncatePipe, - private fb: UntypedFormBuilder) { + constructor(@SkipSelf() private errorStateMatcher: ErrorStateMatcher, + private fb: UntypedFormBuilder, + private destroyRef: DestroyRef) { 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(); - for (const filterId of Object.keys(filters)) { - this.filterList.push(filters[filterId]); - } + this.loadFilters(); 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; + } }