diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts index 9e38e75ce6..9e16757b66 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts +++ b/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((index, item) => { return item; - }) + }), + this.kvDiffers.find([]).create() ); 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); diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts index 8104727f5f..80ddf9ceb0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts +++ b/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(); diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts index 6a44e5bafb..d3395043e2 100644 --- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts @@ -101,15 +101,16 @@ export class DashboardWidgets implements Iterable { } constructor(private dashboard: IDashboardComponent, - private widgetsDiffer: IterableDiffer) { + private widgetsDiffer: IterableDiffer, + private widgetLayoutsDiffer: KeyValueDiffer) { } doCheck() { const widgetChange = this.widgetsDiffer.diff(this.widgets); - if (widgetChange !== null) { - - const updateRecords: Array = []; + const widgetLayoutChange = this.widgetLayoutsDiffer.diff(this.widgetLayouts); + const updateRecords: Array = []; + if (widgetChange !== null) { widgetChange.forEachAddedItem((added) => { updateRecords.push({ widget: added.item, @@ -130,6 +131,25 @@ export class DashboardWidgets implements Iterable { 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 { 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 { break; } }); - if (updateRecords.length) { - this.updateRowsAndSort(); - } + this.updateRowsAndSort(); } } diff --git a/ui-ngx/src/app/modules/home/models/widget-component.models.ts b/ui-ngx/src/app/modules/home/models/widget-component.models.ts index b71f5198b4..818f94391e 100644 --- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts +++ b/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;