UI: Improvement manage layout dialog style

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html

@@ -76,7 +76,7 @@
 <!--          </div>-->
 <!--        </div>-->
 <!--      </div>-->
-      <div class="table-container" style="width: 700px">
+      <div class="table-container" style="width: 600px">
         <table mat-table [dataSource]="dataSource">
           <ng-container [matColumnDef]="'icon'">
             <mat-header-cell *matHeaderCellDef [style]="{ minWidth: '48px', maxWidth: '48px', width: '48px', textAlign: 'center'}">
@@ -158,7 +158,7 @@
           <div>Add breakpoint</div>
           <mat-form-field fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="new">
-              <mat-option *ngFor="let breakpoint of allowLayoutBreakpoints" [value]="breakpoint">
+              <mat-option *ngFor="let breakpoint of allowBreakpointIds" [value]="breakpoint">
                 {{ breakpoint }}
               </mat-option>
             </mat-select>
@@ -168,7 +168,7 @@
           <div>Copy from</div>
           <mat-form-field fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="copyFrom">
-              <mat-option *ngFor="let breakpoint of selectedLayoutBreakpoints" [value]="breakpoint">
+              <mat-option *ngFor="let breakpoint of selectedBreakpointIds" [value]="breakpoint">
                 {{ breakpoint }}
               </mat-option>
             </mat-select>

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss

@@ -154,6 +154,7 @@ $tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
     padding: 8px;
     border: 2px dashed rgba(0, 0, 0, 0.08);
     border-radius: 10px;
+    min-height: 56px;
   }
 }
 

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts

@@ -76,7 +76,7 @@ export interface DashboardLayoutSettings {
 export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>
   implements ErrorStateMatcher, OnDestroy {
 
-  @ViewChild('tooltip', {static: true}) tooltip: MatTooltip;
+  @ViewChild('tooltip') tooltip: MatTooltip;
 
   layoutsFormGroup: UntypedFormGroup;
   addBreakpointFormGroup: UntypedFormGroup;
@@ -110,8 +110,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     xl: 'xl'
   };
 
-  allowLayoutBreakpoints = Object.keys(this.layoutBreakpoint);
+  allowBreakpointIds = Object.keys(this.layoutBreakpoint);
-  selectedLayoutBreakpoints = ['default'];
+  selectedBreakpointIds = ['default'];
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -122,7 +122,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
               private utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
               private translate: TranslateService,
-              private dialog: MatDialog) {
+              private dialog: MatDialog,) {
     super(store, router, dialogRef);
 
     this.layouts = this.data.layouts;
@@ -208,28 +208,17 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
       this.layouts.right = this.dashboardUtils.createDefaultLayoutData();
     }
 
-    this.layoutBreakpoints.push({
+    this.addLayoutConfiguration('default');
-      icon: 'mdi:monitor',
-      name: 'Default',
-      layout: this.layouts.main,
-      breakpoint: 'default'
-    });
 
     if (!this.isDividerLayout && this.layouts.main.breakpoints) {
       for (const breakpoint of Object.keys(this.layouts.main.breakpoints)) {
-        this.layoutBreakpoints.push({
+        this.addLayoutConfiguration(breakpoint);
-          icon: 'mdi:monitor',
+        this.selectedBreakpointIds.push(breakpoint);
-          name: breakpoint,
-          layout: this.layouts.main.breakpoints[breakpoint],
-          descriptionSize: MediaBreakpoints[breakpoint],
-          breakpoint
-        });
-        this.selectedLayoutBreakpoints.push(breakpoint);
       }
     }
 
-    this.allowLayoutBreakpoints = Object.keys(this.layoutBreakpoint)
+    this.allowBreakpointIds = Object.keys(this.layoutBreakpoint)
-      .filter((item) => !this.selectedLayoutBreakpoints.includes(item));
+      .filter((item) => !this.selectedBreakpointIds.includes(item));
 
     this.dataSource.loadData(this.layoutBreakpoints);
 
@@ -270,6 +259,15 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
             this.layoutsFormGroup.get('sliderFixed').setValue(value, {emitEvent: false});
           }
         ));
+
+    this.subscriptions.push(
+      this.layoutsFormGroup.get('layoutType').valueChanges
+        .subscribe(
+          () => {
+            this.dataSource = new DashboardLayoutDatasource();
+            this.dataSource.loadData(this.layoutBreakpoints);
+          }
+        ));
   }
 
   ngOnDestroy(): void {
@@ -450,12 +448,14 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     return this.layoutsFormGroup.get('layoutType').value === LayoutType.divider;
   }
 
-  deleteBreakpoint(breakpoint: string): void {
+  deleteBreakpoint(breakpointId: string): void {
-    delete this.layouts.main.breakpoints[breakpoint];
+    delete this.layouts.main.breakpoints[breakpointId];
     if (isEqual(this.layouts.main.breakpoints, {})) {
       delete this.layouts.main.breakpoints;
     }
-    this.layoutBreakpoints = this.layoutBreakpoints.filter((item) => item.breakpoint !== breakpoint);
+    this.layoutBreakpoints = this.layoutBreakpoints.filter((item) => item.breakpoint !== breakpointId);
+    this.allowBreakpointIds.push(breakpointId);
+    this.selectedBreakpointIds = this.selectedBreakpointIds.filter((item) => item !== breakpointId);
     this.dataSource.loadData(this.layoutBreakpoints);
     this.layoutsFormGroup.markAsDirty();
   }
@@ -464,7 +464,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     this.addBreakpointMode = !this.addBreakpointMode;
     if (this.addBreakpointMode) {
       this.addBreakpointFormGroup.reset({
-        new: this.allowLayoutBreakpoints[0],
+        new: this.allowBreakpointIds[0],
         copyFrom: 'default'
       });
     }
@@ -484,20 +484,30 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
       gridSettings: deepClone(sourceLayout.gridSettings),
       widgets: deepClone(sourceLayout.widgets),
     };
-    this.selectedLayoutBreakpoints.push(newBreakpoint);
+    this.selectedBreakpointIds.push(newBreakpoint);
-    this.allowLayoutBreakpoints = this.allowLayoutBreakpoints.filter((item) => item !== newBreakpoint);
+    this.allowBreakpointIds = this.allowBreakpointIds.filter((item) => item !== newBreakpoint);
+    this.addLayoutConfiguration(newBreakpoint);
 
+    this.dataSource.loadData(this.layoutBreakpoints);
+
+    this.addBreakpointMode = false;
+  }
+
+  private addLayoutConfiguration(breakpointId: string) {
+    const layout = breakpointId === 'default' ? this.layouts.main : this.layouts.main.breakpoints[breakpointId];
+    const size = breakpointId === 'default' ? '' : this.parseCssQuery(MediaBreakpoints[breakpointId]);
     this.layoutBreakpoints.push({
       icon: 'mdi:monitor',
-      name: newBreakpoint,
+      name: breakpointId,
-      layout: this.layouts.main.breakpoints[newBreakpoint],
+      layout,
-      descriptionSize: MediaBreakpoints[newBreakpoint],
+      descriptionSize: size,
-      breakpoint: newBreakpoint
+      breakpoint: breakpointId
     });
+  }
 
-    this.dataSource.loadData(this.layoutBreakpoints);
+  private parseCssQuery(query: string): string {
-
+    const value = Array.from(query.matchAll(/\([^:]+:\s+([^()]+)\)/g));
-    this.addBreakpointMode = false;
+    return `min-width: ${value[0][1]} and max-width: ${value[1][1]}`;
   }
 }