From 8526b390d1cc569fc726e4eaf27d7a7b0cdde528 Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Mon, 11 Apr 2022 16:31:43 +0300
Subject: [PATCH] 6371:reactive_forms_refactoring

---
 ...ge-dashboard-layouts-dialog.component.html |  9 +++--
 ...nage-dashboard-layouts-dialog.component.ts | 36 ++++---------------
 2 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
index 7c16d2eb67..1e9cbf6cff 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
@@ -81,9 +81,9 @@
                           step="1"
                           style="width: 100%;"
                           max="90"
-                          (input)="sliderChange($event)"
                           formControlName="leftWidthPercentage"
                           thumbLabel
+                          [value]="layoutsFormGroup.value.leftWidthPercentage"
                           [displayWith]="formatSliderTooltipLabel"
               ></mat-slider>
             </div>
@@ -92,8 +92,8 @@
                 <mat-form-field class="mat-block">
                   <mat-label>{{ 'layout.left-width' | translate }}</mat-label>
                   <input matInput
-                         [value]="layoutValue('main')"
-                         (input)="layoutValueChange($event, 'main')"
+                         formControlName="leftWidthPercentage"
+                         [value]="layoutsFormGroup.value.leftWidthPercentage"
                          type="number"
                          step="any"
                          min="10"
@@ -102,8 +102,7 @@
                 <mat-form-field fxFlex class="mat-block">
                   <mat-label>{{ 'layout.right-width' | translate }}</mat-label>
                   <input matInput
-                         [value]="layoutValue('right')"
-                         (input)="layoutValueChange($event, 'right')"
+                         formControlName="rightWidthPercentage"
                          type="number"
                          step="any"
                          min="10"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts
index 43fb551ac8..17f8a85c8a 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts
@@ -31,7 +31,6 @@ import {
   DashboardSettingsDialogComponent,
   DashboardSettingsDialogData
 } from '@home/components/dashboard-page/dashboard-settings-dialog.component';
-import { MatSliderChange } from "@angular/material/slider";
 import { LaouytType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
 
 export interface ManageDashboardLayoutsDialogData {
@@ -70,6 +69,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
         main:  [{value: isDefined(this.layouts.main), disabled: true}, []],
         right: [isDefined(this.layouts.right), []],
         leftWidthPercentage: [50, [Validators.min(10), Validators.max(90)]],
+        rightWidthPercentage: [50, [Validators.min(10), Validators.max(90)]],
         type: [LayoutWidthType.PERCENTAGE, []],
         fixedWidth: [150, [Validators.min(150), Validators.max(1700)]],
         fixedLayout: [LaouytType.MAIN, []]
@@ -83,6 +83,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
         this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.layoutDimension.fixedLayout);
       } else {
         this.layoutsFormGroup.get('leftWidthPercentage').setValue(this.layouts.layoutDimension.leftWidthPercentage);
+        this.layoutsFormGroup.get('rightWidthPercentage').setValue(100 - Number(this.layouts.layoutDimension.leftWidthPercentage));
       }
     }
 
@@ -92,6 +93,10 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     if (!this.layouts[LaouytType.RIGHT]) {
       this.layouts[LaouytType.RIGHT] = this.dashboardUtils.createDefaultLayoutData();
     }
+
+    this.layoutsFormGroup.get('leftWidthPercentage').valueChanges.subscribe((value) => {
+      this.layoutsFormGroup.get('rightWidthPercentage').setValue(100 - Number(value));
+    });
   }
 
   ngOnInit(): void {
@@ -163,36 +168,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     }
   }
 
-  layoutValue(layout:DashboardLayoutId): number {
-    if (layout === LaouytType.MAIN) {
-      return this.layoutsFormGroup.value.leftWidthPercentage;
-    } else {
-      return (100 - this.layoutsFormGroup.value.leftWidthPercentage);
-    }
-  }
-
-  layoutValueChange($event: Event, layout:DashboardLayoutId): void {
-    let widthValue: number;
-    if (Number(($event.target as any).value) > 90) {
-      widthValue = 90;
-    } else if (Number(($event.target as any).value) < 10) {
-      widthValue = 10;
-    } else {
-      widthValue = Number(($event.target as any).value);
-    }
-    if (layout === LaouytType.MAIN) {
-      this.layoutsFormGroup.get('leftWidthPercentage').setValue(widthValue);
-    } else {
-      this.layoutsFormGroup.get('leftWidthPercentage').setValue(100 - widthValue);
-    }
-    this.layoutsFormGroup.markAsDirty();
-  }
-
   formatSliderTooltipLabel(value: number):string {
     return `${value}|${100 - value}`;
   }
-
-  sliderChange($event: MatSliderChange) {
-    this.layoutsFormGroup.get('leftWidthPercentage').setValue($event.value);
-  }
 }