UI: Refactoring attributes-table component, add changeDetection for load widget bundle

@@ -112,8 +112,8 @@
                                     fxFlex
                                     fxFlex
                                     [selectFirstBundle]="false"
                                     [selectFirstBundle]="false"
                                     [selectBundleAlias]="selectedWidgetsBundleAlias"
                                     [selectBundleAlias]="selectedWidgetsBundleAlias"
-                                    [(ngModel)]="widgetsBundle"
-                                    (ngModelChange)="onWidgetsBundleChanged()">
+                                    [ngModel]="null"
+                                    (ngModelChange)="onWidgetsBundleChanged($event)">
           </tb-widgets-bundle-select>
           </tb-widgets-bundle-select>
         </div>
         </div>
         <button mat-raised-button [fxShow]="widgetsList.length > 0"
         <button mat-raised-button [fxShow]="widgetsList.length > 0"
@@ -245,11 +245,11 @@
     </ngx-hm-carousel>
     </ngx-hm-carousel>
     <span translate *ngIf="mode === 'widget' && widgetsLoaded &&
     <span translate *ngIf="mode === 'widget' && widgetsLoaded &&
                            widgetsList.length === 0 &&
                            widgetsList.length === 0 &&
-                           widgetsBundle"
+                           widgetBundleSet"
           fxFlex fxLayoutAlign="center center"
           fxFlex fxLayoutAlign="center center"
           style="display: flex;"
           style="display: flex;"
           class="mat-headline">widgets-bundle.empty</span>
           class="mat-headline">widgets-bundle.empty</span>
-    <span translate *ngIf="mode === 'widget' && !widgetsBundle"
+    <span translate *ngIf="mode === 'widget' && !widgetBundleSet"
           fxFlex fxLayoutAlign="center center"
           fxFlex fxLayoutAlign="center center"
           style="display: flex;"
           style="display: flex;"
           class="mat-headline">widget.select-widgets-bundle</span>
           class="mat-headline">widget.select-widgets-bundle</span>

@@ -17,6 +17,7 @@
 import {
 import {
   AfterViewInit,
   AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   Component,
   ElementRef,
   ElementRef,
   Injector,
   Injector,
@@ -118,7 +119,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   viewsInited = false;
   viewsInited = false;
 
 
   selectedWidgetsBundleAlias: string = null;
   selectedWidgetsBundleAlias: string = null;
-  widgetsBundle: WidgetsBundle = null;
+  widgetBundleSet = false;
   widgetsLoaded = false;
   widgetsLoaded = false;
   widgetsCarouselIndex = 0;
   widgetsCarouselIndex = 0;
   widgetsList: Array<Array<Widget>> = [];
   widgetsList: Array<Array<Widget>> = [];
@@ -182,7 +183,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
               private utils: UtilsService,
               private utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
               private dashboardUtils: DashboardUtilsService,
               private widgetService: WidgetService,
               private widgetService: WidgetService,
-              private zone: NgZone) {
+              private zone: NgZone,
+              private cd: ChangeDetectorRef) {
     super(store);
     super(store);
     this.dirtyValue = !this.activeValue;
     this.dirtyValue = !this.activeValue;
     const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC };
     const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC };
@@ -380,8 +382,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     this.widgetsList = [];
     this.widgetsList = [];
     this.widgetsListCache = [];
     this.widgetsListCache = [];
     this.widgetsLoaded = false;
     this.widgetsLoaded = false;
+    this.widgetBundleSet = false;
     this.widgetsCarouselIndex = 0;
     this.widgetsCarouselIndex = 0;
-    this.widgetsBundle = null;
     this.selectedWidgetsBundleAlias = 'cards';
     this.selectedWidgetsBundleAlias = 'cards';
 
 
     const entityAlias: EntityAlias = {
     const entityAlias: EntityAlias = {
@@ -440,15 +442,17 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     }
     }
   }
   }
 
 
-  onWidgetsBundleChanged() {
+  onWidgetsBundleChanged(widgetsBundle: WidgetsBundle) {
     if (this.mode === 'widget') {
     if (this.mode === 'widget') {
       this.widgetsList = [];
       this.widgetsList = [];
       this.widgetsListCache = [];
       this.widgetsListCache = [];
       this.widgetsCarouselIndex = 0;
       this.widgetsCarouselIndex = 0;
-      if (this.widgetsBundle) {
+      this.widgetBundleSet = false;
+      if (widgetsBundle) {
         this.widgetsLoaded = false;
         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(
         this.widgetService.getBundleWidgetTypes(bundleAlias, isSystem).subscribe(
           (widgetTypes) => {
           (widgetTypes) => {
             widgetTypes = widgetTypes.sort((a, b) => {
             widgetTypes = widgetTypes.sort((a, b) => {
@@ -486,6 +490,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
               }
               }
             }
             }
             this.widgetsLoaded = true;
             this.widgetsLoaded = true;
+            this.cd.markForCheck();
           }
           }
         );
         );
       }
       }
@@ -510,6 +515,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
 
 
   exitWidgetMode() {
   exitWidgetMode() {
     this.selectedWidgetsBundleAlias = null;
     this.selectedWidgetsBundleAlias = null;
+    this.widgetBundleSet = false;
     this.mode = 'default';
     this.mode = 'default';
   }
   }
 
 

@@ -142,6 +142,7 @@ export class WidgetsBundleSelectComponent implements ControlValueAccessor, OnIni
       }
       }
     } else {
     } else {
       this.widgetsBundle = null;
       this.widgetsBundle = null;
+      this.updateView();
     }
     }
   }
   }