From 32ce3d08a7074dbbc5464c463d312a8ca3b98b8b Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 12 Sep 2022 15:52:27 +0300
Subject: [PATCH] UI: Refactoring code

---
 ...ge-dashboard-layouts-dialog.component.html |  3 +-
 ...nage-dashboard-layouts-dialog.component.ts | 37 +++++++++----------
 2 files changed, 18 insertions(+), 22 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 95f05dcab2..6c03c79bdb 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
@@ -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 }}"
@@ -126,7 +126,6 @@
                      max="90"
                      required>
               <input [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
-                     *ngIf="layoutsFormGroup.get('fixedLayout').value === 'right'"
                      formControlName="fixedWidth"
                      type="number"
                      step="1"
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 96d4bfa20c..d4ac0a9fd3 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
@@ -41,7 +41,7 @@ import {
 } from '@home/components/dashboard-page/dashboard-settings-dialog.component';
 import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
 import { Subscription } from 'rxjs';
-import { MatTooltip } from "@angular/material/tooltip";
+import { MatTooltip } from '@angular/material/tooltip';
 
 export interface ManageDashboardLayoutsDialogData {
   layouts: DashboardStateLayouts;
@@ -56,23 +56,23 @@ export interface ManageDashboardLayoutsDialogData {
 export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>
   implements ErrorStateMatcher {
 
-  @ViewChild('tooltip') tooltip: MatTooltip;
+  @ViewChild('tooltip', {static: true}) tooltip: MatTooltip;
 
   layoutsFormGroup: FormGroup;
 
-  layouts: DashboardStateLayouts;
-
   LayoutWidthType = LayoutWidthType;
 
-  subscriptions: Array<Subscription> = [];
+  private readonly layouts: DashboardStateLayouts;
 
-  submitted = false;
+  private subscriptions: Array<Subscription> = [];
+
+  private submitted = false;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
-              @Inject(MAT_DIALOG_DATA) public data: ManageDashboardLayoutsDialogData,
+              @Inject(MAT_DIALOG_DATA) private data: ManageDashboardLayoutsDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
-              public dialogRef: MatDialogRef<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>,
+              protected dialogRef: MatDialogRef<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>,
               private fb: FormBuilder,
               private utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
@@ -128,7 +128,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
             fixedLayout: this.layouts.main.gridSettings.layoutDimension.fixedLayout,
             type: LayoutWidthType.FIXED,
             fixedWidth: this.layouts.main.gridSettings.layoutDimension.fixedWidth,
-            sliderFixed: this.layouts.right.gridSettings.layoutDimension.fixedWidth
+            sliderFixed: this.layouts.main.gridSettings.layoutDimension.fixedWidth
           }, {emitEvent: false});
         } else {
           const leftWidthPercentage: number = Number(this.layouts.main.gridSettings.layoutDimension.leftWidthPercentage);
@@ -157,7 +157,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
       this.layoutsFormGroup.get('sliderFixed').valueChanges
         .subscribe(
           (value) => {
-            this.layoutsFormGroup.get('fixedWidth').patchValue(value)
+            this.layoutsFormGroup.get('fixedWidth').patchValue(value);
           }
         ));
     this.subscriptions.push(
@@ -180,7 +180,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
       this.layoutsFormGroup.get('fixedWidth').valueChanges
         .subscribe(
           (value) => {
-            this.showTooltip(this.layoutsFormGroup.get('fixedWidth'), LayoutWidthType.FIXED, this.layoutsFormGroup.get('fixedLayout').value);
+            this.showTooltip(this.layoutsFormGroup.get('fixedWidth'), LayoutWidthType.FIXED,
+              this.layoutsFormGroup.get('fixedLayout').value);
             this.layoutsFormGroup.get('sliderFixed').setValue(value, {emitEvent: false});
           }
         ));
@@ -302,7 +303,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     }
   }
 
-  private showTooltip(control: AbstractControl, layoutType: LayoutWidthType, layoutSide: string): void {
+  private showTooltip(control: AbstractControl, layoutType: LayoutWidthType, layoutSide: DashboardLayoutId): void {
     if (control.errors) {
       let message: string;
       const unit = layoutType === LayoutWidthType.FIXED ? 'px' : '%';
@@ -318,9 +319,9 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
           }
         }
       } else if (control.errors.min) {
-        message = this.translate.instant('layout.value-min-error', {min: control.errors.min.min, unit: unit});
+        message = this.translate.instant('layout.value-min-error', {min: control.errors.min.min, unit});
       } else if (control.errors.max) {
-        message = this.translate.instant('layout.value-max-error', {max: control.errors.max.max, unit: unit});
+        message = this.translate.instant('layout.value-max-error', {max: control.errors.max.max, unit});
       }
 
       if (layoutSide === 'main') {
@@ -352,12 +353,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     }
   }
 
-  showPreviewInputs(side: string): boolean {
+  showPreviewInputs(side: DashboardLayoutId): boolean {
     const formValues = this.layoutsFormGroup.value;
-    return formValues.right &&
-      (
-        formValues.type === LayoutWidthType.PERCENTAGE ||
-        (formValues.fixedLayout === side && formValues.type === LayoutWidthType.FIXED)
-      );
+    return formValues.right && (formValues.type === LayoutWidthType.PERCENTAGE || formValues.fixedLayout === side);
   }
 }