Rate limits text component: removed ControlValueAccessor

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html

@@ -61,8 +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>
-    <div>
+    <tb-rate-limits-text [rateLimitsArray]="rateLimitsControl.value"></tb-rate-limits-text>
-      <tb-rate-limits-text [formControl]="rateLimitsControl"></tb-rate-limits-text>
-    </div>
   </div>
 </section>

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.scss

@@ -27,7 +27,7 @@
     span {
       padding-left: 1em;
     }
-    div {
+    tb-rate-limits-text {
       border: 1px groove rgba(0, 0, 0, .25);
       border-radius: 4px;
       padding: 1em;

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html

@@ -15,5 +15,4 @@
     limitations under the License.
 
 -->
-<div class="tb-rate-limits-text" [ngClass]="{disabled: disabled}"
+<div class="tb-rate-limits-text" [ngClass]="{disabled: disabled}" [innerHTML]="rateLimitsText"></div>
-     [innerHTML]="rateLimitsText"></div>

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.ts

@@ -14,64 +14,41 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { RateLimits, rateLimitsArrayToHtml } from './rate-limits.models';
 
 @Component({
   selector: 'tb-rate-limits-text',
   templateUrl: './rate-limits-text.component.html',
-  styleUrls: ['./rate-limits-text.component.scss'],
+  styleUrls: ['./rate-limits-text.component.scss']
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => RateLimitsTextComponent),
-      multi: true
-    }
-  ]
 })
-export class RateLimitsTextComponent implements ControlValueAccessor, OnInit {
+export class RateLimitsTextComponent implements OnChanges {
 
   @Input()
-  disabled: boolean;
+  rateLimitsArray: Array<RateLimits>;
-
-  noRateLimitsText = this.translate.instant('tenant-profile.rate-limits.not-set');
-
-  public rateLimitsText: string;
-
-  private propagateChange = (v: any) => { };
-
-  constructor(private dialog: MatDialog,
-              private fb: FormBuilder,
-              private translate: TranslateService) {
-  }
-
-  registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
 
-  registerOnTouched(fn: any): void {
+  @Input()
-  }
+  disabled: boolean;
 
-  ngOnInit() {
+  rateLimitsText: string;
-  }
 
-  setDisabledState(isDisabled: boolean): void {
+  constructor(private translate: TranslateService) {}
-    this.disabled = isDisabled;
-  }
 
-  writeValue(value: Array<RateLimits>): void {
+  ngOnChanges(changes: SimpleChanges): void {
-    this.updateText(value);
+    for (const propName of Object.keys(changes)) {
+      if (propName === 'rateLimitsArray') {
+        const change = changes[propName];
+        this.updateView(change.currentValue);
+      }
+    }
   }
 
-  private updateText(value: Array<RateLimits>) {
+  private updateView(value: Array<RateLimits>): void {
-    if (value && value.length) {
+    if (value?.length) {
       this.rateLimitsText = rateLimitsArrayToHtml(this.translate, value);
     } else {
-      this.rateLimitsText = this.noRateLimitsText;
+      this.rateLimitsText = this.translate.instant('tenant-profile.rate-limits.not-set');
     }
   }
-
 }

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 formControlName="rateLimits"></tb-rate-limits-text>
+      <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray"></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.component.ts

@@ -30,6 +30,7 @@ import {
   RateLimitsDetailsDialogData
 } from '@home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component';
 import {
+  RateLimits,
   rateLimitsDialogTitleTranslationMap,
   rateLimitsLabelTranslationMap,
   RateLimitsType,
@@ -66,6 +67,10 @@ export class RateLimitsComponent implements ControlValueAccessor, OnInit, Valida
 
   rateLimitsFormGroup: FormGroup;
 
+  get rateLimitsArray(): Array<RateLimits> {
+    return this.rateLimitsFormGroup.get('rateLimits').value;
+  }
+
   private modelValue: string;
 
   private propagateChange = null;