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

Merge pull request #11439 from vvlladd28/bug/dashboard/delete-widget-in-layout

Browse Source 
Fixed delete widget in layout and improved dashboard layout types
This commit is contained in:
Igor Kulikov 2024-08-19 18:07:03 +03:00 committed by GitHub
commit aeb5c93643
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 26 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -698,16 +698,9 @@ export class DashboardUtilsService {
targetState: string,
targetLayout: DashboardLayoutId,
widgetId: string,
breakpoint: string) {
const dashboardConfiguration = dashboard.configuration;
const states = dashboardConfiguration.states;
const state = states[targetState];
const layout = state.layouts[targetLayout];
if (layout.breakpoints[breakpoint]) {
delete layout.breakpoints[breakpoint].widgets[widgetId];
} else {
breakpoint: BreakpointId) {
const layout = this.getDashboardLayoutConfig(dashboard.configuration.states[targetState].layouts[targetLayout], breakpoint);
delete layout.widgets[widgetId];
}
this.removeUnusedWidgets(dashboard);
}
@ -948,7 +941,7 @@ export class DashboardUtilsService {
dashboard: Dashboard,
targetState: string,
targetLayout: DashboardLayoutId,
breakpointId: string,
breakpointId: BreakpointId,
isRemoveWidget: boolean): Widget {
const newWidget = deepClone(widget);
@ -972,14 +965,14 @@ export class DashboardUtilsService {
return newWidget;
}
getDashboardLayoutConfig(layout: DashboardLayout, breakpointId: string): DashboardLayout {
if (breakpointId !== 'default') {
getDashboardLayoutConfig(layout: DashboardLayout, breakpointId: BreakpointId): DashboardLayout {
if (breakpointId !== 'default' && layout.breakpoints) {
return layout.breakpoints[breakpointId];
}
return layout;
}
getOriginalColumns(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, breakpointId: string): number {
getOriginalColumns(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, breakpointId: BreakpointId): number {
let originalColumns = 24;
let gridSettings = null;
const state = dashboard.configuration.states[sourceState];
@ -998,7 +991,7 @@ export class DashboardUtilsService {
}
getOriginalSize(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId,
widget: Widget, breakpointId: string): WidgetSize {
widget: Widget, breakpointId: BreakpointId): WidgetSize {
const layout = this.getDashboardLayoutConfig(dashboard.configuration.states[sourceState].layouts[sourceLayout], breakpointId);
const widgetLayout = layout.widgets[widget.id];
return {

10
ui-ngx/src/app/core/services/item-buffer.service.ts
View File

@ -15,7 +15,7 @@
///
import { Injectable } from '@angular/core';
import { Dashboard, DashboardLayoutId } from '@app/shared/models/dashboard.models';
import { BreakpointId, Dashboard, DashboardLayoutId } from '@app/shared/models/dashboard.models';
import { AliasesInfo, EntityAlias, EntityAliases, EntityAliasInfo } from '@shared/models/alias.models';
import {
Datasource,
@ -87,7 +87,7 @@ export class ItemBufferService {
private utils: UtilsService) {}
public prepareWidgetItem(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId,
widget: Widget, breakpoint: string): WidgetItem {
widget: Widget, breakpoint: BreakpointId): WidgetItem {
const aliasesInfo: AliasesInfo = {
datasourceAliases: {},
targetDeviceAlias: null
@ -148,13 +148,13 @@ export class ItemBufferService {
};
}
public copyWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget, breakpoint: string): void {
public copyWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget, breakpoint: BreakpointId) {
const widgetItem = this.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget, breakpoint);
this.storeSet(WIDGET_ITEM, widgetItem);
}
public copyWidgetReference(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId,
widget: Widget, breakpoint: string): void {
widget: Widget, breakpoint: BreakpointId): void {
const widgetReference = this.prepareWidgetReference(dashboard, sourceState, sourceLayout, widget, breakpoint);
this.storeSet(WIDGET_REFERENCE, widgetReference);
}
@ -412,7 +412,7 @@ export class ItemBufferService {
}
private prepareWidgetReference(dashboard: Dashboard, sourceState: string,
sourceLayout: DashboardLayoutId, widget: Widget, breakpoint: string): WidgetReference {
sourceLayout: DashboardLayoutId, widget: Widget, breakpoint: BreakpointId): WidgetReference {
const originalColumns = this.dashboardUtils.getOriginalColumns(dashboard, sourceState, sourceLayout, breakpoint);
const originalSize = this.dashboardUtils.getOriginalSize(dashboard, sourceState, sourceLayout, widget, breakpoint);
return {

10
ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts
View File

@ -71,7 +71,7 @@ export interface DashboardLayoutSettings {
name: string;
descriptionSize?: string;
layout: DashboardLayout;
breakpoint: string;
breakpoint: BreakpointId;
}
@Component({
@ -103,8 +103,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
private submitted = false;
allowBreakpointIds = [];
selectedBreakpointIds = ['default'];
allowBreakpointIds: BreakpointId[] = [];
selectedBreakpointIds: BreakpointId[] = ['default'];
constructor(protected store: Store<AppState>,
protected router: Router,
@ -293,9 +293,11 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
this.layouts.main.gridSettings.layoutType = layoutType;
if (!this.isDividerLayout) {
delete this.layouts.right;
if (this.layouts.main.breakpoints) {
for (const breakpoint of Object.values(this.layouts.main.breakpoints)) {
breakpoint.gridSettings.layoutType = layoutType;
}
}
} else {
delete this.layouts.main.breakpoints;
this.layouts.right.gridSettings.layoutType = layoutType;
@ -442,7 +444,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
});
}
deleteBreakpoint($event: Event, breakpointId: string): void {
deleteBreakpoint($event: Event, breakpointId: BreakpointId): void {
if ($event) {
$event.stopPropagation();
}

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

@ -32,7 +32,7 @@ export class SelectDashboardBreakpointComponent implements OnInit, OnDestroy {
selectedBreakpoint: BreakpointId = 'default';
breakpointIds: Array<string> = ['default'];
breakpointIds: Array<BreakpointId> = ['default'];
private layoutDataChanged$: Subscription;
@ -42,7 +42,7 @@ export class SelectDashboardBreakpointComponent implements OnInit, OnDestroy {
ngOnInit() {
this.layoutDataChanged$ = this.dashboardCtrl.layouts.main.layoutCtx.layoutDataChanged.subscribe(() => {
if (this.dashboardCtrl.layouts.main.layoutCtx.layoutData) {
this.breakpointIds = Object.keys(this.dashboardCtrl.layouts.main.layoutCtx?.layoutData);
this.breakpointIds = Object.keys(this.dashboardCtrl.layouts.main.layoutCtx?.layoutData) as BreakpointId[];
this.breakpointIds.sort((a, b) => {
const aMaxWidth = this.dashboardUtils.getBreakpointInfoById(a)?.maxWidth || Infinity;
const bMaxWidth = this.dashboardUtils.getBreakpointInfoById(b)?.maxWidth || Infinity;

4
ui-ngx/src/app/shared/import-export/import-export.service.ts
View File

@ -20,7 +20,7 @@ import { TranslateService } from '@ngx-translate/core';
import { select, Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { ActionNotificationShow } from '@core/notification/notification.actions';
import { Dashboard, DashboardLayoutId } from '@shared/models/dashboard.models';
import { BreakpointId, Dashboard, DashboardLayoutId } from '@shared/models/dashboard.models';
import { deepClone, guid, isDefined, isNotEmptyStr, isObject, isString, isUndefined } from '@core/utils';
import { WINDOW } from '@core/services/window.service';
import { DOCUMENT } from '@angular/common';
@ -199,7 +199,7 @@ export class ImportExportService {
}
public exportWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget,
widgetTitle: string, breakpoint: string) {
widgetTitle: string, breakpoint: BreakpointId) {
const widgetItem = this.itembuffer.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget, breakpoint);
const widgetDefaultName = this.widgetService.getWidgetInfoFromCache(widget.typeFullFqn).widgetName;
let fileName = widgetDefaultName + (isNotEmptyStr(widgetTitle) ? `_${widgetTitle}` : '');

2
ui-ngx/src/app/shared/models/dashboard.models.ts
View File

@ -104,7 +104,7 @@ export interface DashboardLayout {
breakpoints?: {[breakpointId in BreakpointId]?: Omit<DashboardLayout, 'breakpoints'>};
}
export declare type DashboardLayoutInfo = {[breakpointId: string]: BreakpointLayoutInfo};
export declare type DashboardLayoutInfo = {[breakpointId in BreakpointId]?: BreakpointLayoutInfo};
export interface BreakpointLayoutInfo {
widgetIds?: string[];