UI: Change selector dashboard breakpoint and improved detect changes updated layout data

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

@@ -18,6 +18,7 @@ import { Injectable } from '@angular/core';
 import { UtilsService } from '@core/services/utils.service';
 import { TimeService } from '@core/services/time.service';
 import {
+  BreakpointInfo,
   BreakpointLayoutInfo,
   Dashboard,
   DashboardConfiguration,
@@ -51,12 +52,15 @@ import { initModelFromDefaultTimewindow } from '@shared/models/time/time.models'
 import { AlarmSearchStatus } from '@shared/models/alarm.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { BackgroundType, colorBackground, isBackgroundSettings } from '@shared/models/widget-settings.models';
+import { MediaBreakpoints } from '@shared/models/constants';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DashboardUtilsService {
 
+  private systemBreakpoints: BreakpointInfo[];
+
   constructor(private utils: UtilsService,
               private timeService: TimeService) {
   }
@@ -996,4 +1000,21 @@ export class DashboardUtilsService {
     };
   }
 
+  private loadSystemBreakpoints() {
+    this.systemBreakpoints=[{id: 'default'}];
+    const dashboardMediaBreakpointIds = ['xs', 'sm', 'md', 'lg', 'xl'];
+    dashboardMediaBreakpointIds.forEach(breakpoint => {
+      const value = MediaBreakpoints[breakpoint];
+      const minWidth = value.match(/min-width:\s*(\d+)px/);
+      const maxWidth = value.match(/max-width:\s*(\d+)px/);
+      this.systemBreakpoints.push({id: breakpoint, minWidth: minWidth?.[1], maxWidth: maxWidth?.[1]});
+    });
+  }
+
+  getListBreakpoint(): BreakpointInfo[] {
+    if(!this.systemBreakpoints) {
+      this.loadSystemBreakpoints();
+    }
+    return this.systemBreakpoints;
+  }
 }

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

@@ -58,9 +58,9 @@
                 <mat-icon>view_compact</mat-icon>
                 {{'layout.layouts' | translate}}
               </button>
-              <tb-select-dashboard-layout
+              <tb-select-dashboard-breakpoint
                 [dashboardCtrl]="this">
-              </tb-select-dashboard-layout>
+              </tb-select-dashboard-breakpoint>
             </div>
           </ng-container>
           <tb-states-component fxFlex.lt-md

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

@@ -83,7 +83,7 @@ import { Authority } from '@shared/models/authority.enum';
 import { DialogService } from '@core/services/dialog.service';
 import { EntityService } from '@core/http/entity.service';
 import { AliasController } from '@core/api/alias-controller';
-import { Observable, of, Subject, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable, of, Subject, Subscription } from 'rxjs';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
 import { DashboardService } from '@core/http/dashboard.service';
 import {
@@ -295,7 +295,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
         ctrl: null,
         dashboardCtrl: this,
         displayGrid: 'onDrag&Resize',
-        layoutData: null
+        layoutData: null,
+        layoutDataChanged: new BehaviorSubject(null),
       }
     },
     right: {
@@ -310,7 +311,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
         ctrl: null,
         dashboardCtrl: this,
         displayGrid: 'onDrag&Resize',
-        layoutData: null
+        layoutData: null,
+        layoutDataChanged: new BehaviorSubject(null),
       }
     }
   };
@@ -612,6 +614,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     if (this.dashboardResize$) {
       this.dashboardResize$.disconnect();
     }
+    this.layouts.main.layoutCtx.layoutDataChanged.unsubscribe();
+    this.layouts.right.layoutCtx.layoutDataChanged.unsubscribe();
   }
 
   public runChangeDetection() {
@@ -1140,6 +1144,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   private updateLayout(layout: DashboardPageLayout, layoutInfo: DashboardLayoutInfo) {
     layout.layoutCtx.layoutData = layoutInfo;
+    layout.layoutCtx.layoutDataChanged.next();
     layout.layoutCtx.ctrl?.updatedCurrentBreakpoint(null, layout.show);
     this.updateLayoutSizes();
   }

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

@@ -26,7 +26,7 @@ import { Timewindow } from '@shared/models/time/time.models';
 import { IAliasController, IStateController } from '@core/api/widget-api.models';
 import { ILayoutController } from './layout/layout.models';
 import { DashboardContextMenuItem, WidgetContextMenuItem } from '@home/models/dashboard-component.models';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface';
 
 export declare type DashboardPageScope = 'tenant' | 'customer';
@@ -74,6 +74,7 @@ export interface IDashboardController {
 export interface DashboardPageLayoutContext {
   id: DashboardLayoutId;
   layoutData: DashboardLayoutInfo;
+  layoutDataChanged: BehaviorSubject<void>;
   breakpoint: string;
   widgets: LayoutWidgetsArray;
   widgetLayouts: WidgetLayouts;

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

@@ -343,21 +343,4 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo
     return this.layoutCtx.layoutData.default;
   }
 
-  createBreakpointConfig(breakpoint: string) {
-    const currentDashboard = this.dashboardCtx.getDashboard();
-    const dashboardConfiguration = currentDashboard.configuration;
-    const states = dashboardConfiguration.states;
-    const state = states[this.dashboardCtx.state];
-    const layout = state.layouts[this.layoutCtx.id];
-    if (!layout.breakpoints) {
-      layout.breakpoints = {};
-    }
-    layout.breakpoints[breakpoint] = {
-      gridSettings: deepClone(layout.gridSettings),
-      widgets: deepClone(layout.widgets),
-    };
-    this.layoutCtx.layoutData =
-      this.dashboardUtils.getStateLayoutsData(currentDashboard, this.dashboardCtx.state)[this.layoutCtx.id];
-  }
-
 }

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

@@ -22,7 +22,6 @@ export interface ILayoutController {
   pasteWidget($event: MouseEvent);
   pasteWidgetReference($event: MouseEvent);
   updatedCurrentBreakpoint(breakpoint?: string, showLayout?: boolean);
-  createBreakpointConfig(breakpoint?: string);
 }
 
 export enum LayoutWidthType {

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

@@ -33,6 +33,7 @@ import { DialogComponent } from '@app/shared/components/dialog.component';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
 import {
+  BreakpointInfo,
   DashboardLayout,
   DashboardLayoutId,
   DashboardStateLayouts,
@@ -53,7 +54,6 @@ import {
 import { Subscription } from 'rxjs';
 import { MatTooltip } from '@angular/material/tooltip';
 import { TbTableDatasource } from '@shared/components/table/table-datasource.abstract';
-import { MediaBreakpoints } from '@shared/models/constants';
 
 export interface ManageDashboardLayoutsDialogData {
   layouts: DashboardStateLayouts;
@@ -101,16 +101,10 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
 
   private submitted = false;
 
-  private layoutBreakpoint = {
-    default: 'Default',
-    xs: 'xs',
-    sm: 'sm',
-    md: 'md',
-    lg: 'lg',
-    xl: 'xl'
-  };
+  breakpoints: BreakpointInfo[];
+  breakpointsData: {[breakpointId in string]: BreakpointInfo} = {};
 
-  allowBreakpointIds = Object.keys(this.layoutBreakpoint);
+  allowBreakpointIds = [];
   selectedBreakpointIds = ['default'];
 
   constructor(protected store: Store<AppState>,
@@ -128,6 +122,11 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     this.layouts = this.data.layouts;
     this.dataSource = new DashboardLayoutDatasource();
 
+    this.breakpoints = this.dashboardUtils.getListBreakpoint();
+    this.breakpoints.forEach((breakpoint) => {
+      this.breakpointsData[breakpoint.id] = breakpoint;
+    });
+
     let layoutType = LayoutType.default;
     if (isDefined(this.layouts.right)) {
       layoutType = LayoutType.divider;
@@ -217,7 +216,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
       }
     }
 
-    this.allowBreakpointIds = Object.keys(this.layoutBreakpoint)
+    this.allowBreakpointIds = Object.keys(this.breakpointsData)
       .filter((item) => !this.selectedBreakpointIds.includes(item));
 
     this.dataSource.loadData(this.layoutBreakpoints);
@@ -259,15 +258,6 @@ 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 {
@@ -491,11 +481,13 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     this.dataSource.loadData(this.layoutBreakpoints);
 
     this.addBreakpointMode = false;
+
+    this.layoutsFormGroup.markAsDirty();
   }
 
   private addLayoutConfiguration(breakpointId: string) {
     const layout = breakpointId === 'default' ? this.layouts.main : this.layouts.main.breakpoints[breakpointId];
-    const size = breakpointId === 'default' ? '' : this.parseCssQuery(MediaBreakpoints[breakpointId]);
+    const size = breakpointId === 'default' ? '' : this.createDescriptionSize(breakpointId);
     this.layoutBreakpoints.push({
       icon: 'mdi:monitor',
       name: breakpointId,
@@ -505,9 +497,11 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     });
   }
 
-  private parseCssQuery(query: string): string {
-    const value = Array.from(query.matchAll(/\([^:]+:\s+([^()]+)\)/g));
-    return `min-width: ${value[0][1]} and max-width: ${value[1][1]}`;
+  private createDescriptionSize(breakpointId: string): string {
+    const currentData = this.breakpointsData[breakpointId];
+    const minStr = isDefined(currentData.minWidth) ? `min-width: ${currentData.minWidth}px` : '';
+    const maxStr = isDefined(currentData.maxWidth) ? `min-width: ${currentData.maxWidth}px` : '';
+    return minStr && maxStr ? `${minStr} and ${maxStr}` : `${minStr}${maxStr}`;
   }
 }
 
@@ -515,4 +509,11 @@ export class DashboardLayoutDatasource extends TbTableDatasource<DashboardLayout
   constructor() {
     super();
   }
+
+  connect() {
+    if (this.dataSubject.isStopped) {
+      this.dataSubject.isStopped = false;
+    }
+    return this.dataSubject.asObservable();
+  }
 }

ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.html

@@ -16,10 +16,11 @@
 
 -->
 <mat-select
-  class="select-dashboard-layout"
-  [(ngModel)]="selectLayout"
+  [class.hidden]="breakpointIds.length < 2"
+  class="select-dashboard-breakpoint"
+  [(ngModel)]="selectedBreakpoint"
   (ngModelChange)="selectLayoutChanged()">
-  <mat-option *ngFor="let layout of layouts" [value]="layout">
-    {{ layout }}
+  <mat-option *ngFor="let breakpointId of breakpointIds" [value]="breakpointId">
+    {{ breakpointId }}
   </mat-option>
 </mat-select>

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

@@ -16,10 +16,14 @@
 :host {
   pointer-events: all;
   width: min-content; //for Safari
+
+  .hidden {
+    display: none;
+  }
 }
 
 :host ::ng-deep {
-  .mat-mdc-select.select-dashboard-layout {
+  .mat-mdc-select.select-dashboard-breakpoint {
     .mat-mdc-select-value {
       max-width: 200px;
     }

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

@@ -0,0 +1,69 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component';
+import { Subscription } from 'rxjs';
+import { BreakpointInfo } from '@shared/models/dashboard.models';
+import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
+
+@Component({
+  selector: 'tb-select-dashboard-breakpoint',
+  templateUrl: './select-dashboard-breakpoint.component.html',
+  styleUrls: ['./select-dashboard-breakpoint.component.scss']
+})
+export class SelectDashboardBreakpointComponent implements OnInit, OnDestroy {
+
+  @Input()
+  dashboardCtrl: DashboardPageComponent;
+
+  selectedBreakpoint = 'default';
+
+  breakpointsData: {[breakpointId in string]: BreakpointInfo} = {};
+
+  breakpointIds: Array<string> = ['default'];
+
+  private layoutDataChanged$: Subscription;
+
+  constructor(private dashboardUtils: DashboardUtilsService) {
+    this.dashboardUtils.getListBreakpoint().forEach((breakpoint) => {
+      this.breakpointsData[breakpoint.id] = breakpoint;
+    });
+  }
+
+  ngOnInit() {
+    this.layoutDataChanged$ = this.dashboardCtrl.layouts.main.layoutCtx.layoutDataChanged.subscribe(() => {
+      if (this.dashboardCtrl.layouts.main.layoutCtx.layoutData) {
+        this.breakpointIds = Object.keys(this.dashboardCtrl.layouts.main.layoutCtx?.layoutData);
+        if (this.breakpointIds.indexOf(this.dashboardCtrl.layouts.main.layoutCtx.breakpoint) > -1) {
+          this.selectedBreakpoint = this.dashboardCtrl.layouts.main.layoutCtx.breakpoint;
+        } else {
+          this.selectedBreakpoint = 'default';
+          this.dashboardCtrl.layouts.main.layoutCtx.breakpoint = this.selectedBreakpoint;
+        }
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.layoutDataChanged$.unsubscribe();
+  }
+
+  selectLayoutChanged() {
+    this.dashboardCtrl.layouts.main.layoutCtx.ctrl.updatedCurrentBreakpoint(this.selectedBreakpoint);
+    this.dashboardCtrl.updateLayoutSizes();
+  }
+}

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

@@ -1,77 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'tb-select-dashboard-layout',
-  templateUrl: './select-dashboard-layout.component.html',
-  styleUrls: ['./select-dashboard-layout.component.scss']
-})
-export class SelectDashboardLayoutComponent implements OnInit, OnDestroy {
-
-  @Input()
-  dashboardCtrl: DashboardPageComponent;
-
-  layout = {
-    default: 'Default',
-    xs: 'xs',
-    sm: 'sm',
-    md: 'md',
-    lg: 'lg',
-    xl: 'xl'
-  };
-
-  layouts = Object.keys(this.layout);
-
-  selectLayout = 'default';
-
-  private allowBreakpointsSize = new Set<string>();
-
-  private stateChanged$: Subscription;
-
-  constructor() { }
-
-  ngOnInit() {
-    this.stateChanged$ = this.dashboardCtrl.dashboardCtx.stateChanged.subscribe(() => {
-      if (this.dashboardCtrl.layouts.main.layoutCtx.layoutData) {
-        this.allowBreakpointsSize = new Set(Object.keys(this.dashboardCtrl.layouts.main.layoutCtx?.layoutData));
-      } else {
-        this.allowBreakpointsSize.add('default');
-      }
-      if (this.allowBreakpointsSize.has(this.dashboardCtrl.layouts.main.layoutCtx.breakpoint)) {
-        this.selectLayout = this.dashboardCtrl.layouts.main.layoutCtx.breakpoint;
-      } else {
-        this.selectLayout = 'default';
-        this.dashboardCtrl.layouts.main.layoutCtx.breakpoint = this.selectLayout;
-      }
-    });
-  }
-
-  ngOnDestroy() {
-    this.stateChanged$.unsubscribe();
-  }
-
-  selectLayoutChanged() {
-    if (!this.dashboardCtrl.layouts.main.layoutCtx.layoutData[this.selectLayout]) {
-      this.dashboardCtrl.layouts.main.layoutCtx.ctrl.createBreakpointConfig(this.selectLayout);
-    }
-    this.dashboardCtrl.layouts.main.layoutCtx.ctrl.updatedCurrentBreakpoint(this.selectLayout);
-    this.dashboardCtrl.updateLayoutSizes();
-  }
-}

ui-ngx/src/app/modules/home/components/home-components.module.ts

@@ -176,8 +176,8 @@ import { BasicWidgetConfigModule } from '@home/components/widget/config/basic/ba
 import { DeleteTimeseriesPanelComponent } from '@home/components/attribute/delete-timeseries-panel.component';
 import { MoveWidgetsDialogComponent } from '@home/components/dashboard-page/layout/move-widgets-dialog.component';
 import {
-  SelectDashboardLayoutComponent
-} from '@home/components/dashboard-page/layout/select-dashboard-layout.component';
+  SelectDashboardBreakpointComponent
+} from '@home/components/dashboard-page/layout/select-dashboard-breakpoint.component';
 
 @NgModule({
   declarations:
@@ -288,7 +288,7 @@ import {
       DashboardPageComponent,
       DashboardStateComponent,
       DashboardLayoutComponent,
-      SelectDashboardLayoutComponent,
+      SelectDashboardBreakpointComponent,
       EditWidgetComponent,
       DashboardWidgetSelectComponent,
       AddWidgetDialogComponent,
@@ -422,7 +422,7 @@ import {
     DashboardPageComponent,
     DashboardStateComponent,
     DashboardLayoutComponent,
-    SelectDashboardLayoutComponent,
+    SelectDashboardBreakpointComponent,
     EditWidgetComponent,
     DashboardWidgetSelectComponent,
     AddWidgetDialogComponent,

ui-ngx/src/app/shared/models/dashboard.models.ts

@@ -85,10 +85,10 @@ export interface GridSettings {
 export interface DashboardLayout {
   widgets: WidgetLayouts;
   gridSettings: GridSettings;
-  breakpoints?: {[breakpoint: string]: Omit<DashboardLayout, 'breakpoints'>};
+  breakpoints?: {[breakpointId: string]: Omit<DashboardLayout, 'breakpoints'>};
 }
 
-export declare type DashboardLayoutInfo = {[breakpoint: string]: BreakpointLayoutInfo};
+export declare type DashboardLayoutInfo = {[breakpointId: string]: BreakpointLayoutInfo};
 
 export interface BreakpointLayoutInfo {
   widgetIds?: string[];
@@ -96,6 +96,12 @@ export interface BreakpointLayoutInfo {
   gridSettings?: GridSettings;
 }
 
+export interface BreakpointInfo {
+  id: string;
+  maxWidth?: number;
+  minWidth?: number;
+}
+
 export interface LayoutDimension {
   type?: LayoutDimensionType;
   fixedWidth?: number;