Merge pull request #9644 from vvlladd28/bug/alias/entity-list/empty-type

Fixed alias controller in entity list type added disable entity list for empty entity type

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 { Component, EventEmitter, forwardRef, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+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<boolean> = new EventEmitter<boolean>();
 
-  entityFilterFormGroup: UntypedFormGroup;
+  entityFilterFormGroup: FormGroup;
-  filterFormGroup: UntypedFormGroup;
+  filterFormGroup: FormGroup;
 
   aliasFilterTypes: Array<AliasFilterType>;
 
@@ -59,9 +60,11 @@ export class EntityFilterComponent implements ControlValueAccessor, OnInit {
 
   private propagateChange = null;
 
-  constructor(private translate: TranslateService,
+  private destroy$ = new Subject<void>();
-              private entityService: EntityService,
+  private subscriptions = new Subscription();
-              private fb: UntypedFormBuilder) {
+
+  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) {