Merge pull request #9624 from rusikv/enhancement/manage-layouts-mobile

Added ability to display dashboard right layout first in mobile view

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

@@ -296,7 +296,7 @@
               [(opened)]="rightLayoutOpened">
             <tb-dashboard-layout style="height: 100%;"
               [dashboardCheatSheet]="cheatSheetComponent"
-              [layoutCtx]="layouts.right.layoutCtx"
+              [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.main.layoutCtx : layouts.right.layoutCtx"
               [dashboardCtx]="dashboardCtx"
               [isEdit]="isEdit"
               [isEditingWidget]="isEditingWidget"
@@ -312,7 +312,7 @@
                                           height: mainLayoutSize.height}">
             <tb-dashboard-layout
               [dashboardCheatSheet]="cheatSheetComponent"
-              [layoutCtx]="layouts.main.layoutCtx"
+              [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.right.layoutCtx : layouts.main.layoutCtx"
               [dashboardCtx]="dashboardCtx"
               [isEdit]="isEdit"
               [isEditingWidget]="isEditingWidget"

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

@@ -320,6 +320,13 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   set rightLayoutOpened(rightLayoutOpened: boolean) {
   }
 
+  get mobileDisplayRightLayoutFirst(): boolean {
+    return this.isMobile && this.layouts.right.layoutCtx.gridSettings?.mobileDisplayLayoutFirst;
+  }
+
+  set mobileDisplayRightLayoutFirst(mobileDisplayRightLayoutFirst: boolean) {
+  }
+
   @ViewChild('tbEditWidget') editWidgetComponent: EditWidgetComponent;
 
   @ViewChild('dashboardWidgetSelect') dashboardWidgetSelectComponent: DashboardWidgetSelectComponent;

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

@@ -159,25 +159,30 @@
             </mat-select>
           </mat-form-field>
         </fieldset>
-        <fieldset class="fields-group" fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" fxLayoutGap="8px">
+        <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
           <legend class="group-title" translate>dashboard.mobile-layout</legend>
-          <mat-slide-toggle fxFlex formControlName="mobileAutoFillHeight">
-            {{ 'dashboard.autofill-height' | translate }}
+          <mat-slide-toggle *ngIf="isRightLayout" fxFlex formControlName="mobileDisplayLayoutFirst" style="display: block;">
+            {{ 'dashboard.display-first-in-mobile-view' | translate }}
           </mat-slide-toggle>
-          <mat-form-field fxFlex class="mat-block">
-            <mat-label translate>dashboard.mobile-row-height</mat-label>
-            <input matInput formControlName="mobileRowHeight" type="number" step="any" min="5"
-                   max="200" required>
-            <mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('required')">
-              {{ 'dashboard.mobile-row-height-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('min')">
-              {{ 'dashboard.min-mobile-row-height-message' | translate }}
-            </mat-error>
-            <mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('max')">
-              {{ 'dashboard.max-mobile-row-height-message' | translate }}
-            </mat-error>
-          </mat-form-field>
+          <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" fxLayoutGap="8px" >
+            <mat-slide-toggle fxFlex formControlName="mobileAutoFillHeight">
+              {{ 'dashboard.autofill-height' | translate }}
+            </mat-slide-toggle>
+            <mat-form-field fxFlex class="mat-block">
+              <mat-label translate>dashboard.mobile-row-height</mat-label>
+              <input matInput formControlName="mobileRowHeight" type="number" step="any" min="5"
+                     max="200" required>
+              <mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('required')">
+                {{ 'dashboard.mobile-row-height-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('min')">
+                {{ 'dashboard.min-mobile-row-height-message' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('max')">
+                {{ 'dashboard.max-mobile-row-height-message' | translate }}
+              </mat-error>
+            </mat-form-field>
+          </div>
         </fieldset>
       </div>
     </fieldset>

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

@@ -30,6 +30,7 @@ import { StatesControllerService } from './states/states-controller.service';
 export interface DashboardSettingsDialogData {
   settings?: DashboardSettings;
   gridSettings?: GridSettings;
+  isRightLayout?: boolean;
 }
 
 @Component({
@@ -43,6 +44,7 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
 
   settings: DashboardSettings;
   gridSettings: GridSettings;
+  isRightLayout = false;
 
   settingsFormGroup: FormGroup;
   gridSettingsFormGroup: FormGroup;
@@ -69,6 +71,7 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
 
     this.settings = this.data.settings;
     this.gridSettings = this.data.gridSettings;
+    this.isRightLayout = this.data.isRightLayout;
 
     if (this.settings) {
       const showTitle = isUndefined(this.settings.showTitle) ? true : this.settings.showTitle;
@@ -165,6 +168,10 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
         mobileRowHeight: [{ value: isUndefined(this.gridSettings.mobileRowHeight) ? 70 : this.gridSettings.mobileRowHeight,
           disabled: mobileAutoFillHeight}, [Validators.required, Validators.min(5), Validators.max(200)]]
       });
+      if (this.isRightLayout) {
+        const mobileDisplayLayoutFirst = isUndefined(this.gridSettings.mobileDisplayLayoutFirst) ? false : this.gridSettings.mobileDisplayLayoutFirst;
+        this.gridSettingsFormGroup.addControl('mobileDisplayLayoutFirst', this.fb.control(mobileDisplayLayoutFirst, []));
+      }
       this.gridSettingsFormGroup.get('mobileAutoFillHeight').valueChanges.subscribe(
         (mobileAutoFillHeightValue: boolean) => {
           if (mobileAutoFillHeightValue) {

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

@@ -217,7 +217,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       data: {
         settings: null,
-        gridSettings
+        gridSettings,
+        isRightLayout: this.layoutsFormGroup.get('right').value && layoutId === 'right'
       }
     }).afterClosed().subscribe((data) => {
       if (data && data.gridSettings) {

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

@@ -59,6 +59,7 @@ export interface GridSettings {
   autoFillHeight?: boolean;
   mobileAutoFillHeight?: boolean;
   mobileRowHeight?: number;
+  mobileDisplayLayoutFirst?: boolean;
   layoutDimension?: LayoutDimension;
   [key: string]: any;
 }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1147,6 +1147,7 @@
         "mobile-row-height-required": "Mobile row height value is required.",
         "min-mobile-row-height-message": "Only 5 pixels is allowed as minimum mobile row height value.",
         "max-mobile-row-height-message": "Only 200 pixels is allowed as maximum mobile row height value.",
+        "display-first-in-mobile-view": "Display first in mobile view",
         "title-settings": "Title settings",
         "display-title": "Display dashboard title",
         "title-color": "Title color",