diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts index 32a0377d42..91fd40acd2 100644 --- a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts +++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts @@ -14,13 +14,14 @@ /// limitations under the License. /// -import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'; -import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; +import { Component, EventEmitter, forwardRef, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; import { AliasFilterType, aliasFilterTypeTranslationMap, EntityAliasFilter } from '@shared/models/alias.models'; import { AliasEntityType, EntityType } from '@shared/models/entity-type.models'; -import { TranslateService } from '@ngx-translate/core'; import { EntityService } from '@core/http/entity.service'; import { EntitySearchDirection, entitySearchDirectionTranslations } from '@shared/models/relation.models'; +import { Subject, Subscription } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'tb-entity-filter', @@ -34,7 +35,7 @@ import { EntitySearchDirection, entitySearchDirectionTranslations } from '@share } ] }) -export class EntityFilterComponent implements ControlValueAccessor, OnInit { +export class EntityFilterComponent implements ControlValueAccessor, OnInit, OnDestroy { @Input() disabled: boolean; @@ -44,8 +45,8 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit { @Output() resolveMultipleChanged: EventEmitter = new EventEmitter(); - entityFilterFormGroup: UntypedFormGroup; - filterFormGroup: UntypedFormGroup; + entityFilterFormGroup: FormGroup; + filterFormGroup: FormGroup; aliasFilterTypes: Array; @@ -59,9 +60,11 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit { private propagateChange = null; - constructor(private translate: TranslateService, - private entityService: EntityService, - private fb: UntypedFormBuilder) { + private destroy$ = new Subject(); + private subscriptions = new Subscription(); + + constructor(private entityService: EntityService, + private fb: FormBuilder) { } ngOnInit(): void { @@ -71,15 +74,25 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit { this.entityFilterFormGroup = this.fb.group({ type: [null, [Validators.required]] }); - this.entityFilterFormGroup.get('type').valueChanges.subscribe((type: AliasFilterType) => { + this.entityFilterFormGroup.get('type').valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe((type: AliasFilterType) => { this.filterTypeChanged(type); }); - this.entityFilterFormGroup.valueChanges.subscribe(() => { + this.entityFilterFormGroup.valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe(() => { this.updateModel(); }); this.filterFormGroup = this.fb.group({}); } + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + this.subscriptions.unsubscribe(); + } + registerOnChange(fn: any): void { this.propagateChange = fn; } @@ -105,6 +118,8 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit { } private updateFilterFormGroup(type: AliasFilterType, filter?: EntityAliasFilter) { + this.subscriptions.unsubscribe(); + this.subscriptions = new Subscription(); switch (type) { case AliasFilterType.singleEntity: this.filterFormGroup = this.fb.group({ @@ -114,8 +129,17 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit { case AliasFilterType.entityList: this.filterFormGroup = this.fb.group({ entityType: [filter ? filter.entityType : null, [Validators.required]], - entityList: [filter ? filter.entityList : [], [Validators.required]], + entityList: [{ + value: filter ? filter.entityList : [], + disabled: !filter?.entityType + }, [Validators.required]], + }); + const entityTypeSubscription = this.filterFormGroup.get('entityType').valueChanges.subscribe((entityType) => { + if (entityType && this.filterFormGroup.get('entityList').disabled) { + this.filterFormGroup.get('entityList').enable({emitEvent: false}); + } }); + this.subscriptions.add(entityTypeSubscription); break; case AliasFilterType.entityName: this.filterFormGroup = this.fb.group({ @@ -175,10 +199,11 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit { maxLevel: [filter ? filter.maxLevel : 1, []], fetchLastLevelOnly: [filter ? filter.fetchLastLevelOnly : false, []] }); - this.filterFormGroup.get('rootStateEntity').valueChanges.subscribe((rootStateEntity: boolean) => { + const rootStateSubscription = this.filterFormGroup.get('rootStateEntity').valueChanges.subscribe((rootStateEntity: boolean) => { this.filterFormGroup.get('rootEntity').setValidators(rootStateEntity ? [] : [Validators.required]); this.filterFormGroup.get('rootEntity').updateValueAndValidity(); }); + this.subscriptions.add(rootStateSubscription); if (type === AliasFilterType.relationsQuery) { this.filterFormGroup.addControl('filters', this.fb.control(filter ? filter.filters : [], [])); @@ -201,9 +226,10 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit { } break; } - this.filterFormGroup.valueChanges.subscribe(() => { + const filterFormSubscription = this.filterFormGroup.valueChanges.subscribe(() => { this.updateModel(); }); + this.subscriptions.add(filterFormSubscription); } private filterTypeChanged(type: AliasFilterType) {