From 43b847b9d85ed89bd7a4b6e1a077e2548d79a6f3 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 26 Jul 2022 16:39:56 +0300
Subject: [PATCH] UI: Refactoring code

---
 .../rate-limits-list.component.html           |  2 +-
 .../rate-limits/rate-limits-list.component.ts | 32 ++++++-------------
 .../rate-limits/rate-limits-text.component.ts |  3 +-
 .../rate-limits/rate-limits.component.html    |  2 +-
 .../tenant/rate-limits/rate-limits.models.ts  | 19 +++++------
 5 files changed, 22 insertions(+), 36 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
index ec25c80683..ba51cbc358 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
@@ -61,6 +61,6 @@
   </button>
   <div fxFlex fxLayoutGap="8px" fxLayout="column" class="tb-rate-limits-preview" [ngClass]="{'tb-rate-limits-preview-short': !disabled}">
     <span translate>tenant-profile.rate-limits.preview</span>
-    <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray"></tb-rate-limits-text>
+    <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>
   </div>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.ts b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.ts
index 0c135d0d9a..e6ad1c5b20 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.ts
@@ -19,7 +19,6 @@ import {
   ControlValueAccessor,
   FormArray,
   FormBuilder,
-  FormControl,
   FormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
@@ -28,11 +27,7 @@ import {
   Validators
 } from '@angular/forms';
 import { Subject, Subscription } from 'rxjs';
-import {
-  RateLimits,
-  rateLimitsArrayToString,
-  stringToRateLimitsArray
-} from './rate-limits.models';
+import { RateLimits, rateLimitsArrayToString, stringToRateLimitsArray } from './rate-limits.models';
 import { isDefinedAndNotNull } from '@core/utils';
 import { takeUntil } from 'rxjs/operators';
 
@@ -59,11 +54,11 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
 
   rateLimitsListFormGroup: FormGroup;
 
-  rateLimitsControl: FormControl;
+  rateLimitsArray: Array<RateLimits>;
 
-  private propagateChange = (v: any) => { };
   private valueChangeSubscription: Subscription = null;
   private destroy$ = new Subject();
+  private propagateChange = (v: any) => { };
 
   constructor(private fb: FormBuilder) {}
 
@@ -71,7 +66,6 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
     this.rateLimitsListFormGroup = this.fb.group({
       rateLimits: this.fb.array([])
     });
-    this.rateLimitsControl = this.fb.control(null);
     this.valueChangeSubscription = this.rateLimitsListFormGroup.valueChanges
       .pipe(takeUntil(this.destroy$))
       .subscribe((value) => {
@@ -95,10 +89,6 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
     return this.rateLimitsListFormGroup.get('rateLimits') as FormArray;
   }
 
-  get rateLimitsArray(): Array<RateLimits> {
-    return this.rateLimitsControl.value;
-  }
-
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }
@@ -110,23 +100,21 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
     this.disabled = isDisabled;
     if (this.disabled) {
       this.rateLimitsListFormGroup.disable({emitEvent: false});
-      this.rateLimitsControl.disable({emitEvent: false});
     } else {
       this.rateLimitsListFormGroup.enable({emitEvent: false});
-      this.rateLimitsControl.enable({emitEvent: false});
     }
   }
 
   validate(): ValidationErrors | null {
-    return this.rateLimitsListFormGroup.valid && this.rateLimitsControl.valid ? null : {
+    return this.rateLimitsListFormGroup.valid ? null : {
       rateLimitsList: {valid: false}
     };
   }
 
-  writeValue(value: string) {
+  writeValue(rateLimits: string) {
     const rateLimitsControls: Array<FormGroup> = [];
-    if (value) {
-      let rateLimitsArray = value.split(',');
+    if (rateLimits) {
+      const rateLimitsArray = rateLimits.split(',');
       for (let i = 0; i < rateLimitsArray.length; i++) {
         const [value, time] = rateLimitsArray[i].split(':');
         const rateLimitsControl = this.fb.group({
@@ -140,7 +128,7 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
       }
     }
     this.rateLimitsListFormGroup.setControl('rateLimits', this.fb.array(rateLimitsControls), {emitEvent: false});
-    this.rateLimitsControl.patchValue(stringToRateLimitsArray(value), {emitEvent: false});
+    this.rateLimitsArray = stringToRateLimitsArray(rateLimits);
   }
 
   updateView(rateLimitsArray: Array<RateLimits>) {
@@ -150,10 +138,10 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
       );
       const rateLimitsString = rateLimitsArrayToString(notNullRateLimits);
       this.propagateChange(rateLimitsString);
-      this.rateLimitsControl.patchValue(stringToRateLimitsArray(rateLimitsString), {emitEvent: false});
+      this.rateLimitsArray = stringToRateLimitsArray(rateLimitsString);
     } else {
       this.propagateChange(null);
-      this.rateLimitsControl.patchValue(null, {emitEvent: false});
+      this.rateLimitsArray = null;
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.ts b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.ts
index 0b65e97d5d..9081acc208 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.ts
@@ -33,7 +33,8 @@ export class RateLimitsTextComponent implements OnChanges {
 
   rateLimitsText: string;
 
-  constructor(private translate: TranslateService) {}
+  constructor(private translate: TranslateService) {
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     for (const propName of Object.keys(changes)) {
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
index ac341c8b69..0ab20fc533 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
@@ -21,7 +21,7 @@
     <div [formGroup]="rateLimitsFormGroup" fxFlex fxLayout="row" fxLayoutGap="8px"
          (click)="onClick($event)"
          [matTooltip]="'tenant-profile.rate-limits.edit-limit' | translate" matTooltipPosition="above">
-      <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray"></tb-rate-limits-text>
+      <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>
     </div>
   </fieldset>
   <button mat-icon-button color="primary" type="button" *ngIf="!disabled"
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.models.ts b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.models.ts
index 7185dbdd44..f137635c33 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.models.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.models.ts
@@ -73,15 +73,13 @@ export const rateLimitsDialogTitleTranslationMap = new Map<RateLimitsType, strin
 export function stringToRateLimitsArray(rateLimits: string): Array<RateLimits> {
   const result: Array<RateLimits> = [];
   if (rateLimits?.length > 0) {
-    let rateLimitsArrays = rateLimits.split(',');
+    const rateLimitsArrays = rateLimits.split(',');
     for (let i = 0; i < rateLimitsArrays.length; i++) {
-      let valueTime = rateLimitsArrays[i].split(':');
-      let value = valueTime[0];
-      let time = valueTime[1];
+      const [value, time] = rateLimitsArrays[i].split(':');
       const rateLimitControl = {
         value,
         time
-      }
+      };
       result.push(rateLimitControl);
     }
   }
@@ -101,7 +99,7 @@ export function rateLimitsArrayToString(rateLimits: Array<RateLimits>): string {
 
 export function rateLimitsArrayToHtml(translate: TranslateService, rateLimitsArray: Array<RateLimits>): string {
   const rateLimitsHtml = rateLimitsArray.map((rateLimits, index) => {
-    const isLast: boolean = index === rateLimitsArray.length-1;
+    const isLast: boolean = index === rateLimitsArray.length - 1;
     return rateLimitsToHtml(translate, rateLimits, isLast);
   });
   let result: string;
@@ -120,9 +118,8 @@ function rateLimitsToHtml(translate: TranslateService, rateLimit: RateLimits, is
   const operation = translate.instant('tenant-profile.rate-limits.messages-per');
   const seconds = translate.instant('tenant-profile.rate-limits.sec');
   const comma = isLast ? '' : ',';
-  const result = `<span class="tb-rate-limits-value">${value}</span>
-                  <span>${operation}</span>
-                  <span class="tb-rate-limits-value"> ${time}</span>
-                  <span>${seconds}${comma}</span><br>`;
-  return result;
+  return `<span class="tb-rate-limits-value">${value}</span>
+          <span>${operation}</span>
+          <span class="tb-rate-limits-value"> ${time}</span>
+          <span>${seconds}${comma}</span><br>`;
 }