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({

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,10 +25,7 @@
       <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 mat-dialog-content style="min-width: 300px;">
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
     <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
       <mat-checkbox fxFlex formControlName="main">
         {{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}
@@ -37,8 +34,8 @@
         {{ 'layout.right' | translate }}
       </mat-checkbox>
     </div>
-      <div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div fxLayout="column" fxLayoutGap="8px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2%" style="width: 100%;">
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2%">
         <button fxFlex="{{buttonFlexValue()}}"
                 type="button"
                 mat-raised-button
@@ -58,14 +55,9 @@
           <span >{{ 'layout.right' | translate }}</span>
         </button>
       </div>
-        <div fxLayout="column"
+      <div fxLayout="column" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value">
-             fxLayoutAlign="start center"
-             fxLayoutGap="8px"
-             style="width: 100%;"
-             [fxShow]="layoutsFormGroup.get('right').value">
         <mat-button-toggle-group aria-label="Select width value type"
-                                   formControlName="type"
+                                 formControlName="type">
-                                   style="width: 100%;">
           <mat-button-toggle fxFlex value="percentage">
             {{ 'layout.percentage-width' | translate }}
           </mat-button-toggle>
@@ -73,27 +65,20 @@
             {{ 'layout.fixed-width' | translate }}
           </mat-button-toggle>
         </mat-button-toggle-group>
-          <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE" style="width: 100%;">
+        <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE">
-            <div fxLayoutAlign="start center"
-                 fxLayoutGap="8px"
-                 style="width: 100%;">
           <mat-slider min="10"
                       step="1"
-                          style="width: 100%;"
                       max="90"
-                          formControlName="leftWidthPercentage"
+                      style="width: 100%;"
+                      formControlName="sliderPercentage"
                       thumbLabel
-                          [value]="layoutsFormGroup.get('leftWidthPercentage').value"
                       [displayWith]="formatSliderTooltipLabel">
           </mat-slider>
-            </div>
+          <div fxLayout="row" fxLayoutGap="8px">
-            <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"
@@ -127,19 +112,16 @@
               </mat-error>
             </mat-form-field>
           </div>
-              <label class="tb-hint">{{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }}</label>
+          <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>
+        <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED">
-          <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container">
-               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 }}
@@ -149,8 +131,7 @@
               </mat-radio-button>
             </mat-radio-group>
           </div>
-            <div fxLayout="column" style="width: 100%; min-width: 368px;">
+          <mat-form-field fxFlex class="mat-block" style="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"
@@ -158,6 +139,9 @@
                    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>
@@ -168,24 +152,20 @@
               {{ '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>
     </div>
   </div>
-    </fieldset>
-  </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
+        .subscribe(
+          (value) => {
+            this.layoutControlChange('rightWidthPercentage', value);
           }
-
+        ));
-  ngOnInit(): void {
+    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,8 +223,9 @@ 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;
     }
   }
 
@@ -195,11 +233,10 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     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,