UI: Refactoring code

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 { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
 
 // @dynamic
 @Component({
@@ -685,34 +685,34 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   }
 
   private calculateWidth(layout: DashboardLayoutId): string {
-      let layoutDimension: LayoutDimension;
+    let layoutDimension: LayoutDimension;
-      const mainLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.main;
+    const mainLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.main;
-      const rightLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.right;
+    const rightLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.right;
-      if (rightLayout) {
+    if (rightLayout) {
-        if (mainLayout.gridSettings.layoutDimension) {
+      if (mainLayout.gridSettings.layoutDimension) {
-          layoutDimension = mainLayout.gridSettings.layoutDimension;
+        layoutDimension = mainLayout.gridSettings.layoutDimension;
-        } else {
+      } else {
-          layoutDimension = rightLayout.gridSettings.layoutDimension;
+        layoutDimension = rightLayout.gridSettings.layoutDimension;
-        }
       }
-      if (layoutDimension) {
+    }
-        if (layoutDimension.type === LayoutWidthType.PERCENTAGE) {
+    if (layoutDimension) {
-          if (layout === 'right') {
+      if (layoutDimension.type === LayoutWidthType.PERCENTAGE) {
-            return (100 - layoutDimension.leftWidthPercentage) + '%';
+        if (layout === 'right') {
-          } else {
+          return (100 - layoutDimension.leftWidthPercentage) + '%';
-            return layoutDimension.leftWidthPercentage + '%';
-          }
         } else {
-          if (layoutDimension.fixedLayout === layout) {
+          return layoutDimension.leftWidthPercentage + '%';
-            return layoutDimension.fixedWidth + 'px';
-          } else {
-            const layoutWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width - layoutDimension.fixedWidth;
-            return layoutWidth + 'px';
-          }
         }
       } else {
-        return '50%';
+        if (layoutDimension.fixedLayout === layout) {
+          return layoutDimension.fixedWidth + 'px';
+        } else {
+          const layoutWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width - layoutDimension.fixedWidth;
+          return layoutWidth + 'px';
+        }
       }
+    } else {
+      return '50%';
+    }
   }
 
   public rightLayoutHeight(): string {

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

@@ -14,12 +14,7 @@
 /// limitations under the License.
 ///
 
-import {
+import { Dashboard, DashboardLayoutId, GridSettings, WidgetLayouts } from '@app/shared/models/dashboard.models';
-  Dashboard,
-  DashboardLayoutId,
-  GridSettings,
-  WidgetLayouts
-} from '@app/shared/models/dashboard.models';
 import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
 import { Timewindow } from '@shared/models/time/time.models';
 import { IAliasController, IStateController } from '@core/api/widget-api.models';

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

@@ -24,7 +24,7 @@ export interface ILayoutController {
 }
 
 export enum LayoutWidthType {
-  PERCENTAGE = "percentage",
+  PERCENTAGE = 'percentage',
-  FIXED = "fixed"
+  FIXED = 'fixed'
 }
 

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

@@ -25,167 +25,147 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+  <div mat-dialog-content fxLayout="column" fxLayoutGap="8px" style="min-width: 300px;">
-  </mat-progress-bar>
+    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-  <div mat-dialog-content style="min-width: 300px;">
+      <mat-checkbox fxFlex formControlName="main">
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
+        {{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      </mat-checkbox>
-        <mat-checkbox fxFlex formControlName="main">
+      <mat-checkbox fxFlex formControlName="right">
-          {{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}
+        {{ 'layout.right' | translate }}
-        </mat-checkbox>
+      </mat-checkbox>
-        <mat-checkbox fxFlex formControlName="right">
+    </div>
-          {{ 'layout.right' | translate }}
+    <div fxLayout="column" fxLayoutGap="8px">
-        </mat-checkbox>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2%">
+        <button fxFlex="{{buttonFlexValue()}}"
+                type="button"
+                mat-raised-button
+                color="primary"
+                class="tb-layout-button"
+                (click)="openLayoutSettings('main')"
+                >
+          <span >{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}</span>
+        </button>
+        <button fxFlex
+                [fxShow]="layoutsFormGroup.get('right').value"
+                type="button"
+                mat-raised-button
+                color="primary"
+                class="tb-layout-button"
+                (click)="openLayoutSettings('right')">
+          <span >{{ 'layout.right' | translate }}</span>
+        </button>
       </div>
-      <div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div fxLayout="column" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2%" style="width: 100%;">
+        <mat-button-toggle-group aria-label="Select width value type"
-          <button fxFlex="{{buttonFlexValue()}}"
+                                 formControlName="type">
-                  type="button"
+          <mat-button-toggle fxFlex value="percentage">
-                  mat-raised-button
+            {{ 'layout.percentage-width' | translate }}
-                  color="primary"
+          </mat-button-toggle>
-                  class="tb-layout-button"
+          <mat-button-toggle fxFlex value="fixed">
-                  (click)="openLayoutSettings('main')"
+            {{ 'layout.fixed-width' | translate }}
-                  >
+          </mat-button-toggle>
-            <span >{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}</span>
+        </mat-button-toggle-group>
-          </button>
+        <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE">
-          <button fxFlex
+          <mat-slider min="10"
-                  [fxShow]="layoutsFormGroup.get('right').value"
+                      step="1"
-                  type="button"
+                      max="90"
-                  mat-raised-button
+                      style="width: 100%;"
-                  color="primary"
+                      formControlName="sliderPercentage"
-                  class="tb-layout-button"
+                      thumbLabel
-                  (click)="openLayoutSettings('right')">
+                      [displayWith]="formatSliderTooltipLabel">
-            <span >{{ 'layout.right' | translate }}</span>
+          </mat-slider>
-          </button>
+          <div fxLayout="row" fxLayoutGap="8px">
+            <mat-form-field fxFlex class="mat-block">
+              <mat-label>{{ 'layout.left-width' | translate }}</mat-label>
+              <input matInput
+                     formControlName="leftWidthPercentage"
+                     type="number"
+                     step="1"
+                     min="10"
+                     max="90">
+              <mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('required')">
+                {{ 'layout.left-width-percentage-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('max')">
+                {{ 'layout.value-max-error' | translate: { max: 90 } }}
+              </mat-error>
+              <mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('min')">
+                {{ 'layout.value-min-error' | translate: { min: 10 } }}
+              </mat-error>
+            </mat-form-field>
+            <mat-form-field fxFlex class="mat-block">
+              <mat-label>{{ 'layout.right-width' | translate }}</mat-label>
+              <input matInput
+                     formControlName="rightWidthPercentage"
+                     type="number"
+                     step="1"
+                     min="10"
+                     max="90">
+              <mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('required')">
+                {{ 'layout.right-width-percentage-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('max')">
+                {{ 'layout.value-max-error' | translate: { max: 90 } }}
+              </mat-error>
+              <mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('min')">
+                {{ 'layout.value-min-error' | translate: { min: 10 } }}
+              </mat-error>
+            </mat-form-field>
+          </div>
+          <label [fxShow]="layoutsFormGroup.get('leftWidthPercentage').valid && layoutsFormGroup.get('rightWidthPercentage').valid" class="tb-hint tb-hint-group">
+            {{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }}
+          </label>
         </div>
-        <div fxLayout="column"
+        <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED">
-             fxLayoutAlign="start center"
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container">
-             fxLayoutGap="8px"
+            <label>{{ 'layout.pick-fixed-side' | translate }}</label>
-             style="width: 100%;"
+            <mat-radio-group aria-label="Select side"
-             [fxShow]="layoutsFormGroup.get('right').value">
+                             formControlName="fixedLayout"
-          <mat-button-toggle-group aria-label="Select width value type"
+                             fxLayout="row"
-                                   formControlName="type"
+                             fxLayoutGap="8px">
-                                   style="width: 100%;">
+              <mat-radio-button value="main">
-            <mat-button-toggle fxFlex value="percentage">
+                {{ 'layout.left' | translate }}
-              {{ 'layout.percentage-width' | translate }}
+              </mat-radio-button>
-            </mat-button-toggle>
+              <mat-radio-button value="right">
-            <mat-button-toggle fxFlex value="fixed">
+                {{ 'layout.right' | translate }}
-              {{ 'layout.fixed-width' | translate }}
+              </mat-radio-button>
-            </mat-button-toggle>
+            </mat-radio-group>
-          </mat-button-toggle-group>
-          <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE" style="width: 100%;">
-            <div fxLayoutAlign="start center"
-                 fxLayoutGap="8px"
-                 style="width: 100%;">
-              <mat-slider min="10"
-                          step="1"
-                          style="width: 100%;"
-                          max="90"
-                          formControlName="leftWidthPercentage"
-                          thumbLabel
-                          [value]="layoutsFormGroup.get('leftWidthPercentage').value"
-                          [displayWith]="formatSliderTooltipLabel">
-              </mat-slider>
-            </div>
-            <div fxFlex fxLayout="column" style="width: 100%;">
-              <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
-                <mat-form-field fxFlex class="mat-block">
-                  <mat-label>{{ 'layout.left-width' | translate }}</mat-label>
-                  <input matInput
-                         formControlName="leftWidthPercentage"
-                         [value]="layoutsFormGroup.get('leftWidthPercentage').value"
-                         type="number"
-                         step="1"
-                         min="10"
-                         max="90">
-                  <mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('required')">
-                    {{ 'layout.left-width-percentage-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('max')">
-                    {{ 'layout.value-max-error' | translate: { max: 90 } }}
-                  </mat-error>
-                  <mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('min')">
-                    {{ 'layout.value-min-error' | translate: { min: 10 } }}
-                  </mat-error>
-                </mat-form-field>
-                <mat-form-field fxFlex class="mat-block">
-                  <mat-label>{{ 'layout.right-width' | translate }}</mat-label>
-                  <input matInput
-                         formControlName="rightWidthPercentage"
-                         type="number"
-                         step="1"
-                         min="10"
-                         max="90">
-                  <mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('required')">
-                    {{ 'layout.right-width-percentage-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('max')">
-                    {{ 'layout.value-max-error' | translate: { max: 90 } }}
-                  </mat-error>
-                  <mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('min')">
-                    {{ 'layout.value-min-error' | translate: { min: 10 } }}
-                  </mat-error>
-                </mat-form-field>
-              </div>
-              <label class="tb-hint">{{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }}</label>
-            </div>
-          </div>
-          <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
-               fxLayout="column"
-               style="width: 100%;"
-               fxLayoutAlign="start center">
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container" style="width: 100%;">
-              <label>{{ 'layout.pick-fixed-side' | translate }}</label>
-              <mat-radio-group aria-label="Select side"
-                               formControlName="fixedLayout"
-                               fxLayout="row"
-                               fxLayoutAlign="start center"
-                               fxLayoutGap="8px">
-                <mat-radio-button value="main">
-                  {{ 'layout.left' | translate }}
-                </mat-radio-button>
-                <mat-radio-button value="right">
-                  {{ 'layout.right' | translate }}
-                </mat-radio-button>
-              </mat-radio-group>
-            </div>
-            <div fxLayout="column" style="width: 100%; min-width: 368px;">
-              <mat-form-field class="mat-block" style="width: 100%;">
-                <mat-label>{{ 'layout.layout-fixed-width' | translate }}</mat-label>
-                <input matInput
-                       formControlName="fixedWidth"
-                       type="number"
-                       step="1"
-                       min="150"
-                       max="1700">
-                <mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('required')">
-                  {{ 'layout.layout-fixed-width-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('max')">
-                  {{ 'layout.value-max-error' | translate: { max: 1700 } }}
-                </mat-error>
-                <mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('min')">
-                  {{ 'layout.value-min-error' | translate: { min: 150 } }}
-                </mat-error>
-              </mat-form-field>
-              <label class="tb-hint">{{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }}</label>
-            </div>
           </div>
+          <mat-form-field fxFlex class="mat-block" style="min-width: 368px;">
+            <mat-label>{{ 'layout.layout-fixed-width' | translate }}</mat-label>
+            <input matInput
+                   formControlName="fixedWidth"
+                   type="number"
+                   step="1"
+                   min="150"
+                   max="1700">
+            <mat-hint>
+              {{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }}
+            </mat-hint>
+            <mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('required')">
+              {{ 'layout.layout-fixed-width-required' | translate }}
+            </mat-error>
+            <mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('max')">
+              {{ 'layout.value-max-error' | translate: { max: 1700 } }}
+            </mat-error>
+            <mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('min')">
+              {{ 'layout.value-min-error' | translate: { min: 150 } }}
+            </mat-error>
+          </mat-form-field>
         </div>
       </div>
-    </fieldset>
+    </div>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-button
             color="primary"
             type="button"
-            [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
     <button mat-raised-button color="primary"
             type="submit"
-            [disabled]="(isLoading$ | async) || layoutsFormGroup.invalid || !layoutsFormGroup.dirty">
+            [disabled]="layoutsFormGroup.invalid || !layoutsFormGroup.dirty">
       {{ 'action.save' | translate }}
     </button>
   </div>

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

@@ -14,8 +14,22 @@
  * limitations under the License.
  */
 :host {
-  ::ng-deep .mat-slider-wrapper {
+  .tb-layout-fixed-container {
+    width: 100%;
+    min-width: 368px;
+    padding: 8px 8px 8px 0;
+    min-height: 48px;
+  }
 
+  .tb-hint-group {
+    padding: 0;
+    margin-top: -15px;
+    display: block;
+  }
+}
+
+:host ::ng-deep {
+  .mat-slider-wrapper {
     .mat-slider-thumb-container {
       .mat-slider-thumb-label {
         width: 35px;
@@ -23,11 +37,4 @@
       }
     }
   }
-
-  .tb-layout-fixed-container {
-    width: 100%;
-    min-width: 368px;
-    padding: 8px 8px 8px 0;
-    min-height: 48px;
-  }
 }

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

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf} from '@angular/core';
+import { Component, Inject, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -31,8 +31,8 @@ import {
   DashboardSettingsDialogComponent,
   DashboardSettingsDialogData
 } from '@home/components/dashboard-page/dashboard-settings-dialog.component';
-import { LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
+import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
-import { Subscription } from "rxjs";
+import { Subscription } from 'rxjs';
 
 export interface ManageDashboardLayoutsDialogData {
   layouts: DashboardStateLayouts;
@@ -45,7 +45,7 @@ export interface ManageDashboardLayoutsDialogData {
   styleUrls: ['./manage-dashboard-layouts-dialog.component.scss', '../../../components/dashboard/layout-button.scss']
 })
 export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>
-  implements OnInit, ErrorStateMatcher {
+  implements ErrorStateMatcher {
 
   layoutsFormGroup: FormGroup;
 
@@ -53,7 +53,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
 
   LayoutWidthType = LayoutWidthType;
 
-  subscriptions: Array<Subscription>;
+  subscriptions: Array<Subscription> = [];
 
   submitted = false;
 
@@ -71,53 +71,90 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
 
     this.layouts = this.data.layouts;
     this.layoutsFormGroup = this.fb.group({
-        main:  [{value: isDefined(this.layouts.main), disabled: true}, []],
+        main: [{value: isDefined(this.layouts.main), disabled: true}],
-        right: [isDefined(this.layouts.right), []],
+        right: [isDefined(this.layouts.right)],
+        sliderPercentage: [50],
         leftWidthPercentage: [50, [Validators.min(10), Validators.max(90), Validators.required]],
         rightWidthPercentage: [50, [Validators.min(10), Validators.max(90), Validators.required]],
-        type: [LayoutWidthType.PERCENTAGE, []],
+        type: [LayoutWidthType.PERCENTAGE],
         fixedWidth: [150, [Validators.min(150), Validators.max(1700), Validators.required]],
         fixedLayout: ['main', []]
       }
     );
 
+    this.subscriptions.push(
+      this.layoutsFormGroup.get('type').valueChanges.subscribe(
+        (value) => {
+          if (value === LayoutWidthType.FIXED) {
+            this.layoutsFormGroup.get('leftWidthPercentage').disable();
+            this.layoutsFormGroup.get('rightWidthPercentage').disable();
+            this.layoutsFormGroup.get('fixedWidth').enable();
+            this.layoutsFormGroup.get('fixedLayout').enable();
+          } else {
+            this.layoutsFormGroup.get('leftWidthPercentage').enable();
+            this.layoutsFormGroup.get('rightWidthPercentage').enable();
+            this.layoutsFormGroup.get('fixedWidth').disable();
+            this.layoutsFormGroup.get('fixedLayout').disable();
+          }
+        }
+      )
+    );
+
     if (this.layouts.right) {
       if (this.layouts.right.gridSettings.layoutDimension) {
-        this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.right.gridSettings.layoutDimension.fixedLayout);
+        this.layoutsFormGroup.patchValue({
-        this.layoutsFormGroup.get('type').setValue(LayoutWidthType.FIXED);
+          fixedLayout: this.layouts.right.gridSettings.layoutDimension.fixedLayout,
-        this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.right.gridSettings.layoutDimension.fixedWidth);
+          type: LayoutWidthType.FIXED,
+          fixedWidth: this.layouts.right.gridSettings.layoutDimension.fixedWidth
+        }, {emitEvent: false});
       } else if (this.layouts.main.gridSettings.layoutDimension) {
         if (this.layouts.main.gridSettings.layoutDimension.type === LayoutWidthType.FIXED) {
-          this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.main.gridSettings.layoutDimension.fixedLayout);
+          this.layoutsFormGroup.patchValue({
-          this.layoutsFormGroup.get('type').setValue(LayoutWidthType.FIXED);
+            fixedLayout: this.layouts.main.gridSettings.layoutDimension.fixedLayout,
-          this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.main.gridSettings.layoutDimension.fixedWidth);
+            type: LayoutWidthType.FIXED,
+            fixedWidth: this.layouts.main.gridSettings.layoutDimension.fixedWidth
+          }, {emitEvent: false});
         } else {
           const leftWidthPercentage: number = Number(this.layouts.main.gridSettings.layoutDimension.leftWidthPercentage);
-          this.layoutsFormGroup.get('leftWidthPercentage').setValue(leftWidthPercentage);
+          this.layoutsFormGroup.patchValue({
-          this.layoutsFormGroup.get('rightWidthPercentage').setValue(100 - Number(leftWidthPercentage));
+            leftWidthPercentage,
+            sliderPercentage: leftWidthPercentage,
+            rightWidthPercentage: 100 - Number(leftWidthPercentage)
+          }, {emitEvent: false});
         }
       }
     }
 
-    if (!this.layouts['main']) {
+    if (!this.layouts.main) {
-      this.layouts['main'] = this.dashboardUtils.createDefaultLayoutData();
+      this.layouts.main = this.dashboardUtils.createDefaultLayoutData();
     }
-    if (!this.layouts['right']) {
+    if (!this.layouts.right) {
-      this.layouts['right'] = this.dashboardUtils.createDefaultLayoutData();
+      this.layouts.right = this.dashboardUtils.createDefaultLayoutData();
     }
 
-    const leftWidthPercentageSub = this.layoutsFormGroup.get('leftWidthPercentage').valueChanges
+    this.subscriptions.push(
-      .subscribe((value) => this.layoutControlChange('rightWidthPercentage', value));
+      this.layoutsFormGroup.get('sliderPercentage').valueChanges
-    const rightWidthPercentageSub = this.layoutsFormGroup.get('rightWidthPercentage').valueChanges
+        .subscribe(
-      .subscribe((value) => this.layoutControlChange('leftWidthPercentage', value));
+          (value) => this.layoutsFormGroup.get('leftWidthPercentage').patchValue(value)
-    this.subscriptions = [leftWidthPercentageSub, rightWidthPercentageSub];
+        ));
-  }
+    this.subscriptions.push(
-
+      this.layoutsFormGroup.get('leftWidthPercentage').valueChanges
-  ngOnInit(): void {
+        .subscribe(
+          (value) => {
+            this.layoutControlChange('rightWidthPercentage', value);
+          }
+        ));
+    this.subscriptions.push(
+      this.layoutsFormGroup.get('rightWidthPercentage').valueChanges
+        .subscribe(
+          (value) => {
+            this.layoutControlChange('leftWidthPercentage', value);
+          }
+        ));
   }
 
   ngOnDestroy(): void {
-    for (let subscription of this.subscriptions) {
+    for (const subscription of this.subscriptions) {
       subscription.unsubscribe();
     }
   }
@@ -186,20 +223,20 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
   }
 
   buttonFlexValue(): number {
-    if (this.layoutsFormGroup.get('right').value && this.layoutsFormGroup.value.type !== LayoutWidthType.FIXED) {
+    const formValues = this.layoutsFormGroup.value;
-      return this.layoutsFormGroup.get('leftWidthPercentage').value - 1;
+    if (formValues.right && formValues.type !== LayoutWidthType.FIXED) {
+      return formValues.leftWidthPercentage - 1;
     }
   }
 
-  formatSliderTooltipLabel(value: number):string {
+  formatSliderTooltipLabel(value: number): string {
     return `${value}|${100 - value}`;
   }
 
-  layoutControlChange(key: string, value) {
+  private layoutControlChange(key: string, value) {
-    const previousValue = this.layoutsFormGroup.get(key).value;
     const valueToSet = 100 - Number(value);
-    if (previousValue !== valueToSet) {
+    this.layoutsFormGroup.get(key).setValue(valueToSet, {emitEvent: false});
-      this.layoutsFormGroup.get(key).setValue(100 - Number(value));
+    this.layoutsFormGroup.get('sliderPercentage')
-    }
+      .setValue(key === 'leftWidthPercentage' ? valueToSet : Number(value), {emitEvent: false});
   }
 }

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

@@ -17,7 +17,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@app/shared/shared.module';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { AddEntityDialogComponent } from '@home/components/entity/add-entity-dialog.component';
 import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
 import { DetailsPanelComponent } from '@home/components/details-panel.component';
@@ -314,8 +313,7 @@ import { AutoCommitSettingsComponent } from '@home/components/vc/auto-commit-set
     SnmpDeviceProfileTransportModule,
     StatesControllerModule,
     DeviceCredentialsModule,
-    DeviceProfileCommonModule,
+    DeviceProfileCommonModule
-    MatButtonToggleModule
   ],
   exports: [
     EntitiesTableComponent,

ui-ngx/src/app/shared/shared.module.ts

@@ -26,6 +26,7 @@ import Flow from '@flowjs/flow.js';
 
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
@@ -295,6 +296,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     RouterModule,
     TranslateModule,
     MatButtonModule,
+    MatButtonToggleModule,
     MatCheckboxModule,
     MatIconModule,
     MatCardModule,
@@ -406,6 +408,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     WidgetsBundleSelectComponent,
     ValueInputComponent,
     MatButtonModule,
+    MatButtonToggleModule,
     MatCheckboxModule,
     MatIconModule,
     MatCardModule,