Improvement view filter dialog setting

ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html

@@ -29,13 +29,6 @@
     <fieldset [disabled]="isLoading$ | async" fxLayout="column">
       <section fxLayout="row" fxLayoutGap="8px" class="entity-key">
         <section fxFlex="70" fxLayout="row" formGroupName="key" fxLayoutGap="8px">
-          <mat-form-field fxFlex="60" class="mat-block">
-            <mat-label translate>filter.key-name</mat-label>
-            <input matInput required formControlName="key">
-            <mat-error *ngIf="keyFilterFormGroup.get('key.key').hasError('required')">
-              {{ 'filter.key-name-required' | translate }}
-            </mat-error>
-          </mat-form-field>
           <mat-form-field fxFlex="40" class="mat-block">
             <mat-label translate>filter.key-type.key-type</mat-label>
             <mat-select required formControlName="type">
@@ -44,10 +37,24 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
+          <mat-form-field fxFlex="60" class="mat-block">
+            <mat-label translate>filter.key-name</mat-label>
+            <input matInput required formControlName="key"
+                   [matAutocomplete]="auto"
+                   [matAutocompleteDisabled]="keyFilterFormGroup.get('key.type').value !== entityField">
+            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+              <mat-option *ngFor="let option of filteredEntityFields | async" [value]="option">
+                {{option}}
+              </mat-option>
+            </mat-autocomplete>
+            <mat-error *ngIf="keyFilterFormGroup.get('key.key').hasError('required')">
+              {{ 'filter.key-name-required' | translate }}
+            </mat-error>
+          </mat-form-field>
         </section>
         <mat-form-field fxFlex="30" class="mat-block">
           <mat-label translate>filter.value-type.value-type</mat-label>
-          <mat-select matInput formControlName="valueType">
+          <mat-select formControlName="valueType">
             <mat-select-trigger>
               <mat-icon class="tb-mat-18" svgIcon="{{ entityKeyValueTypes.get(keyFilterFormGroup.get('valueType').value)?.icon }}"></mat-icon>
               <span>{{ entityKeyValueTypes.get(keyFilterFormGroup.get('valueType').value)?.name | translate }}</span>

ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.ts

@@ -27,10 +27,14 @@ import {
   entityKeyTypeTranslationMap,
   EntityKeyValueType,
   entityKeyValueTypesMap,
-  KeyFilterInfo, KeyFilterPredicate
+  KeyFilterInfo,
+  KeyFilterPredicate
 } from '@shared/models/query/query.models';
 import { DialogService } from '@core/services/dialog.service';
 import { TranslateService } from '@ngx-translate/core';
+import { EntityField, entityFields } from '@shared/models/entity.models';
+import { Observable } from 'rxjs';
+import { filter, map, startWith } from 'rxjs/operators';
 
 export interface KeyFilterDialogData {
   keyFilter: KeyFilterInfo;
@@ -61,6 +65,14 @@ export class KeyFilterDialogComponent extends
 
   submitted = false;
 
+  entityFields: { [fieldName: string]: EntityField };
+
+  entityFieldsList: string[];
+
+  readonly entityField = EntityKeyType.ENTITY_FIELD;
+
+  filteredEntityFields: Observable<string[]>;
+
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: KeyFilterDialogData,
@@ -99,9 +111,28 @@ export class KeyFilterDialogComponent extends
         );
       }
     });
+
+    this.keyFilterFormGroup.get('key.key').valueChanges.pipe(
+      filter((keyName) => this.keyFilterFormGroup.get('key.type').value === this.entityField && this.entityFields.hasOwnProperty(keyName))
+    ).subscribe((keyName: string) => {
+      const prevValueType: EntityKeyValueType = this.keyFilterFormGroup.value.valueType;
+      const newValueType = this.entityFields[keyName]?.time ? EntityKeyValueType.DATE_TIME : EntityKeyValueType.STRING;
+      if (prevValueType !== newValueType) {
+        this.keyFilterFormGroup.get('valueType').patchValue(newValueType, {emitEvent: false});
+      }
+    });
+
+    this.entityFields = entityFields;
+    this.entityFieldsList = Object.values(entityFields).map(entityField => entityField.keyName).sort();
   }
 
   ngOnInit(): void {
+    this.filteredEntityFields = this.keyFilterFormGroup.get('key.key').valueChanges.pipe(
+      startWith(''),
+      map(value => {
+        return this.entityFieldsList.filter(option => option.startsWith(value));
+      })
+    );
   }
 
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {