feature/6371: bug-fix and refactoring

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

@@ -140,7 +140,7 @@ import { MatButton } from '@angular/material/button';
 import { VersionControlComponent } from '@home/components/vc/version-control.component';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { tap } from 'rxjs/operators';
-import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
+import { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
 
 // @dynamic
 @Component({
@@ -703,11 +703,20 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
           return layoutDimension.leftWidthPercentage + '%';
         }
       } else {
+        const dashboardWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width;
+        const minAvailableWidth = dashboardWidth - LayoutFixedSize.MIN;
         if (layoutDimension.fixedLayout === layout) {
-          return layoutDimension.fixedWidth + 'px';
+          if (minAvailableWidth <= layoutDimension.fixedWidth) {
+            return minAvailableWidth + 'px';
+          } else {
+            return layoutDimension.fixedWidth + 'px';
+          }
         } else {
-          const layoutWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width - layoutDimension.fixedWidth;
-          return layoutWidth + 'px';
+          if (minAvailableWidth <= layoutDimension.fixedWidth) {
+            return LayoutFixedSize.MIN + 'px';
+          } else {
+            return (dashboardWidth - layoutDimension.fixedWidth) + 'px';
+          }
         }
       }
     } else {

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

@@ -28,7 +28,7 @@
   <section *ngIf="layoutCtx.widgets.isEmpty()" fxLayoutAlign="center center"
            style="display: flex; z-index: 1; pointer-events: none;"
            class="mat-headline tb-absolute-fill">
-    <span *ngIf="!isEdit">
+    <span *ngIf="!isEdit" style="text-align: center;">
       {{'dashboard.no-widgets' | translate}}
     </span>
     <button mat-button *ngIf="isEdit && !widgetEditMode" class="tb-add-new-widget"

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

@@ -28,3 +28,13 @@ export enum LayoutWidthType {
   FIXED = 'fixed'
 }
 
+export enum LayoutPercentageSize {
+  MIN = 10,
+  MAX = 90
+}
+
+export enum LayoutFixedSize {
+  MIN = 150,
+  MAX = 4000
+}
+

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

@@ -49,7 +49,7 @@
              #tooltip="matTooltip"
              matTooltip=""
              matTooltipPosition="below">
-          <div fxLayout="column" fxLayoutAlign="start center" [fxFlex]="buttonFlexValue()" class="tb-layout-preview-container-main">
+          <div fxLayout="column" fxLayoutAlign="start center" fxFlex="{{ buttonFlexValue() }}" class="tb-layout-preview-container-main">
             <button mat-icon-button
                     type="button"
                     matTooltip="{{ 'dashboard.layout-settings' | translate }}"
@@ -57,7 +57,7 @@
                     (click)="openLayoutSettings('main')"
                     class="tb-layout-preview-element"
                     aria-label="Layout settings"
-                    [ngClass]="layoutButtonTextAndClass('main', false)">
+                    [ngClass]="layoutButtonClass('main')">
               <mat-icon>settings</mat-icon>
             </button>
             <button fxFlex
@@ -65,35 +65,32 @@
                     mat-raised-button
                     color="primary"
                     class="tb-layout-button"
-                    [matTooltip]="layoutButtonTextAndClass('main', true)"
+                    [matTooltip]="layoutButtonText('main')"
                     matTooltipPosition="above"
                     matTooltipClass="tb-layout-button-tooltip"
                     (click)="setFixedLayout('main')"
-                    [ngClass]="layoutButtonTextAndClass('main', false)"
-                    [ngStyle]="layoutsFormGroup.get('right').value ?
-                              {'border-radius': '5px 0 0 5px;'} :
-                              {'border-radius': '5px 5px 5px 5px;'}">
+                    [ngClass]="layoutButtonClass('main', true)">
               <span>{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}</span>
             </button>
-            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('main')">
-              <input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
+            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('main')">
+              <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
                      formControlName="leftWidthPercentage"
                      type="number"
                      step="1"
-                     min="10"
-                     max="90"
+                     min="{{ layoutPercentageSize.MIN }}"
+                     max="{{ layoutPercentageSize.MAX }}"
                      required>
-              <input [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
-                     *ngIf="layoutsFormGroup.get('fixedLayout').value === 'main'"
+              <input *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.FIXED &&
+                            layoutsFormGroup.get('fixedLayout').value === 'main'"
                      formControlName="fixedWidth"
                      type="number"
                      step="1"
-                     min="150"
-                     max="1700"
+                     min="{{ layoutFixedSize.MIN }}"
+                     max="{{ layoutFixedSize.MAX }}"
                      required>
             </div>
           </div>
-          <div fxLayout="column" fxLayoutAlign="start center" fxFlex [fxShow]="layoutsFormGroup.get('right').value" matTooltip="">
+          <div fxLayout="column" fxLayoutAlign="start center" fxFlex *ngIf="layoutsFormGroup.get('right').value" matTooltip="">
             <button mat-icon-button
                     type="button"
                     matTooltip="{{ 'dashboard.layout-settings' | translate }}"
@@ -101,56 +98,55 @@
                     (click)="openLayoutSettings('right')"
                     class="tb-layout-preview-element"
                     aria-label="Layout settings"
-                    [ngClass]="layoutButtonTextAndClass('right', false)">
+                    [ngClass]="layoutButtonClass('right')">
               <mat-icon>settings</mat-icon>
             </button>
             <button fxFlex
                     type="button"
                     mat-raised-button
                     color="primary"
-                    class="tb-layout-button"
-                    [matTooltip]="layoutButtonTextAndClass('right', true)"
+                    class="tb-layout-button tb-layout-button-right"
+                    [matTooltip]="layoutButtonText('right')"
                     matTooltipPosition="above"
                     matTooltipClass="tb-layout-button-tooltip"
                     (click)="setFixedLayout('right')"
-                    [ngClass]="layoutButtonTextAndClass('right', false)"
-                    style="border-radius: 0 5px 5px 0;">
+                    [ngClass]="layoutButtonClass('right')">
               <span>{{ 'layout.right' | translate }}</span>
             </button>
-            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('right')">
-              <input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
+            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('right')">
+              <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
                      formControlName="rightWidthPercentage"
                      type="number"
                      step="1"
-                     min="10"
-                     max="90"
+                     min="{{ layoutPercentageSize.MIN }}"
+                     max="{{ layoutPercentageSize.MAX }}"
                      required>
-              <input [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
+              <input *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.FIXED"
                      formControlName="fixedWidth"
                      type="number"
                      step="1"
-                     min="150"
-                     max="1700"
+                     min="{{ layoutFixedSize.MIN }}"
+                     max="{{ layoutFixedSize.MAX }}"
                      required>
             </div>
           </div>
         </div>
       </div>
-      <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value" style="width: 80%">
-        <mat-slider [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE"
-                    min="10"
+      <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" *ngIf="layoutsFormGroup.get('right').value" style="width: 80%">
+        <mat-slider *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE"
                     step="1"
-                    max="90"
+                    min="{{ layoutPercentageSize.MIN }}"
+                    max="{{ layoutPercentageSize.MAX }}"
                     style="width: 100%;"
                     color="accent"
                     formControlName="sliderPercentage"
                     thumbLabel
                     [displayWith]="formatSliderTooltipLabel.bind(this)">
         </mat-slider>
-        <mat-slider [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.PERCENTAGE"
-                    min="150"
+        <mat-slider *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.PERCENTAGE"
                     step="1"
-                    max="1700"
+                    min="{{ layoutFixedSize.MIN }}"
+                    max="{{ layoutFixedSize.MAX }}"
                     style="width: 100%;"
                     color="accent"
                     formControlName="sliderFixed"
@@ -158,8 +154,12 @@
                     [displayWith]="formatSliderTooltipLabel.bind(this)">
         </mat-slider>
         <div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group" style="width: 100%;">
-          <label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '10 %' : '150px'}}</label>
-          <label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '90 %' : '1700px'}}</label>
+          <label>
+            {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MIN + '%' : layoutFixedSize.MIN + 'px'}}
+          </label>
+          <label>
+            {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MAX + '%' : layoutFixedSize.MAX + 'px'}}
+          </label>
         </div>
       </div>
     </div>

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

@@ -39,7 +39,11 @@ import {
   DashboardSettingsDialogComponent,
   DashboardSettingsDialogData
 } from '@home/components/dashboard-page/dashboard-settings-dialog.component';
-import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
+import {
+  LayoutFixedSize,
+  LayoutPercentageSize,
+  LayoutWidthType
+} from '@home/components/dashboard-page/layout/layout.models';
 import { Subscription } from 'rxjs';
 import { MatTooltip } from '@angular/material/tooltip';
 
@@ -60,7 +64,11 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
 
   layoutsFormGroup: FormGroup;
 
-  LayoutWidthType = LayoutWidthType;
+  layoutWidthType = LayoutWidthType;
+
+  layoutPercentageSize = LayoutPercentageSize;
+
+  layoutFixedSize = LayoutFixedSize;
 
   private readonly layouts: DashboardStateLayouts;
 
@@ -87,11 +95,11 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
         main: [{value: isDefined(this.layouts.main), disabled: true}],
         right: [isDefined(this.layouts.right)],
         sliderPercentage: [50],
-        sliderFixed: [150],
-        leftWidthPercentage: [50, [Validators.min(10), Validators.max(90), Validators.required]],
-        rightWidthPercentage: [50, [Validators.min(10), Validators.max(90), Validators.required]],
+        sliderFixed: [this.layoutFixedSize.MIN],
+        leftWidthPercentage: [50, [Validators.min(this.layoutPercentageSize.MIN), Validators.max(this.layoutPercentageSize.MAX), Validators.required]],
+        rightWidthPercentage: [50, [Validators.min(this.layoutPercentageSize.MIN), Validators.max(this.layoutPercentageSize.MAX), Validators.required]],
         type: [LayoutWidthType.PERCENTAGE],
-        fixedWidth: [150, [Validators.min(150), Validators.max(1700), Validators.required]],
+        fixedWidth: [this.layoutFixedSize.MIN, [Validators.min(this.layoutFixedSize.MIN), Validators.max(this.layoutFixedSize.MAX), Validators.required]],
         fixedLayout: ['main', []]
       }
     );
@@ -233,7 +241,9 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
       }
     }
     delete this.layouts.main.gridSettings.layoutDimension;
-    delete this.layouts.right.gridSettings.layoutDimension;
+    if (this.layouts.right?.gridSettings) {
+      delete this.layouts.right.gridSettings.layoutDimension;
+    }
     if (this.layoutsFormGroup.value.right) {
       const formValues = this.layoutsFormGroup.value;
       const widthType = formValues.type;
@@ -338,17 +348,24 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     }
   }
 
-  layoutButtonTextAndClass(side: string, isText: boolean): string {
+  layoutButtonClass(side: DashboardLayoutId, border: boolean = false): string {
+    const formValues = this.layoutsFormGroup.value;
+    if (formValues.right) {
+      let classString = border ? 'tb-layout-button-main ' : '';
+      if (!(formValues.fixedLayout === side || formValues.type === LayoutWidthType.PERCENTAGE)) {
+        classString += 'tb-fixed-layout-button';
+      }
+      return classString;
+    }
+  }
+
+  layoutButtonText(side: DashboardLayoutId): string {
     const formValues = this.layoutsFormGroup.value;
     if (!(formValues.fixedLayout === side || !formValues.right || formValues.type === LayoutWidthType.PERCENTAGE)) {
-      if (isText) {
-        if (side === 'main') {
-          return this.translate.instant('layout.left-side');
-        } else {
-          return this.translate.instant('layout.right-side');
-        }
+      if (side === 'main') {
+        return this.translate.instant('layout.left-side');
       } else {
-        return 'tb-fixed-layout-button';
+        return this.translate.instant('layout.right-side');
       }
     }
   }

ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss

@@ -19,6 +19,15 @@
     height: 100%;
     padding: 40px 10px;
     cursor: default;
+    border-radius: 5px;
+
+    &-right {
+      border-radius: 0 5px 5px 0;
+    }
+
+    &-main {
+      border-radius: 5px 0 0 5px;
+    }
   }
 
   &::ng-deep {