From 08b346da7fd19d0a9009f88dc234f12b0807523e Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 16 Sep 2020 17:28:33 +0300
Subject: [PATCH] UI Refactoring rule-chain-autocomplete component

---
 .../rule-chain-autocomplete.component.html    | 12 ++++++------
 .../rule-chain-autocomplete.component.ts      | 19 +++++++++++--------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
index 9f6dd96294..626b82aad3 100644
--- a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
@@ -17,11 +17,11 @@
 -->
 <mat-form-field [formGroup]="selectRuleChainFormGroup" class="mat-block">
   <input matInput type="text" placeholder="{{ ruleChainLabel | translate }}"
-         #entityInput
+         #ruleChainInput
          formControlName="ruleChainId"
          (focusin)="onFocus()"
          [required]="required"
-         [matAutocomplete]="entityAutocomplete">
+         [matAutocomplete]="ruleChainAutocomplete">
   <button *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && !disabled"
           type="button"
           matSuffix mat-button mat-icon-button aria-label="Clear"
@@ -29,10 +29,10 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
   <mat-autocomplete class="tb-autocomplete"
-                    #entityAutocomplete="matAutocomplete"
-                    [displayWith]="displayEntityFn">
-    <mat-option *ngFor="let entity of filteredRuleChains | async" [value]="entity">
-      <span [innerHTML]="entity.name | highlight:searchText"></span>
+                    #ruleChainAutocomplete="matAutocomplete"
+                    [displayWith]="displayRuleChainFn">
+    <mat-option *ngFor="let ruleChain of filteredRuleChains | async" [value]="ruleChain">
+      <span [innerHTML]="ruleChain.name | highlight:searchText"></span>
     </mat-option>
     <mat-option *ngIf="!(filteredRuleChains | async)?.length" [value]="null" class="tb-not-found">
       <div class="tb-not-found-content" (click)="$event.stopPropagation()">
diff --git a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.ts b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.ts
index 708707e7ca..53449aad10 100644
--- a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.ts
@@ -66,7 +66,8 @@ export class RuleChainAutocompleteComponent implements ControlValueAccessor, OnI
   @Input()
   disabled: boolean;
 
-  @ViewChild('entityInput', {static: true}) entityInput: ElementRef;
+  @ViewChild('ruleChainInput', {static: true}) ruleChainInput: ElementRef;
+  @ViewChild('ruleChainInput', {read: MatAutocompleteTrigger}) ruleChainAutocomplete: MatAutocompleteTrigger;
 
   filteredRuleChains: Observable<Array<BaseData<EntityId>>>;
 
@@ -117,9 +118,9 @@ export class RuleChainAutocompleteComponent implements ControlValueAccessor, OnI
   ngAfterViewInit(): void {}
 
   getCurrentEntity(): BaseData<EntityId> | null {
-    const currentEntity = this.selectRuleChainFormGroup.get('ruleChainId').value;
-    if (currentEntity && typeof currentEntity !== 'string') {
-      return currentEntity as BaseData<EntityId>;
+    const currentRuleChain = this.selectRuleChainFormGroup.get('ruleChainId').value;
+    if (currentRuleChain && typeof currentRuleChain !== 'string') {
+      return currentRuleChain as BaseData<EntityId>;
     } else {
       return null;
     }
@@ -180,8 +181,8 @@ export class RuleChainAutocompleteComponent implements ControlValueAccessor, OnI
     }
   }
 
-  displayEntityFn(entity?: BaseData<EntityId>): string | undefined {
-    return entity ? entity.name : undefined;
+  displayRuleChainFn(ruleChain?: BaseData<EntityId>): string | undefined {
+    return ruleChain ? ruleChain.name : undefined;
   }
 
   fetchRuleChain(searchText?: string): Observable<Array<BaseData<EntityId>>> {
@@ -193,12 +194,14 @@ export class RuleChainAutocompleteComponent implements ControlValueAccessor, OnI
   clear() {
     this.selectRuleChainFormGroup.get('ruleChainId').patchValue('', {emitEvent: true});
     setTimeout(() => {
-      this.entityInput.nativeElement.blur();
-      this.entityInput.nativeElement.focus();
+      this.ruleChainInput.nativeElement.blur();
+      this.ruleChainInput.nativeElement.focus();
     }, 0);
   }
 
   createDefaultRuleChain($event: Event, ruleChainName: string) {
+    $event.preventDefault();
+    this.ruleChainAutocomplete.closePanel();
     this.ruleChainService.createDefaultRuleChain(ruleChainName).subscribe((ruleChain) => {
       this.updateView(ruleChain.id.id);
     });