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;
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) {

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

@ -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<EditWidgetActionsTooltipComponent>;
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));
});
}