From 51b5fee7b7a84ef08823cc43129b6934c059de62 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 9 Mar 2021 17:05:35 +0200
Subject: [PATCH] UI: Fixed init dataKeys widget autocomplete after change
 datasourceType

---
 .../widget/data-keys.component.html           | 12 +++---
 .../components/widget/data-keys.component.ts  | 42 +++++++++++--------
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
index 363b6cae32..03e5abeb3c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
@@ -20,7 +20,7 @@
     <mat-chip
       *ngFor="let key of keys; let $index = index"
       [selectable]="!disabled"
-      [removable]="!disabled && datasourceType !== datasourceTypes.entityCount"
+      [removable]="!disabled && !isEntityCountDatasource"
       (removed)="remove(key)">
       <div fxLayout="row" fxLayoutAlign="start center" class="tb-attribute-chip">
         <div *ngIf="!disabled" class="tb-chip-drag-handle" style="margin-right: 5px;">
@@ -31,7 +31,7 @@
         </div>
         <div class="tb-chip-labels">
           <div class="tb-chip-label">
-            <span *ngIf="datasourceType !== datasourceTypes.function && datasourceType !== datasourceTypes.entityCount">
+            <span *ngIf="datasourceType === datasourceTypes.entity">
               <span *ngIf="key.type === dataKeyTypes.alarm"
                     matTooltip="{{'datakey.alarm' | translate }}"
                     matTooltipPosition="above">
@@ -70,7 +70,7 @@
                 (click)="editDataKey(key, $index)" mat-button mat-icon-button class="tb-mat-32">
           <mat-icon class="tb-mat-20">edit</mat-icon>
         </button>
-        <mat-icon matChipRemove *ngIf="!disabled && datasourceType !== datasourceTypes.entityCount">close</mat-icon>
+        <mat-icon matChipRemove *ngIf="!disabled && !isEntityCountDatasource">close</mat-icon>
       </div>
     </mat-chip>
     <input matInput type="text" placeholder="{{ !disabled ? placeholder : '' }}"
@@ -78,10 +78,12 @@
            #keyInput
            formControlName="key"
            matAutocompleteOrigin
+           [readonly]="isEntityCountDatasource"
            #origin="matAutocompleteOrigin"
            [matAutocompleteConnectedTo]="origin"
            (focusin)="onFocus()"
            [matAutocomplete]="keyAutocomplete"
+           [matAutocompleteDisabled]="isEntityCountDatasource"
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            (matChipInputTokenEnd)="add($event)">
@@ -91,7 +93,7 @@
                     [displayWith]="displayKeyFn">
     <mat-option *ngFor="let key of filteredKeys | async" [value]="key">
       <span style="white-space: nowrap;">
-        <span *ngIf="datasourceType !== datasourceTypes.function && datasourceType !== datasourceTypes.entityCount">
+        <span *ngIf="datasourceType === datasourceTypes.entity">
           <span *ngIf="key.type === dataKeyTypes.alarm"
                 matTooltip="{{'datakey.alarm' | translate }}"
                 matTooltipPosition="above">
@@ -128,7 +130,7 @@
             {{ translate.get('entity.no-key-matching',
               {key: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
           </span>
-          <span *ngIf="datasourceType === datasourceTypes.function || datasourceType === datasourceTypes.entityCount; else createEntityKey">
+          <span *ngIf="datasourceType !== datasourceTypes.entity; else createEntityKey">
             <a translate (click)="createKey(searchText)">entity.create-new-key</a>
           </span>
           <ng-template #createEntityKey>
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts
index 96bd8c702f..ff7f5e2f0c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts
@@ -121,7 +121,7 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
 
   private requiredValue: boolean;
   get required(): boolean {
-    return this.requiredValue || !this.optDataKeys || this.datasourceType === DatasourceType.entityCount;
+    return this.requiredValue || !this.optDataKeys || this.isEntityCountDatasource;
   }
   @Input()
   set required(value: boolean) {
@@ -217,7 +217,7 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
     if (this.maxDataKeys !== null && this.maxDataKeys > -1) {
       if (this.datasourceType === DatasourceType.function) {
         return this.translate.instant('datakey.maximum-function-types', {count: this.maxDataKeys});
-      } else if (this.datasourceType !== DatasourceType.entityCount) {
+      } else if (!this.isEntityCountDatasource) {
         return this.translate.instant('datakey.maximum-timeseries-or-attributes', {count: this.maxDataKeys});
       } else {
         return '';
@@ -250,7 +250,7 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
   private reset() {
     if (this.widgetType === widgetType.alarm) {
       this.keys = this.utils.getDefaultAlarmDataKeys();
-    } else if (this.datasourceType === DatasourceType.entityCount) {
+    } else if (this.isEntityCountDatasource) {
       this.keys = [this.callbacks.generateDataKey('count', DataKeyType.count)];
     } else {
       this.keys = [];
@@ -271,11 +271,10 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
       const change = changes[propName];
       if (!change.firstChange && change.currentValue !== change.previousValue) {
         if (propName === 'entityAliasId') {
-          this.searchText = '';
-          this.fetchObservable$ = null;
-          this.latestSearchTextResult = null;
+          this.clearSearchCache();
           this.dirty = true;
         } else if (['widgetType', 'datasourceType'].includes(propName)) {
+          this.clearSearchCache();
           this.updateParams();
           setTimeout(() => {
             this.reset();
@@ -436,20 +435,18 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
       if (this.datasourceType === DatasourceType.function) {
         const targetKeysList = this.widgetType === widgetType.alarm ? this.alarmKeys : this.functionTypeKeys;
         fetchObservable = of(targetKeysList);
-      } else {
-        if (this.datasourceType !== DatasourceType.entityCount && this.entityAliasId) {
-          const dataKeyTypes = [DataKeyType.timeseries];
-          if (this.widgetType === widgetType.latest || this.widgetType === widgetType.alarm) {
-            dataKeyTypes.push(DataKeyType.attribute);
-            dataKeyTypes.push(DataKeyType.entityField);
-            if (this.widgetType === widgetType.alarm) {
-              dataKeyTypes.push(DataKeyType.alarm);
-            }
+      } else if (this.datasourceType === DatasourceType.entity && this.entityAliasId) {
+        const dataKeyTypes = [DataKeyType.timeseries];
+        if (this.widgetType === widgetType.latest || this.widgetType === widgetType.alarm) {
+          dataKeyTypes.push(DataKeyType.attribute);
+          dataKeyTypes.push(DataKeyType.entityField);
+          if (this.widgetType === widgetType.alarm) {
+            dataKeyTypes.push(DataKeyType.alarm);
           }
-          fetchObservable = this.callbacks.fetchEntityKeys(this.entityAliasId, dataKeyTypes);
-        } else {
-          fetchObservable = of([]);
         }
+        fetchObservable = this.callbacks.fetchEntityKeys(this.entityAliasId, dataKeyTypes);
+      } else {
+        fetchObservable = of([]);
       }
       this.fetchObservable$ = fetchObservable.pipe(
         publishReplay(1),
@@ -477,4 +474,13 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie
     }, 0);
   }
 
+  get isEntityCountDatasource(): boolean {
+    return this.datasourceType === DatasourceType.entityCount;
+  }
+
+  private clearSearchCache() {
+    this.searchText = '';
+    this.fetchObservable$ = null;
+    this.latestSearchTextResult = null;
+  }
 }