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

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

@ -15,7 +15,7 @@
/// ///
import { Injectable } from '@angular/core'; 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 { AliasesInfo, EntityAlias, EntityAliases, EntityAliasInfo } from '@shared/models/alias.models';
import { import {
Datasource, Datasource,
@ -87,7 +87,7 @@ export class ItemBufferService {
private utils: UtilsService) {} private utils: UtilsService) {}
public prepareWidgetItem(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, public prepareWidgetItem(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId,
widget: Widget, breakpoint: string): WidgetItem { widget: Widget, breakpoint: BreakpointId): WidgetItem {
const aliasesInfo: AliasesInfo = { const aliasesInfo: AliasesInfo = {
datasourceAliases: {}, datasourceAliases: {},
targetDeviceAlias: null 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); const widgetItem = this.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget, breakpoint);
this.storeSet(WIDGET_ITEM, widgetItem); this.storeSet(WIDGET_ITEM, widgetItem);
} }
public copyWidgetReference(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, 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); const widgetReference = this.prepareWidgetReference(dashboard, sourceState, sourceLayout, widget, breakpoint);
this.storeSet(WIDGET_REFERENCE, widgetReference); this.storeSet(WIDGET_REFERENCE, widgetReference);
} }
@ -412,7 +412,7 @@ export class ItemBufferService {
} }
private prepareWidgetReference(dashboard: Dashboard, sourceState: string, 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 originalColumns = this.dashboardUtils.getOriginalColumns(dashboard, sourceState, sourceLayout, breakpoint);
const originalSize = this.dashboardUtils.getOriginalSize(dashboard, sourceState, sourceLayout, widget, breakpoint); const originalSize = this.dashboardUtils.getOriginalSize(dashboard, sourceState, sourceLayout, widget, breakpoint);
return { 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; name: string;
descriptionSize?: string; descriptionSize?: string;
layout: DashboardLayout; layout: DashboardLayout;
breakpoint: string; breakpoint: BreakpointId;
} }
@Component({ @Component({
@ -103,8 +103,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
private submitted = false; private submitted = false;
allowBreakpointIds = []; allowBreakpointIds: BreakpointId[] = [];
selectedBreakpointIds = ['default']; selectedBreakpointIds: BreakpointId[] = ['default'];
constructor(protected store: Store<AppState>, constructor(protected store: Store<AppState>,
protected router: Router, protected router: Router,
@ -293,9 +293,11 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
this.layouts.main.gridSettings.layoutType = layoutType; this.layouts.main.gridSettings.layoutType = layoutType;
if (!this.isDividerLayout) { if (!this.isDividerLayout) {
delete this.layouts.right; delete this.layouts.right;
if (this.layouts.main.breakpoints) {
for (const breakpoint of Object.values(this.layouts.main.breakpoints)) { for (const breakpoint of Object.values(this.layouts.main.breakpoints)) {
breakpoint.gridSettings.layoutType = layoutType; breakpoint.gridSettings.layoutType = layoutType;
} }
}
} else { } else {
delete this.layouts.main.breakpoints; delete this.layouts.main.breakpoints;
this.layouts.right.gridSettings.layoutType = layoutType; 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) { if ($event) {
$event.stopPropagation(); $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'; selectedBreakpoint: BreakpointId = 'default';
breakpointIds: Array<string> = ['default']; breakpointIds: Array<BreakpointId> = ['default'];
private layoutDataChanged$: Subscription; private layoutDataChanged$: Subscription;
@ -42,7 +42,7 @@ export class SelectDashboardBreakpointComponent implements OnInit, OnDestroy {
ngOnInit() { ngOnInit() {
this.layoutDataChanged$ = this.dashboardCtrl.layouts.main.layoutCtx.layoutDataChanged.subscribe(() => { this.layoutDataChanged$ = this.dashboardCtrl.layouts.main.layoutCtx.layoutDataChanged.subscribe(() => {
if (this.dashboardCtrl.layouts.main.layoutCtx.layoutData) { 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) => { this.breakpointIds.sort((a, b) => {
const aMaxWidth = this.dashboardUtils.getBreakpointInfoById(a)?.maxWidth || Infinity; const aMaxWidth = this.dashboardUtils.getBreakpointInfoById(a)?.maxWidth || Infinity;
const bMaxWidth = this.dashboardUtils.getBreakpointInfoById(b)?.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 { select, Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
import { ActionNotificationShow } from '@core/notification/notification.actions'; 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 { deepClone, guid, isDefined, isNotEmptyStr, isObject, isString, isUndefined } from '@core/utils';
import { WINDOW } from '@core/services/window.service'; import { WINDOW } from '@core/services/window.service';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
@ -199,7 +199,7 @@ export class ImportExportService {
} }
public exportWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget, 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 widgetItem = this.itembuffer.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget, breakpoint);
const widgetDefaultName = this.widgetService.getWidgetInfoFromCache(widget.typeFullFqn).widgetName; const widgetDefaultName = this.widgetService.getWidgetInfoFromCache(widget.typeFullFqn).widgetName;
let fileName = widgetDefaultName + (isNotEmptyStr(widgetTitle) ? `_${widgetTitle}` : ''); 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'>}; 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 { export interface BreakpointLayoutInfo {
widgetIds?: string[]; widgetIds?: string[];