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

UI: Add new widget action copy and edit in contect menu

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-08-06 11:26:00 +03:00
parent 5bef47253e
commit 675b4755ed
7 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1573,7 +1573,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
return dashboardContextActions; return dashboardContextActions;
} }
prepareWidgetContextMenu(layoutCtx: DashboardPageLayoutContext, widget: Widget): Array<WidgetContextMenuItem> { prepareWidgetContextMenu(layoutCtx: DashboardPageLayoutContext, widget: Widget, isReference: boolean): Array<WidgetContextMenuItem> {
const widgetContextActions: Array<WidgetContextMenuItem> = []; const widgetContextActions: Array<WidgetContextMenuItem> = [];
if (this.isEdit && !this.isEditingWidget) { if (this.isEdit && !this.isEditingWidget) {
widgetContextActions.push( widgetContextActions.push(
@ -1586,6 +1586,18 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
icon: 'edit' icon: 'edit'
} }
); );
if (isReference) {
widgetContextActions.push(
{
action: (event, currentWidget) => {
this.copyEditWidget(event, layoutCtx, currentWidget);
},
enabled: true,
value: 'widget.copy-edit',
icon: 'edit'
}
);
}
if (!this.widgetEditMode) { if (!this.widgetEditMode) {
widgetContextActions.push( widgetContextActions.push(
{ {

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

@ -64,7 +64,7 @@ export interface IDashboardController {
dashboardMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext); dashboardMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext);
widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget);
prepareDashboardContextMenu(layoutCtx: DashboardPageLayoutContext): Array<DashboardContextMenuItem>; prepareDashboardContextMenu(layoutCtx: DashboardPageLayoutContext): Array<DashboardContextMenuItem>;
prepareWidgetContextMenu(layoutCtx: DashboardPageLayoutContext, widget: Widget): Array<WidgetContextMenuItem>; prepareWidgetContextMenu(layoutCtx: DashboardPageLayoutContext, widget: Widget, isReference: boolean): Array<WidgetContextMenuItem>;
copyWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); copyWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget);
copyWidgetReference($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); copyWidgetReference($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget);
pasteWidget($event: Event, layoutCtx: DashboardPageLayoutContext, pos: WidgetPosition); pasteWidget($event: Event, layoutCtx: DashboardPageLayoutContext, pos: WidgetPosition);

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

@ -297,8 +297,8 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo
return this.layoutCtx.dashboardCtrl.prepareDashboardContextMenu(this.layoutCtx); return this.layoutCtx.dashboardCtrl.prepareDashboardContextMenu(this.layoutCtx);
} }
prepareWidgetContextMenu($event: Event, widget: Widget): Array<WidgetContextMenuItem> { prepareWidgetContextMenu($event: Event, widget: Widget, isReference: boolean): Array<WidgetContextMenuItem> {
return this.layoutCtx.dashboardCtrl.prepareWidgetContextMenu(this.layoutCtx, widget); return this.layoutCtx.dashboardCtrl.prepareWidgetContextMenu(this.layoutCtx, widget, isReference);
} }
copyWidget($event: Event, widget: Widget) { copyWidget($event: Event, widget: Widget) {

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

@ -421,7 +421,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
private openWidgetContextMenu($event: MouseEvent, widget: DashboardWidget) { private openWidgetContextMenu($event: MouseEvent, widget: DashboardWidget) {
if (this.callbacks && this.callbacks.prepareWidgetContextMenu) { if (this.callbacks && this.callbacks.prepareWidgetContextMenu) {
const items = this.callbacks.prepareWidgetContextMenu($event, widget.widget); const items = this.callbacks.prepareWidgetContextMenu($event, widget.widget, widget.isReference);
if (items && items.length) { if (items && items.length) {
$event.preventDefault(); $event.preventDefault();
$event.stopPropagation(); $event.stopPropagation();

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

@ -293,7 +293,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
this.cd.markForCheck(); this.cd.markForCheck();
}, },
functionBefore: () => { functionBefore: () => {
this.isReferenceWidget = this.dashboardUtils.isReferenceWidget( this.widget.isReference = this.dashboardUtils.isReferenceWidget(
this.widget.widgetContext.dashboard.stateController.dashboardCtrl.dashboardCtx.getDashboard(), this.widget.widgetId); this.widget.widgetContext.dashboard.stateController.dashboardCtrl.dashboardCtx.getDashboard(), this.widget.widgetId);
componentRef.instance.cd.detectChanges(); componentRef.instance.cd.detectChanges();
} }
@ -345,10 +345,10 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
@Component({ @Component({
template: `<div class="tb-widget-actions-panel"> template: `<div class="tb-widget-actions-panel">
<button mat-icon-button class="tb-mat-20" <button mat-icon-button class="tb-mat-20"
*ngIf="container.isReferenceWidget" *ngIf="container.widget.isReference"
[fxShow]="container.isEditActionEnabled" [fxShow]="container.isEditActionEnabled"
(click)="container.onCopyEdit($event)" (click)="container.onCopyEdit($event)"
matTooltip="Edit copy widget" matTooltip="{{ 'widget.edit-copy' | translate }}"
matTooltipPosition="above"> matTooltipPosition="above">
<tb-icon>mdi:circle-edit-outline</tb-icon> <tb-icon>mdi:circle-edit-outline</tb-icon>
</button> </button>

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

@ -72,7 +72,7 @@ export interface DashboardCallbacks {
onDashboardMouseDown?: ($event: Event) => void; onDashboardMouseDown?: ($event: Event) => void;
onWidgetClicked?: ($event: Event, widget: Widget) => void; onWidgetClicked?: ($event: Event, widget: Widget) => void;
prepareDashboardContextMenu?: ($event: Event) => Array<DashboardContextMenuItem>; prepareDashboardContextMenu?: ($event: Event) => Array<DashboardContextMenuItem>;
prepareWidgetContextMenu?: ($event: Event, widget: Widget) => Array<WidgetContextMenuItem>; prepareWidgetContextMenu?: ($event: Event, widget: Widget, isReference: boolean) => Array<WidgetContextMenuItem>;
} }
export interface IDashboardComponent { export interface IDashboardComponent {
@ -344,6 +344,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
private selectedCallback: (selected: boolean) => void = () => {}; private selectedCallback: (selected: boolean) => void = () => {};
isFullscreen = false; isFullscreen = false;
isReference = false;
color: string; color: string;
backgroundColor: string; backgroundColor: string;

2
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -5600,6 +5600,8 @@
"remove": "Remove widget", "remove": "Remove widget",
"delete": "Delete widget", "delete": "Delete widget",
"edit": "Edit widget", "edit": "Edit widget",
"edit-copy": "Edit copy widget",
"copy-edit": "Copy and edit",
"remove-widget-title": "Are you sure you want to remove the widget '{{widgetTitle}}'?", "remove-widget-title": "Are you sure you want to remove the widget '{{widgetTitle}}'?",
"remove-widget-text": "After the confirmation the widget and all related data will become unrecoverable.", "remove-widget-text": "After the confirmation the widget and all related data will become unrecoverable.",
"timeseries": "Time series", "timeseries": "Time series",