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

UI: Fixed infinite load when select divided layout

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-08-28 16:32:09 +03:00
parent 02d3382731
commit 7e7656f7b4
5 changed files with 22 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui-ngx/src/app/core/services/dashboard-utils.service.ts
View File

@ -59,6 +59,7 @@ import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
import { BackgroundType, colorBackground, isBackgroundSettings } from '@shared/models/widget-settings.models'; import { BackgroundType, colorBackground, isBackgroundSettings } from '@shared/models/widget-settings.models';
import { MediaBreakpoints } from '@shared/models/constants'; import { MediaBreakpoints } from '@shared/models/constants';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { DashboardPageLayout } from '@home/components/dashboard-page/dashboard-page.models';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -1066,4 +1067,22 @@ export class DashboardUtilsService {
const maxStr = isDefined(currentData?.maxWidth) ? `max ${currentData.maxWidth}px` : ''; const maxStr = isDefined(currentData?.maxWidth) ? `max ${currentData.maxWidth}px` : '';
return minStr && maxStr ? `${minStr} - ${maxStr}` : `${minStr}${maxStr}`; return minStr && maxStr ? `${minStr} - ${maxStr}` : `${minStr}${maxStr}`;
} }
updatedLayoutForBreakpoint(layout: DashboardPageLayout, breakpointId: BreakpointId) {
let selectBreakpointId: BreakpointId = 'default';
if (layout.layoutCtx.layoutData[breakpointId]) {
selectBreakpointId = breakpointId;
}
layout.layoutCtx.breakpoint = selectBreakpointId;
const layoutInfo = layout.layoutCtx.layoutData[selectBreakpointId];
if (layoutInfo.gridSettings) {
layout.layoutCtx.gridSettings = layoutInfo.gridSettings;
}
layout.layoutCtx.widgets.setWidgetIds(layoutInfo.widgetIds);
layout.layoutCtx.widgetLayouts = layoutInfo.widgetLayouts;
if (layout.show && layout.layoutCtx.ctrl) {
layout.layoutCtx.ctrl.reload();
}
layout.layoutCtx.ignoreLoading = true;
}
} }

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

@ -450,7 +450,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}), }),
skip(1) skip(1)
).subscribe(() => { ).subscribe(() => {
this.layouts.main.layoutCtx.ctrl.updatedCurrentBreakpoint(); this.dashboardUtils.updatedLayoutForBreakpoint(this.layouts.main, this.dashboardCtx.breakpoint);
this.updateLayoutSizes(); this.updateLayoutSizes();
} }
) )
@ -1129,7 +1129,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
private updateLayout(layout: DashboardPageLayout, layoutInfo: DashboardLayoutInfo) { private updateLayout(layout: DashboardPageLayout, layoutInfo: DashboardLayoutInfo) {
layout.layoutCtx.layoutData = layoutInfo; layout.layoutCtx.layoutData = layoutInfo;
layout.layoutCtx.layoutDataChanged.next(); layout.layoutCtx.layoutDataChanged.next();
layout.layoutCtx.ctrl?.updatedCurrentBreakpoint(this.isEdit ? layout.layoutCtx.breakpoint : null, layout.show); this.dashboardUtils.updatedLayoutForBreakpoint(layout, this.isEdit ? layout.layoutCtx.breakpoint : this.dashboardCtx.breakpoint);
this.updateLayoutSizes(); this.updateLayoutSizes();
} }

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

@ -332,25 +332,4 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo
const pos = this.dashboard.getEventGridPosition($event); const pos = this.dashboard.getEventGridPosition($event);
this.layoutCtx.dashboardCtrl.pasteWidgetReference($event, this.layoutCtx, pos); this.layoutCtx.dashboardCtrl.pasteWidgetReference($event, this.layoutCtx, pos);
} }
updatedCurrentBreakpoint(breakpointId?: BreakpointId, showLayout = true) {
if (!isNotEmptyStr(breakpointId)) {
breakpointId = this.dashboardCtx.breakpoint;
}
if (this.layoutCtx.layoutData[breakpointId]) {
this.layoutCtx.breakpoint = breakpointId;
} else {
this.layoutCtx.breakpoint = 'default';
}
const layoutInfo = this.layoutCtx.layoutData[this.layoutCtx.breakpoint];
if (layoutInfo.gridSettings) {
this.layoutCtx.gridSettings = layoutInfo.gridSettings;
}
this.layoutCtx.widgets.setWidgetIds(layoutInfo.widgetIds);
this.layoutCtx.widgetLayouts = layoutInfo.widgetLayouts;
if (showLayout && this.layoutCtx.ctrl) {
this.layoutCtx.ctrl.reload();
}
this.layoutCtx.ignoreLoading = true;
}
} }

1
ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
View File

@ -21,7 +21,6 @@ export interface ILayoutController {
selectWidget(widgetId: string, delay?: number); selectWidget(widgetId: string, delay?: number);
pasteWidget($event: MouseEvent); pasteWidget($event: MouseEvent);
pasteWidgetReference($event: MouseEvent); pasteWidgetReference($event: MouseEvent);
updatedCurrentBreakpoint(breakpoint?: string, showLayout?: boolean);
} }
export enum LayoutWidthType { export enum LayoutWidthType {

2
ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.ts
View File

@ -63,7 +63,7 @@ export class SelectDashboardBreakpointComponent implements OnInit, OnDestroy {
} }
selectLayoutChanged() { selectLayoutChanged() {
this.dashboardCtrl.layouts.main.layoutCtx.ctrl.updatedCurrentBreakpoint(this.selectedBreakpoint); this.dashboardUtils.updatedLayoutForBreakpoint(this.dashboardCtrl.layouts.main, this.selectedBreakpoint);
this.dashboardCtrl.updateLayoutSizes(); this.dashboardCtrl.updateLayoutSizes();
} }