UI: Refactoring

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -24,9 +24,10 @@ import {
   UntypedFormBuilder,
   UntypedFormGroup
 } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
 import { ColorRange } from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-color-range-list',
@@ -40,9 +41,10 @@ import { TbPopoverComponent } from '@shared/components/popover.component';
     }
   ]
 })
-export class ColorRangeListComponent implements OnInit, ControlValueAccessor {
+export class ColorRangeListComponent implements OnInit, ControlValueAccessor, OnDestroy {
 
-  @Input() disabled: boolean;
+  @Input()
+  disabled: boolean;
 
   @Input()
   popover: TbPopoverComponent;
@@ -54,23 +56,26 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor {
 
   colorRangeListFormGroup: UntypedFormGroup;
 
-  private propagateChange = null;
+  private destroy$ = new Subject<void>();
 
-  constructor(private fb: UntypedFormBuilder,
-              public dialog: MatDialog) {
+  private propagateChange = null;
 
-  }
+  constructor(private fb: UntypedFormBuilder) {}
 
   ngOnInit(): void {
     this.colorRangeListFormGroup = this.fb.group({
         rangeList: this.fb.array([])
     });
 
-    this.colorRangeListFormGroup.valueChanges.subscribe(() => {
-      this.updateModel();
-    });
+    this.colorRangeListFormGroup.valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => this.updateModel());
   }
 
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
@@ -89,7 +94,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor {
     }
   }
 
-  private colorRangeControl(range: ColorRange): AbstractControl {
+  private colorRangeControl(range: ColorRange): UntypedFormGroup {
     return this.fb.group({
       from: [range?.from, []],
       to: [range?.to, []],

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.ts

@@ -55,11 +55,9 @@ export class ColorRangePanelComponent extends PageComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.colorRangeFormGroup = this.fb.group(
-      {
+    this.colorRangeFormGroup = this.fb.group({
         rangeList: [this.colorRangeSettings, []]
-      }
-    );
+    });
   }
 
   copyColorSettings(comp: ColorRangeSettingsComponent) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts

@@ -16,9 +16,9 @@
 
 import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
-import { ColorRange, ColorSettings, ColorType, colorTypeTranslations } from '@shared/models/widget-settings.models';
+import { ColorSettings, ColorType, colorTypeTranslations } from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
-import { AbstractControl, FormGroup, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { deepClone } from '@core/utils';
@@ -76,51 +76,15 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
     });
   }
 
-  private colorRangeControl(range: ColorRange): AbstractControl {
-    return this.fb.group({
-      from: [range?.from, []],
-      to: [range?.to, []],
-      color: [range?.color, []]
-    });
-  }
-
-  get rangeListFormArray(): UntypedFormArray {
-    return this.colorSettingsFormGroup.get('rangeList') as UntypedFormArray;
-  }
-
-  get rangeListFormGroups(): FormGroup[] {
-    return this.rangeListFormArray.controls as FormGroup[];
-  }
-
-  trackByRange(index: number, rangeControl: AbstractControl): any {
-    return rangeControl;
-  }
-
-  removeRange(index: number) {
-    this.rangeListFormArray.removeAt(index);
-    this.colorSettingsFormGroup.markAsDirty();
-    setTimeout(() => {this.popover?.updatePosition();}, 0);
-  }
-
-  addRange() {
-    const newRange: ColorRange = {
-      color: 'rgba(0,0,0,0.87)'
-    };
-    this.rangeListFormArray.push(this.colorRangeControl(newRange));
-    this.colorSettingsFormGroup.markAsDirty();
-    setTimeout(() => {this.popover?.updatePosition();}, 0);
-  }
-
   copyColorSettings(comp: ColorSettingsComponent) {
     const sourceSettings = deepClone(comp.modelValue);
     this.colorSettings = sourceSettings;
     this.colorSettingsFormGroup.patchValue({
       type: this.colorSettings.type,
       color: this.colorSettings.color,
-      colorFunction: this.colorSettings.colorFunction
+      colorFunction: this.colorSettings.colorFunction,
+      rangeList: this.colorSettings.rangeList || []
     }, {emitEvent: false});
-    this.colorSettingsFormGroup.setControl('rangeList',
-      this.fb.array((this.colorSettings.rangeList || []).map(r => this.colorRangeControl(r))), {emitEvent: false});
     this.colorSettingsFormGroup.markAsDirty();
   }