UI: Added select layout and clear dashboard json

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

@@ -29,7 +29,7 @@ import {
   GridSettings,
   WidgetLayout
 } from '@shared/models/dashboard.models';
-import { deepClone, isDefined, isDefinedAndNotNull, isNotEmptyStr, isString, isUndefined } from '@core/utils';
+import { deepClone, isDefined, isDefinedAndNotNull, isNotEmptyStr, isString, isUndefined, isEqual } from '@core/utils';
 import {
   Datasource,
   datasourcesHasOnlyComparisonAggregation,
@@ -742,6 +742,28 @@ 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.html

@@ -285,7 +285,8 @@
           </mat-form-field>
         </section>
         <mat-drawer-container class="tb-dashboard-layouts" fxFlex
-                              [ngClass]="{ 'tb-shrinked' : isEditingWidget }">
+                              [class]="{'tb-shrinked' : isEditingWidget,
+                                        'diagonal-stripes': !layouts.right.show && layouts.main.layoutCtx.breakpoint !== 'default'}">
           <mat-drawer *ngIf="layouts.right.show"
                       id="tb-right-layout"
                       [ngStyle]="{minWidth: rightLayoutSize.width,
@@ -311,8 +312,9 @@
           </mat-drawer>
           <mat-drawer-content [fxShow]="layouts.main.show"
                               id="tb-main-layout"
-                              [ngStyle]="{width: mainLayoutSize.width,
-                                          height: mainLayoutSize.height}">
+                              [style]="{width: mainLayoutSize.width,
+                                        height: mainLayoutSize.height,
+                                        maxWidth: mainLayoutSize.maxWidth}">
             <tb-dashboard-layout
               [dashboardCheatSheet]="cheatSheetComponent"
               [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.right.layoutCtx : layouts.main.layoutCtx"

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

@@ -131,6 +131,9 @@ div.tb-dashboard-page {
           width: max(40%, calc(100% - 1192px));
         }
       }
+      &.diagonal-stripes {
+        background: repeating-linear-gradient(45deg, #ccc, #ccc 10px, #fff0 10px, #fff0 20px);
+      }
     }
 
     mat-drawer.tb-details-drawer {

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

@@ -254,7 +254,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   addingLayoutCtx: DashboardPageLayoutContext;
 
-  mainLayoutSize: {width: string; height: string} = {width: '100%', height: '100%'};
+  mainLayoutSize: {width: string; height: string; maxWidth: string} = {width: '100%', height: '100%', maxWidth: '100%'};
   rightLayoutSize: {width: string; height: string} = {width: '100%', height: '100%'};
 
   private dashboardLogoCache: SafeUrl;
@@ -756,6 +756,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   private updateMainLayoutSize(): boolean {
     const prevMainLayoutWidth = this.mainLayoutSize.width;
     const prevMainLayoutHeight = this.mainLayoutSize.height;
+    const prevMainLayoutMaxWidth = this.mainLayoutSize.maxWidth;
     if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') {
       this.mainLayoutSize.width = '100%';
     } else {
@@ -766,7 +767,36 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     } else {
       this.mainLayoutSize.height = '0px';
     }
-    return prevMainLayoutWidth !== this.mainLayoutSize.width || prevMainLayoutHeight !== this.mainLayoutSize.height;
+    if (this.isEdit) {
+      const xOffset = this.dashboardContainer.nativeElement.getBoundingClientRect().x;
+      let width;
+
+      switch (this.layouts.main.layoutCtx.breakpoint) {
+        case 'xl':
+          width = `${5000 - xOffset}px`;
+          break;
+        case 'lg':
+          width = `${1919 - xOffset}px`;
+          break;
+        case 'md':
+          width = `${1279 - xOffset}px`;
+          break;
+        case 'sm':
+          width = '959px';
+          break;
+        case 'xs':
+          width = '599px';
+          break;
+        default:
+          width = '100%';
+      }
+
+      this.mainLayoutSize.maxWidth = width;
+    } else {
+      this.mainLayoutSize.maxWidth = '100%';
+    }
+    return prevMainLayoutWidth !== this.mainLayoutSize.width || prevMainLayoutHeight !== this.mainLayoutSize.height ||
+      prevMainLayoutMaxWidth !== this.mainLayoutSize.maxWidth;
   }
 
   private updateRightLayoutSize(): boolean {
@@ -1155,6 +1185,7 @@ 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/dashboard-page/layout/dashboard-layout.component.ts

@@ -93,12 +93,14 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo
 
   private rxSubscriptions = new Array<Subscription>();
 
-  constructor(protected store: Store<AppState>,
-              private translate: TranslateService,
-              private itembuffer: ItemBufferService,
-              private imagePipe: ImagePipe,
-              private sanitizer: DomSanitizer,
-              private dashboardUtils: DashboardUtilsService,) {
+  constructor(
+    protected store: Store<AppState>,
+    private translate: TranslateService,
+    private itembuffer: ItemBufferService,
+    private imagePipe: ImagePipe,
+    private sanitizer: DomSanitizer,
+    private dashboardUtils: DashboardUtilsService,
+  ) {
     super(store);
     this.initHotKeys();
   }