UI: Refactoring code

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>

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;
     }
   }
 

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

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"

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>`;
 }