UI: Add new widget action copy and edit

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

@@ -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 {

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

@@ -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();
     }
   }

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

@@ -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() {

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

@@ -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 widgetLayoutsDiffer: KeyValueDiffer<string, WidgetLayout>) {
-              private dashboardUtils: DashboardUtilsService) {
   }
 
   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);
   }