From e35e8e7a210cd1fe8c52551102d7172d7662af57 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Wed, 25 Oct 2023 12:47:28 +0300 Subject: [PATCH] UI: Refactoring --- .../common/color-range-list.component.ts | 29 +++++++----- .../common/color-range-panel.component.ts | 6 +-- .../common/color-settings-panel.component.ts | 44 ++----------------- 3 files changed, 23 insertions(+), 56 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts index 88a13850a2..f135d77092 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts +++ b/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(); - 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, []], diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.ts index 3fbc0842b0..bdc9500605 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.ts +++ b/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) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts index cd4724f67b..26d838abc0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts +++ b/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(); }