dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Fix widget container tooltip crash on destroy. Fix raise condition on dashboard page destroy.

Browse Source
This commit is contained in:
Igor Kulikov 2024-09-19 19:47:25 +03:00
parent 7cb785bc78
commit 312aa5220b
2 changed files with 39 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
View File

@ -169,6 +169,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
LayoutType = LayoutType; LayoutType = LayoutType;
private destroyed = false;
private forcePristine = false; private forcePristine = false;
get isDirty(): boolean { get isDirty(): boolean {
@ -594,6 +596,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.destroyed = true;
this.cleanupDashboardCss(); this.cleanupDashboardCss();
if (this.isMobileApp && this.syncStateWithQueryParam) { if (this.isMobileApp && this.syncStateWithQueryParam) {
this.mobileService.unregisterToggleLayoutFunction(); this.mobileService.unregisterToggleLayoutFunction();
@ -1106,16 +1109,18 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
} }
public openDashboardState(state: string, openRightLayout?: boolean) { public openDashboardState(state: string, openRightLayout?: boolean) {
const layoutsData = this.dashboardUtils.getStateLayoutsData(this.dashboard, state); if (!this.destroyed) {
if (layoutsData) { const layoutsData = this.dashboardUtils.getStateLayoutsData(this.dashboard, state);
this.dashboardCtx.state = state; if (layoutsData) {
this.dashboardCtx.aliasController.dashboardStateChanged(); this.dashboardCtx.state = state;
this.isRightLayoutOpened = openRightLayout ? true : false; this.dashboardCtx.aliasController.dashboardStateChanged();
this.updateLayouts(layoutsData); 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) { private updateLayouts(layoutsData?: DashboardLayoutsInfo) {

46
ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
View File

@ -18,11 +18,11 @@ import {
AfterViewInit, AfterViewInit,
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
Component, Component, ComponentRef,
ElementRef, ElementRef,
EventEmitter, EventEmitter,
HostBinding, HostBinding,
Input, OnChanges, Input, NgZone, OnChanges,
OnDestroy, OnDestroy,
OnInit, OnInit,
Output, Output,
@ -134,7 +134,8 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
private renderer: Renderer2, private renderer: Renderer2,
private container: ViewContainerRef, private container: ViewContainerRef,
private dashboardUtils: DashboardUtilsService, private dashboardUtils: DashboardUtilsService,
private utils: UtilsService) { private utils: UtilsService,
private zone: NgZone) {
super(store); super(store);
} }
@ -173,7 +174,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
if (this.cssClass) { if (this.cssClass) {
this.utils.clearCssElement(this.renderer, this.cssClass); this.utils.clearCssElement(this.renderer, this.cssClass);
} }
if (this.editWidgetActionsTooltip) { if (this.editWidgetActionsTooltip && !this.editWidgetActionsTooltip.status().destroyed) {
this.editWidgetActionsTooltip.destroy(); this.editWidgetActionsTooltip.destroy();
} }
} }
@ -255,6 +256,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
} }
private initEditWidgetActionTooltip(parent: HTMLElement) { private initEditWidgetActionTooltip(parent: HTMLElement) {
let componentRef: ComponentRef<EditWidgetActionsTooltipComponent>;
from(import('tooltipster')).subscribe(() => { from(import('tooltipster')).subscribe(() => {
$(this.gridsterItem.el).tooltipster({ $(this.gridsterItem.el).tooltipster({
parent: $(parent), parent: $(parent),
@ -305,24 +307,26 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
} }
}); });
this.editWidgetActionsTooltip = $(this.gridsterItem.el).tooltipster('instance'); this.editWidgetActionsTooltip = $(this.gridsterItem.el).tooltipster('instance');
const componentRef = this.container.createComponent(EditWidgetActionsTooltipComponent); this.zone.run(() => {
componentRef.instance.container = this; componentRef = this.container.createComponent(EditWidgetActionsTooltipComponent);
componentRef.instance.viewInited.subscribe(() => { componentRef.instance.container = this;
if (this.editWidgetActionsTooltip.status().open) { componentRef.instance.viewInited.subscribe(() => {
this.editWidgetActionsTooltip.reposition(); 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));
}); });
} }