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

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-08-06 10:07:55 +03:00
parent d9ad4bd0a0
commit 5bef47253e
4 changed files with 12 additions and 36 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

@ -785,28 +785,6 @@ export class DashboardUtilsService {
}
}
public removeBreakpointsDuplicateInLayouts(dashboard: Dashboard) {
const dashboardConfiguration = dashboard.configuration;
const states = dashboardConfiguration.states;
for (const s of Object.keys(states)) {
const state = states[s];
for (const l of Object.keys(state.layouts)) {
const layout: DashboardLayout = state.layouts[l];
if (layout.breakpoints) {
for (const breakpoint of Object.keys(layout.breakpoints)) {
const breakpointLayout = layout.breakpoints[breakpoint];
if (isEqual(breakpointLayout.widgets, layout.widgets) && isEqual(breakpointLayout.gridSettings, layout.gridSettings)) {
delete layout.breakpoints[breakpoint];
if (isEqual(layout.breakpoints, {})) {
delete layout.breakpoints;
}
}
}
}
}
}
}
private validateAndUpdateEntityAliases(configuration: DashboardConfiguration,
datasourcesByAliasId: {[aliasId: string]: Array<Datasource>},
targetDevicesByAliasId: {[aliasId: string]: Array<TargetDevice>}): DashboardConfiguration {

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

@ -1216,7 +1216,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
};
this.window.parent.postMessage(JSON.stringify(message), '*');
} else {
this.dashboardUtils.removeBreakpointsDuplicateInLayouts(this.dashboard);
this.dashboardService.saveDashboard(this.dashboard).subscribe();
}
}

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

@ -40,6 +40,7 @@ import { GridsterItemComponent } from 'angular-gridster2';
import { UtilsService } from '@core/services/utils.service';
import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
import { from } from 'rxjs';
import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
export enum WidgetComponentActionType {
MOUSE_DOWN,
@ -118,6 +119,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
widgetComponentAction: EventEmitter<WidgetComponentAction> = new EventEmitter<WidgetComponentAction>();
hovered = false;
isReferenceWidget = false;
get widgetEditActionsEnabled(): boolean {
return (this.isEditActionEnabled || this.isRemoveActionEnabled || this.isExportActionEnabled) && !this.widget?.isFullscreen;
@ -127,19 +129,17 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
private editWidgetActionsTooltip: ITooltipsterInstance;
isReferenceWidget = false;
constructor(protected store: Store<AppState>,
private cd: ChangeDetectorRef,
private renderer: Renderer2,
private container: ViewContainerRef,
private dashboardUtils: DashboardUtilsService,
private utils: UtilsService) {
super(store);
}
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 =
@ -291,6 +291,11 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
functionAfter: () => {
this.hovered = false;
this.cd.markForCheck();
},
functionBefore: () => {
this.isReferenceWidget = this.dashboardUtils.isReferenceWidget(
this.widget.widgetContext.dashboard.stateController.dashboardCtrl.dashboardCtx.getDashboard(), this.widget.widgetId);
componentRef.instance.cd.detectChanges();
}
});
this.editWidgetActionsTooltip = $(this.gridsterItem.el).tooltipster('instance');
@ -339,7 +344,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
@Component({
template: `<div class="tb-widget-actions-panel">
<button mat-icon-button
<button mat-icon-button class="tb-mat-20"
*ngIf="container.isReferenceWidget"
[fxShow]="container.isEditActionEnabled"
(click)="container.onCopyEdit($event)"
@ -380,7 +385,8 @@ export class EditWidgetActionsTooltipComponent implements AfterViewInit {
@Output()
viewInited = new EventEmitter();
constructor(public element: ElementRef<HTMLElement>) {
constructor(public element: ElementRef<HTMLElement>,
public cd: ChangeDetectorRef) {
}
ngAfterViewInit() {

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

@ -42,7 +42,6 @@ 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>;
@ -140,8 +139,7 @@ export class DashboardWidgets implements Iterable<DashboardWidget> {
constructor(private dashboard: IDashboardComponent,
private widgetsDiffer: IterableDiffer<Widget>,
private widgetLayoutsDiffer: KeyValueDiffer<string, WidgetLayout>,
private dashboardUtils: DashboardUtilsService) {
private widgetLayoutsDiffer: KeyValueDiffer<string, WidgetLayout>) {
}
doCheck() {
@ -303,11 +301,6 @@ 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);
}