From 499a6dbe7f1c69ae16177e1c40985bbcbc325a91 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 31 Aug 2021 18:57:07 +0300
Subject: [PATCH] UI: Refactoring attributes-table component, add
 changeDetection for load widget bundle

---
 .../attribute/attribute-table.component.html  |  8 ++++----
 .../attribute/attribute-table.component.ts    | 20 ++++++++++++-------
 .../widgets-bundle-select.component.ts        |  1 +
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index 769c8a08af..ead92fda03 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -112,8 +112,8 @@
                                     fxFlex
                                     [selectFirstBundle]="false"
                                     [selectBundleAlias]="selectedWidgetsBundleAlias"
-                                    [(ngModel)]="widgetsBundle"
-                                    (ngModelChange)="onWidgetsBundleChanged()">
+                                    [ngModel]="null"
+                                    (ngModelChange)="onWidgetsBundleChanged($event)">
           </tb-widgets-bundle-select>
         </div>
         <button mat-raised-button [fxShow]="widgetsList.length > 0"
@@ -245,11 +245,11 @@
     </ngx-hm-carousel>
     <span translate *ngIf="mode === 'widget' && widgetsLoaded &&
                            widgetsList.length === 0 &&
-                           widgetsBundle"
+                           widgetBundleSet"
           fxFlex fxLayoutAlign="center center"
           style="display: flex;"
           class="mat-headline">widgets-bundle.empty</span>
-    <span translate *ngIf="mode === 'widget' && !widgetsBundle"
+    <span translate *ngIf="mode === 'widget' && !widgetBundleSet"
           fxFlex fxLayoutAlign="center center"
           style="display: flex;"
           class="mat-headline">widget.select-widgets-bundle</span>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
index 7e83c67ec6..36326c464b 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
@@ -17,6 +17,7 @@
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   Injector,
@@ -118,7 +119,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   viewsInited = false;
 
   selectedWidgetsBundleAlias: string = null;
-  widgetsBundle: WidgetsBundle = null;
+  widgetBundleSet = false;
   widgetsLoaded = false;
   widgetsCarouselIndex = 0;
   widgetsList: Array<Array<Widget>> = [];
@@ -182,7 +183,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
               private utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
               private widgetService: WidgetService,
-              private zone: NgZone) {
+              private zone: NgZone,
+              private cd: ChangeDetectorRef) {
     super(store);
     this.dirtyValue = !this.activeValue;
     const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC };
@@ -380,8 +382,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     this.widgetsList = [];
     this.widgetsListCache = [];
     this.widgetsLoaded = false;
+    this.widgetBundleSet = false;
     this.widgetsCarouselIndex = 0;
-    this.widgetsBundle = null;
     this.selectedWidgetsBundleAlias = 'cards';
 
     const entityAlias: EntityAlias = {
@@ -440,15 +442,17 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     }
   }
 
-  onWidgetsBundleChanged() {
+  onWidgetsBundleChanged(widgetsBundle: WidgetsBundle) {
     if (this.mode === 'widget') {
       this.widgetsList = [];
       this.widgetsListCache = [];
       this.widgetsCarouselIndex = 0;
-      if (this.widgetsBundle) {
+      this.widgetBundleSet = false;
+      if (widgetsBundle) {
         this.widgetsLoaded = false;
-        const bundleAlias = this.widgetsBundle.alias;
-        const isSystem = this.widgetsBundle.tenantId.id === NULL_UUID;
+        this.widgetBundleSet = true;
+        const bundleAlias = widgetsBundle.alias;
+        const isSystem = widgetsBundle.tenantId.id === NULL_UUID;
         this.widgetService.getBundleWidgetTypes(bundleAlias, isSystem).subscribe(
           (widgetTypes) => {
             widgetTypes = widgetTypes.sort((a, b) => {
@@ -486,6 +490,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
               }
             }
             this.widgetsLoaded = true;
+            this.cd.markForCheck();
           }
         );
       }
@@ -510,6 +515,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
 
   exitWidgetMode() {
     this.selectedWidgetsBundleAlias = null;
+    this.widgetBundleSet = false;
     this.mode = 'default';
   }
 
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.ts b/ui-ngx/src/app/shared/components/widgets-bundle-select.component.ts
index 57cd0b0677..6e272fa7b8 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.ts
+++ b/ui-ngx/src/app/shared/components/widgets-bundle-select.component.ts
@@ -142,6 +142,7 @@ export class WidgetsBundleSelectComponent implements ControlValueAccessor, OnIni
       }
     } else {
       this.widgetsBundle = null;
+      this.updateView();
     }
   }