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

UI: Added new widget action copy and edit widget

Browse Source
This commit is contained in:
Vladyslav Prykhodko 2024-08-05 23:24:09 +03:00
parent 4c353534cc
commit 3ea10fe733
9 changed files with 111 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -501,6 +501,28 @@ export class DashboardUtilsService {
this.removeUnusedWidgets(dashboard);
}
public isReferenceWidget(dashboard: Dashboard, widgetId: string): boolean {
const states = dashboard.configuration.states;
let foundWidgetRefs = 0;
for (const state of Object.values(states)) {
for (const layout of Object.values(state.layouts)) {
if (layout.widgets[widgetId]) {
foundWidgetRefs++;
}
if (layout.breakpoints) {
for (const breakpoint of Object.values(layout.breakpoints)) {
if (breakpoint.widgets[widgetId]) {
foundWidgetRefs++;
}
}
}
}
}
return foundWidgetRefs > 1;
}
public getRootStateId(states: {[id: string]: DashboardState }): string {
for (const stateId of Object.keys(states)) {
const state = states[stateId];

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

@ -177,7 +177,9 @@ export class ItemBufferService {
}
public pasteWidget(targetDashboard: Dashboard, targetState: string,
targetLayout: DashboardLayoutId, position: WidgetPosition,
targetLayout: DashboardLayoutId,
breakpoint: string,
position: WidgetPosition,
onAliasesUpdateFunction: () => void,
onFiltersUpdateFunction: () => void): Observable<Widget> {
const widgetItem: WidgetItem = this.storeGet(WIDGET_ITEM);
@ -197,7 +199,7 @@ export class ItemBufferService {
return this.addWidgetToDashboard(targetDashboard, targetState,
targetLayout, widget, aliasesInfo, filtersInfo,
onAliasesUpdateFunction, onFiltersUpdateFunction,
originalColumns, originalSize, targetRow, targetColumn).pipe(
originalColumns, originalSize, targetRow, targetColumn, breakpoint).pipe(
map(() => widget)
);
} else {
@ -205,8 +207,11 @@ export class ItemBufferService {
}
}
public pasteWidgetReference(targetDashboard: Dashboard, targetState: string,
targetLayout: DashboardLayoutId, position: WidgetPosition): Observable<Widget> {
public pasteWidgetReference(targetDashboard: Dashboard,
targetState: string,
targetLayout: DashboardLayoutId,
breakpoint: string,
position: WidgetPosition): Observable<Widget> {
const widgetReference: WidgetReference = this.storeGet(WIDGET_REFERENCE);
if (widgetReference) {
const widget = targetDashboard.configuration.widgets[widgetReference.widgetId];
@ -222,7 +227,7 @@ export class ItemBufferService {
return this.addWidgetToDashboard(targetDashboard, targetState,
targetLayout, widget, null,
null, null, null, originalColumns,
originalSize, targetRow, targetColumn).pipe(
originalSize, targetRow, targetColumn, breakpoint).pipe(
map(() => widget)
);
} else {
@ -242,7 +247,8 @@ export class ItemBufferService {
originalColumns: number,
originalSize: WidgetSize,
row: number,
column: number): Observable<Dashboard> {
column: number,
breakpoint = 'default'): Observable<Dashboard> {
let theDashboard: Dashboard;
if (dashboard) {
theDashboard = dashboard;
@ -273,7 +279,7 @@ export class ItemBufferService {
}
}
this.dashboardUtils.addWidgetToLayout(theDashboard, targetState, targetLayout, widget,
originalColumns, originalSize, row, column);
originalColumns, originalSize, row, column, breakpoint);
if (callAliasUpdateFunction) {
onAliasesUpdateFunction();
}
@ -406,8 +412,7 @@ export class ItemBufferService {
}
}
if (gridSettings &&
gridSettings.columns) {
if (gridSettings && gridSettings.columns) {
originalColumns = gridSettings.columns;
}
originalColumns = originalColumns * layoutCount;

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

@ -1374,6 +1374,33 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
}
copyEditWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) {
$event.stopPropagation();
const widgetItem = deepClone(this.itembuffer.prepareWidgetItem(this.dashboard, this.dashboardCtx.state,
layoutCtx.id, widget, layoutCtx.breakpoint));
const targetRow = layoutCtx.widgetLayouts[widget.id].row;
const targetColumn = layoutCtx.widgetLayouts[widget.id].col;
if (layoutCtx.widgets.removeWidgetId(widget.id)) {
this.dashboardUtils.removeWidgetFromLayout(this.dashboard, this.dashboardCtx.state, layoutCtx.id,
widget.id, layoutCtx.breakpoint);
}
widgetItem.widget.id = this.utils.guid();
this.itembuffer.addWidgetToDashboard(this.dashboard, this.dashboardCtx.state, layoutCtx.id, widgetItem.widget,
widgetItem.aliasesInfo, widgetItem.filtersInfo,
this.entityAliasesUpdated.bind(this), this.filtersUpdated.bind(this),
widgetItem.originalColumns, widgetItem.originalSize, targetRow, targetColumn, layoutCtx.breakpoint
).subscribe(() => {
layoutCtx.widgets.addWidgetId(widgetItem.widget.id);
this.runChangeDetection();
this.editWidget($event,layoutCtx, widgetItem.widget);
});
}
copyWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) {
this.itembuffer.copyWidget(this.dashboard,
this.dashboardCtx.state, layoutCtx.id, widget, layoutCtx.breakpoint);
@ -1385,7 +1412,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
pasteWidget($event: Event, layoutCtx: DashboardPageLayoutContext, pos: WidgetPosition) {
this.itembuffer.pasteWidget(this.dashboard, this.dashboardCtx.state, layoutCtx.id,
this.itembuffer.pasteWidget(this.dashboard, this.dashboardCtx.state, layoutCtx.id, layoutCtx.breakpoint,
pos, this.entityAliasesUpdated.bind(this), this.filtersUpdated.bind(this)).subscribe(
(widget) => {
layoutCtx.widgets.addWidgetId(widget.id);
@ -1394,7 +1421,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
pasteWidgetReference($event: Event, layoutCtx: DashboardPageLayoutContext, pos: WidgetPosition) {
this.itembuffer.pasteWidgetReference(this.dashboard, this.dashboardCtx.state, layoutCtx.id,
this.itembuffer.pasteWidgetReference(this.dashboard, this.dashboardCtx.state, layoutCtx.id, layoutCtx.breakpoint,
pos).subscribe(
(widget) => {
layoutCtx.widgets.addWidgetId(widget.id);

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

@ -56,6 +56,7 @@ export interface IDashboardController {
openDashboardState(stateId: string, openRightLayout: boolean);
addWidget($event: Event, layoutCtx: DashboardPageLayoutContext);
editWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget);
copyEditWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget);
exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, widgetTitle: string);
removeWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget);
widgetMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget);

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

@ -231,6 +231,10 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo
this.layoutCtx.dashboardCtrl.editWidget($event, this.layoutCtx, widget);
}
onCopyEditWidget($event: Event, widget: Widget): void {
this.layoutCtx.dashboardCtrl.copyEditWidget($event, this.layoutCtx, widget);
}
onExportWidget($event: Event, widget: Widget, widgetTitle: string): void {
this.layoutCtx.dashboardCtrl.exportWidget($event, this.layoutCtx, widget, widgetTitle);
}

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

@ -401,6 +401,9 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
case WidgetComponentActionType.EDIT:
this.editWidget($event, widget);
break;
case WidgetComponentActionType.COPY_EDIT:
this.editCopyWidget($event, widget);
break;
case WidgetComponentActionType.EXPORT:
this.exportWidget($event, widget);
break;
@ -431,6 +434,15 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
}
}
private editCopyWidget($event: Event, widget: DashboardWidget) {
if ($event) {
$event.stopPropagation();
}
if (this.isEditActionEnabled && this.callbacks && this.callbacks.onCopyEditWidget) {
this.callbacks.onCopyEditWidget($event, widget.widget);
}
}
private exportWidget($event: Event, widget: DashboardWidget) {
if ($event) {
$event.stopPropagation();

8
ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
View File

@ -62,6 +62,14 @@
matTooltipPosition="above">
<tb-icon>{{ widget.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</tb-icon>
</button>
<button mat-icon-button
[fxShow]="isEditActionEnabled && !widget.isFullscreen"
*ngIf="isReferenceWidget"
(click)="onCopyEdit($event)"
matTooltip="Edit copy widget"
matTooltipPosition="above">
<tb-icon>mdi:circle-edit-outline</tb-icon>
</button>
<button mat-icon-button
[fxShow]="isEditActionEnabled && !widget.isFullscreen"
(click)="onEdit($event)"

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

@ -45,7 +45,8 @@ export enum WidgetComponentActionType {
CONTEXT_MENU,
EDIT,
EXPORT,
REMOVE
REMOVE,
COPY_EDIT,
}
export class WidgetComponentAction {
@ -113,6 +114,8 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, A
private cssClass: string;
isReferenceWidget = false;
constructor(protected store: Store<AppState>,
private cd: ChangeDetectorRef,
private renderer: Renderer2,
@ -122,6 +125,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, A
ngOnInit(): void {
this.widget.widgetContext.containerChangeDetector = this.cd;
this.isReferenceWidget = this.dashboardWidgets.isReferenceWidget(this.widget);
const cssString = this.widget.widget.config.widgetCss;
if (isNotEmptyStr(cssString)) {
this.cssClass =
@ -184,6 +188,13 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, A
});
}
onCopyEdit(event: MouseEvent) {
this.widgetComponentAction.emit({
event,
actionType: WidgetComponentActionType.COPY_EDIT
});
}
onExport(event: MouseEvent) {
this.widgetComponentAction.emit({
event,

10
ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
View File

@ -42,6 +42,7 @@ import { enumerable } from '@shared/decorators/enumerable';
import { UtilsService } from '@core/services/utils.service';
import { TbPopoverComponent } from '@shared/components/popover.component';
import { ComponentStyle, iconStyle, textStyle } from '@shared/models/widget-settings.models';
import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
export interface WidgetsData {
widgets: Array<Widget>;
@ -65,6 +66,7 @@ export interface WidgetContextMenuItem extends ContextMenuItem {
export interface DashboardCallbacks {
onEditWidget?: ($event: Event, widget: Widget) => void;
onCopyEditWidget?: ($event: Event, widget: Widget) => void;
onExportWidget?: ($event: Event, widget: Widget, widgeTitle: string) => void;
onRemoveWidget?: ($event: Event, widget: Widget) => void;
onWidgetMouseDown?: ($event: Event, widget: Widget) => void;
@ -137,7 +139,8 @@ export class DashboardWidgets implements Iterable<DashboardWidget> {
constructor(private dashboard: IDashboardComponent,
private widgetsDiffer: IterableDiffer<Widget>,
private widgetLayoutsDiffer: KeyValueDiffer<string, WidgetLayout>) {
private widgetLayoutsDiffer: KeyValueDiffer<string, WidgetLayout>,
private dashboardUtils: DashboardUtilsService) {
}
doCheck() {
@ -290,6 +293,11 @@ export class DashboardWidgets implements Iterable<DashboardWidget> {
return this.dashboardWidgets.find((dashboardWidget) => dashboardWidget.selected);
}
isReferenceWidget(widget: DashboardWidget): boolean {
return this.dashboardUtils.isReferenceWidget(this.dashboard.stateController.dashboardCtrl.dashboardCtx.getDashboard(),
widget.widgetId);
}
private findWidgetById(widgetId: string): DashboardWidget {
return this.dashboardWidgets.find((dashboardWidget) => dashboardWidget.widgetId === widgetId);
}