UI: Refactoring code

2022-07-27 13:56:11 +03:00 · 2022-07-27 13:56:11 +03:00 · 00a56bf6cd
commit 00a56bf6cd
parent 3f3c90924f
8 changed files with 246 additions and 226 deletions
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/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({
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
@ -14,12 +14,7 @@
 /// limitations under the License.
 ///

-import {
-  Dashboard,
-  DashboardLayoutId,
-  GridSettings,
-  WidgetLayouts
-} from '@app/shared/models/dashboard.models';
+import { 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';
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
+++ b/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",
-  FIXED = "fixed"
+  PERCENTAGE = 'percentage',
+  FIXED = 'fixed'
 }

--- 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
@ -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">
-  </mat-progress-bar>
-  <div mat-dialog-content style="min-width: 300px;">
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
+  <div mat-dialog-content fxLayout="column" fxLayoutGap="8px" style="min-width: 300px;">
    <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="row" fxLayoutAlign="start center" fxLayoutGap="2%" style="width: 100%;">
+    <div fxLayout="column" fxLayoutGap="8px">
+      <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"
-             fxLayoutAlign="start center"
-             fxLayoutGap="8px"
-             style="width: 100%;"
-             [fxShow]="layoutsFormGroup.get('right').value">
+      <div fxLayout="column" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value">
        <mat-button-toggle-group aria-label="Select width value type"
-                                   formControlName="type"
-                                   style="width: 100%;">
+                                 formControlName="type">
          <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 fxLayoutAlign="start center"
-                 fxLayoutGap="8px"
-                 style="width: 100%;">
+        <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE">
          <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 fxFlex fxLayout="column" style="width: 100%;">
-              <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
+          <div fxLayout="row" fxLayoutGap="8px">
            <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"
-               fxLayout="column"
-               style="width: 100%;"
-               fxLayoutAlign="start center">
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container" style="width: 100%;">
+        <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED">
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container">
            <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 class="mat-block" style="width: 100%;">
+          <mat-form-field fxFlex class="mat-block" style="min-width: 368px;">
            <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>
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
+++ b/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;
-  }
 }
--- 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
@ -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 { Subscription } from "rxjs";
+import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
+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}, []],
-        right: [isDefined(this.layouts.right), []],
+        main: [{value: isDefined(this.layouts.main), disabled: true}],
+        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.get('type').setValue(LayoutWidthType.FIXED);
-        this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.right.gridSettings.layoutDimension.fixedWidth);
+        this.layoutsFormGroup.patchValue({
+          fixedLayout: this.layouts.right.gridSettings.layoutDimension.fixedLayout,
+          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.get('type').setValue(LayoutWidthType.FIXED);
-          this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.main.gridSettings.layoutDimension.fixedWidth);
+          this.layoutsFormGroup.patchValue({
+            fixedLayout: this.layouts.main.gridSettings.layoutDimension.fixedLayout,
+            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.get('rightWidthPercentage').setValue(100 - Number(leftWidthPercentage));
+          this.layoutsFormGroup.patchValue({
+            leftWidthPercentage,
+            sliderPercentage: leftWidthPercentage,
+            rightWidthPercentage: 100 - Number(leftWidthPercentage)
+          }, {emitEvent: false});
        }
      }
    }

-    if (!this.layouts['main']) {
-      this.layouts['main'] = this.dashboardUtils.createDefaultLayoutData();
+    if (!this.layouts.main) {
+      this.layouts.main = this.dashboardUtils.createDefaultLayoutData();
    }
-    if (!this.layouts['right']) {
-      this.layouts['right'] = this.dashboardUtils.createDefaultLayoutData();
+    if (!this.layouts.right) {
+      this.layouts.right = this.dashboardUtils.createDefaultLayoutData();
    }

-    const leftWidthPercentageSub = this.layoutsFormGroup.get('leftWidthPercentage').valueChanges
-      .subscribe((value) => this.layoutControlChange('rightWidthPercentage', value));
-    const rightWidthPercentageSub = this.layoutsFormGroup.get('rightWidthPercentage').valueChanges
-      .subscribe((value) => this.layoutControlChange('leftWidthPercentage', value));
-    this.subscriptions = [leftWidthPercentageSub, rightWidthPercentageSub];
+    this.subscriptions.push(
+      this.layoutsFormGroup.get('sliderPercentage').valueChanges
+        .subscribe(
+          (value) => this.layoutsFormGroup.get('leftWidthPercentage').patchValue(value)
+        ));
+    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) {
-      return this.layoutsFormGroup.get('leftWidthPercentage').value - 1;
+    const formValues = this.layoutsFormGroup.value;
+    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) {
-    const previousValue = this.layoutsFormGroup.get(key).value;
+  private layoutControlChange(key: string, value) {
    const valueToSet = 100 - Number(value);
-    if (previousValue !== valueToSet) {
-      this.layoutsFormGroup.get(key).setValue(100 - Number(value));
-    }
+    this.layoutsFormGroup.get(key).setValue(valueToSet, {emitEvent: false});
+    this.layoutsFormGroup.get('sliderPercentage')
+      .setValue(key === 'leftWidthPercentage' ? valueToSet : Number(value), {emitEvent: false});
  }
 }
--- a/ui-ngx/src/app/modules/home/components/home-components.module.ts
+++ b/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,
-    MatButtonToggleModule
+    DeviceProfileCommonModule
  ],
  exports: [
    EntitiesTableComponent,
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/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,