diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts index bb83f1e1bf..b1963e4ff0 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts @@ -169,6 +169,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC LayoutType = LayoutType; + private destroyed = false; + private forcePristine = false; get isDirty(): boolean { @@ -594,6 +596,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } ngOnDestroy(): void { + this.destroyed = true; this.cleanupDashboardCss(); if (this.isMobileApp && this.syncStateWithQueryParam) { this.mobileService.unregisterToggleLayoutFunction(); @@ -1106,16 +1109,18 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } public openDashboardState(state: string, openRightLayout?: boolean) { - const layoutsData = this.dashboardUtils.getStateLayoutsData(this.dashboard, state); - if (layoutsData) { - this.dashboardCtx.state = state; - this.dashboardCtx.aliasController.dashboardStateChanged(); - this.isRightLayoutOpened = openRightLayout ? true : false; - this.updateLayouts(layoutsData); + if (!this.destroyed) { + const layoutsData = this.dashboardUtils.getStateLayoutsData(this.dashboard, state); + if (layoutsData) { + this.dashboardCtx.state = state; + this.dashboardCtx.aliasController.dashboardStateChanged(); + this.isRightLayoutOpened = openRightLayout ? true : false; + this.updateLayouts(layoutsData); + } + setTimeout(() => { + this.mobileService.onDashboardLoaded(this.layouts.right.show, this.isRightLayoutOpened); + }); } - setTimeout(() => { - this.mobileService.onDashboardLoaded(this.layouts.right.show, this.isRightLayoutOpened); - }); } private updateLayouts(layoutsData?: DashboardLayoutsInfo) { diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts index 0032ef35b4..b9dde9581f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts @@ -18,11 +18,11 @@ import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, - Component, + Component, ComponentRef, ElementRef, EventEmitter, HostBinding, - Input, OnChanges, + Input, NgZone, OnChanges, OnDestroy, OnInit, Output, @@ -134,7 +134,8 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O private renderer: Renderer2, private container: ViewContainerRef, private dashboardUtils: DashboardUtilsService, - private utils: UtilsService) { + private utils: UtilsService, + private zone: NgZone) { super(store); } @@ -173,7 +174,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O if (this.cssClass) { this.utils.clearCssElement(this.renderer, this.cssClass); } - if (this.editWidgetActionsTooltip) { + if (this.editWidgetActionsTooltip && !this.editWidgetActionsTooltip.status().destroyed) { this.editWidgetActionsTooltip.destroy(); } } @@ -255,6 +256,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O } private initEditWidgetActionTooltip(parent: HTMLElement) { + let componentRef: ComponentRef; from(import('tooltipster')).subscribe(() => { $(this.gridsterItem.el).tooltipster({ parent: $(parent), @@ -305,24 +307,26 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O } }); this.editWidgetActionsTooltip = $(this.gridsterItem.el).tooltipster('instance'); - const componentRef = this.container.createComponent(EditWidgetActionsTooltipComponent); - componentRef.instance.container = this; - componentRef.instance.viewInited.subscribe(() => { - if (this.editWidgetActionsTooltip.status().open) { - this.editWidgetActionsTooltip.reposition(); - } + this.zone.run(() => { + componentRef = this.container.createComponent(EditWidgetActionsTooltipComponent); + componentRef.instance.container = this; + componentRef.instance.viewInited.subscribe(() => { + if (this.editWidgetActionsTooltip.status().open) { + this.editWidgetActionsTooltip.reposition(); + } + }); + this.editWidgetActionsTooltip.on('destroyed', () => { + componentRef.destroy(); + }); + const parentElement = componentRef.instance.element.nativeElement; + const content = parentElement.firstChild; + parentElement.removeChild(content); + parentElement.style.display = 'none'; + this.editWidgetActionsTooltip.content(content); + this.updateEditWidgetActionsTooltipState(); + this.widget.onSelected((selected) => + this.updateEditWidgetActionsTooltipSelectedState(selected)); }); - this.editWidgetActionsTooltip.on('destroyed', () => { - componentRef.destroy(); - }); - const parentElement = componentRef.instance.element.nativeElement; - const content = parentElement.firstChild; - parentElement.removeChild(content); - parentElement.style.display = 'none'; - this.editWidgetActionsTooltip.content(content); - this.updateEditWidgetActionsTooltipState(); - this.widget.onSelected((selected) => - this.updateEditWidgetActionsTooltipSelectedState(selected)); }); }