Improve layout handling

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts

@@ -19,7 +19,7 @@ import {
   Component,
   DoCheck,
   Input,
-  IterableDiffers,
+  IterableDiffers, KeyValueDiffers,
   NgZone,
   OnChanges,
   OnDestroy,
@@ -42,7 +42,7 @@ import {
   IDashboardComponent
 } from '../../models/dashboard-component.models';
 import { ReplaySubject, Subject, Subscription } from 'rxjs';
-import { WidgetLayouts } from '@shared/models/dashboard.models';
+import { WidgetLayout, WidgetLayouts } from '@shared/models/dashboard.models';
 import { DialogService } from '@core/services/dialog.service';
 import { animatedScroll, deepClone, isDefined } from '@app/core/utils';
 import { BreakpointObserver } from '@angular/cdk/layout';
@@ -154,7 +154,8 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
   dashboardWidgets = new DashboardWidgets(this,
     this.differs.find([]).create<Widget>((index, item) => {
       return item;
-    })
+    }),
+    this.kvDiffers.find([]).create<string, WidgetLayout>()
   );
 
   breakpointObserverSubscription: Subscription;
@@ -168,6 +169,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
               private dialogService: DialogService,
               private breakpointObserver: BreakpointObserver,
               private differs: IterableDiffers,
+              private kvDiffers: KeyValueDiffers,
               private ngZone: NgZone) {
     super(store);
     this.authUser = getCurrentAuthUser(store);

ui-ngx/src/app/modules/home/components/widget/widget.component.ts

@@ -529,7 +529,9 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
       this.cafs.reinit = null;
     }
     this.cafs.reinit = this.raf.raf(() => {
-      this.reInitImpl();
+      this.ngZone.run(() => {
+        this.reInitImpl();
+      });
     });
   }
 
@@ -541,6 +543,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
           if (this.destroyed) {
             this.onDestroy();
           } else {
+            this.widgetContext.reset();
             this.subscriptionInited = true;
             this.configureDynamicWidgetComponent();
             this.cd.detectChanges();
@@ -551,12 +554,14 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
           if (this.destroyed) {
             this.onDestroy();
           } else {
+            this.widgetContext.reset();
             this.subscriptionInited = true;
             this.onInit();
           }
         }
       );
     } else {
+      this.widgetContext.reset();
       this.subscriptionInited = true;
       this.configureDynamicWidgetComponent();
       this.cd.detectChanges();

ui-ngx/src/app/modules/home/models/dashboard-component.models.ts

@@ -101,15 +101,16 @@ export class DashboardWidgets implements Iterable<DashboardWidget> {
   }
 
   constructor(private dashboard: IDashboardComponent,
-              private widgetsDiffer: IterableDiffer<Widget>) {
+              private widgetsDiffer: IterableDiffer<Widget>,
+              private widgetLayoutsDiffer: KeyValueDiffer<string, WidgetLayout>) {
   }
 
   doCheck() {
     const widgetChange = this.widgetsDiffer.diff(this.widgets);
-    if (widgetChange !== null) {
-
-      const updateRecords: Array<DashboardWidgetUpdateRecord> = [];
+    const widgetLayoutChange = this.widgetLayoutsDiffer.diff(this.widgetLayouts);
+    const updateRecords: Array<DashboardWidgetUpdateRecord> = [];
 
+    if (widgetChange !== null) {
       widgetChange.forEachAddedItem((added) => {
         updateRecords.push({
           widget: added.item,
@@ -130,6 +131,25 @@ export class DashboardWidgets implements Iterable<DashboardWidget> {
           updateRecords.push(operation);
         }
       });
+    }
+    if (widgetLayoutChange !== null) {
+      widgetLayoutChange.forEachChangedItem((changed) => {
+        let operation = updateRecords.find((record) => record.widgetId === changed.key);
+        if (!operation) {
+          let index = this.dashboardWidgets.findIndex((dashboardWidget) => dashboardWidget.widgetId === changed.key);
+          if (index > -1) {
+            const widget = this.dashboardWidgets[index];
+            updateRecords.push({
+              widget: widget.widget,
+              widgetId: changed.key,
+              widgetLayout: changed.currentValue,
+              operation: 'update'
+            });
+          }
+        }
+      });
+    }
+    if (updateRecords.length) {
       updateRecords.forEach((record) => {
         switch (record.operation) {
           case 'add':
@@ -147,7 +167,7 @@ export class DashboardWidgets implements Iterable<DashboardWidget> {
             index = this.dashboardWidgets.findIndex((dashboardWidget) => dashboardWidget.widgetId === record.widgetId);
             if (index > -1) {
               const prevDashboardWidget = this.dashboardWidgets[index];
-              if (!deepEqual(prevDashboardWidget.widget, record.widget)) {
+              if (!deepEqual(prevDashboardWidget.widget, record.widget) || !deepEqual(prevDashboardWidget.widgetLayout, record.widgetLayout)) {
                 this.dashboardWidgets[index] = new DashboardWidget(this.dashboard, record.widget, record.widgetLayout);
                 this.dashboardWidgets[index].highlighted = prevDashboardWidget.highlighted;
                 this.dashboardWidgets[index].selected = prevDashboardWidget.selected;
@@ -159,9 +179,7 @@ export class DashboardWidgets implements Iterable<DashboardWidget> {
             break;
         }
       });
-      if (updateRecords.length) {
-        this.updateRowsAndSort();
-      }
+      this.updateRowsAndSort();
     }
   }
 

ui-ngx/src/app/modules/home/models/widget-component.models.ts

@@ -130,6 +130,15 @@ export class WidgetContext {
     }
   }
 
+  reset() {
+    this.destroyed = false;
+    this.hideTitlePanel = false;
+    this.widgetTitleTemplate = undefined;
+    this.widgetTitle = undefined;
+    this.customHeaderActions = undefined;
+    this.widgetActions = undefined;
+  }
+
   inited = false;
   destroyed = false;