From 9d40dd1931722082604b72979218cec1a05eeb70 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Fri, 4 Apr 2025 09:19:20 +0300 Subject: [PATCH 1/3] UI: Color settings panel tab validation --- .../common/color-settings-panel.component.ts | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) 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 2cba44d334..13fe9b42b9 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 @@ -102,14 +102,28 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit { type: [this.colorSettings?.type || ColorType.constant, []], color: [this.colorSettings?.color, []], - gradient: [this.colorSettings?.gradient || defaultGradient(this.minValue, this.maxValue), []], - rangeList: [this.colorSettings?.rangeList || defaultRange(), []], - colorFunction: [this.colorSettings?.colorFunction, []] + gradient: [{value: this.colorSettings?.gradient || defaultGradient(this.minValue, this.maxValue), disabled: this.colorSettings?.type !== ColorType.gradient}, []], + rangeList: [{value: this.colorSettings?.rangeList || defaultRange(), disabled: this.colorSettings?.type !== ColorType.range}, []], + colorFunction: [{value: this.colorSettings?.colorFunction, disabled: this.colorSettings?.type !== ColorType.function}, []] } ); this.colorSettingsFormGroup.get('type').valueChanges.pipe( takeUntilDestroyed(this.destroyRef) - ).subscribe(() => { + ).subscribe((type: ColorType) => { + this.colorSettingsFormGroup.get('gradient').disable({emitEvent: false}); + this.colorSettingsFormGroup.get('rangeList').disable({emitEvent: false}); + this.colorSettingsFormGroup.get('colorFunction').disable({emitEvent: false}); + switch (type) { + case ColorType.gradient: + this.colorSettingsFormGroup.get('gradient').enable({emitEvent: false}); + break; + case ColorType.range: + this.colorSettingsFormGroup.get('rangeList').enable({emitEvent: false}); + break; + case ColorType.function: + this.colorSettingsFormGroup.get('colorFunction').enable({emitEvent: false}); + break; + } setTimeout(() => {this.popover?.updatePosition();}, 0); }); } @@ -131,7 +145,7 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit } applyColorSettings() { - const colorSettings = this.colorSettingsFormGroup.value; + const colorSettings: ColorSettings = {...this.colorSettings, ...this.colorSettingsFormGroup.value}; this.colorSettingsApplied.emit(colorSettings); } From 8c8485d7a70e8057c52e929ad80f7981f9e13004 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Fri, 4 Apr 2025 10:38:42 +0300 Subject: [PATCH 2/3] UI: tab validation for data layer colors panel --- .../data-layer-color-settings-panel.component.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts index 895fb3e782..dfb049af19 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts @@ -82,9 +82,9 @@ export class DataLayerColorSettingsPanelComponent extends PageComponent implemen { type: [this.colorSettings?.type || DataLayerColorType.constant, []], color: [this.colorSettings?.color, []], - rangeKey: [this.colorSettings?.rangeKey, [Validators.required]], - range: [this.colorSettings?.range, []], - colorFunction: [this.colorSettings?.colorFunction, []] + rangeKey: [{value: this.colorSettings?.rangeKey, disabled: this.colorSettings.type !== DataLayerColorType.range}, [Validators.required]], + range: [{value: this.colorSettings?.range, disabled: this.colorSettings.type !== DataLayerColorType.range}, []], + colorFunction: [{value: this.colorSettings?.colorFunction, disabled: this.colorSettings.type !== DataLayerColorType.function}, []] } ); this.colorSettingsFormGroup.get('type').valueChanges.pipe( @@ -101,7 +101,7 @@ export class DataLayerColorSettingsPanelComponent extends PageComponent implemen } applyColorSettings() { - const colorSettings: DataLayerColorSettings = this.colorSettingsFormGroup.value; + const colorSettings: DataLayerColorSettings = {...this.colorSettings ,...this.colorSettingsFormGroup.value}; this.colorSettingsApplied.emit(colorSettings); } @@ -122,8 +122,15 @@ export class DataLayerColorSettingsPanelComponent extends PageComponent implemen const type: DataLayerColorType = this.colorSettingsFormGroup.get('type').value; if (type === DataLayerColorType.range) { this.colorSettingsFormGroup.get('rangeKey').enable({emitEvent: false}); + this.colorSettingsFormGroup.get('range').enable({emitEvent: false}); } else { this.colorSettingsFormGroup.get('rangeKey').disable({emitEvent: false}); + this.colorSettingsFormGroup.get('range').disable({emitEvent: false}); + } + if (type === DataLayerColorType.function) { + this.colorSettingsFormGroup.get('colorFunction').enable({emitEvent: false}); + } else { + this.colorSettingsFormGroup.get('colorFunction').disable({emitEvent: false}); } } } From 3c50ab1d5e263286ad9ad4a7a726fc41c97edb4c Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Fri, 4 Apr 2025 11:16:36 +0300 Subject: [PATCH 3/3] UI: Refactoring --- .../common/color-settings-panel.component.ts | 44 +++++++++++-------- ...ta-layer-color-settings-panel.component.ts | 8 ++-- 2 files changed, 29 insertions(+), 23 deletions(-) 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 13fe9b42b9..63d73bf578 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 @@ -102,30 +102,36 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit { type: [this.colorSettings?.type || ColorType.constant, []], color: [this.colorSettings?.color, []], - gradient: [{value: this.colorSettings?.gradient || defaultGradient(this.minValue, this.maxValue), disabled: this.colorSettings?.type !== ColorType.gradient}, []], - rangeList: [{value: this.colorSettings?.rangeList || defaultRange(), disabled: this.colorSettings?.type !== ColorType.range}, []], - colorFunction: [{value: this.colorSettings?.colorFunction, disabled: this.colorSettings?.type !== ColorType.function}, []] + gradient: [this.colorSettings?.gradient || defaultGradient(this.minValue, this.maxValue), []], + rangeList: [this.colorSettings?.rangeList || defaultRange(), []], + colorFunction: [this.colorSettings?.colorFunction, []] } ); this.colorSettingsFormGroup.get('type').valueChanges.pipe( takeUntilDestroyed(this.destroyRef) - ).subscribe((type: ColorType) => { - this.colorSettingsFormGroup.get('gradient').disable({emitEvent: false}); - this.colorSettingsFormGroup.get('rangeList').disable({emitEvent: false}); - this.colorSettingsFormGroup.get('colorFunction').disable({emitEvent: false}); - switch (type) { - case ColorType.gradient: - this.colorSettingsFormGroup.get('gradient').enable({emitEvent: false}); - break; - case ColorType.range: - this.colorSettingsFormGroup.get('rangeList').enable({emitEvent: false}); - break; - case ColorType.function: - this.colorSettingsFormGroup.get('colorFunction').enable({emitEvent: false}); - break; - } + ).subscribe(() => { + this.updateValidators(); setTimeout(() => {this.popover?.updatePosition();}, 0); }); + this.updateValidators(); + } + + updateValidators() { + const type: ColorType = this.colorSettingsFormGroup.get('type').value; + this.colorSettingsFormGroup.get('gradient').disable({emitEvent: false}); + this.colorSettingsFormGroup.get('rangeList').disable({emitEvent: false}); + this.colorSettingsFormGroup.get('colorFunction').disable({emitEvent: false}); + switch (type) { + case ColorType.gradient: + this.colorSettingsFormGroup.get('gradient').enable({emitEvent: false}); + break; + case ColorType.range: + this.colorSettingsFormGroup.get('rangeList').enable({emitEvent: false}); + break; + case ColorType.function: + this.colorSettingsFormGroup.get('colorFunction').enable({emitEvent: false}); + break; + } } copyColorSettings(comp: ColorSettingsComponent) { @@ -145,7 +151,7 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit } applyColorSettings() { - const colorSettings: ColorSettings = {...this.colorSettings, ...this.colorSettingsFormGroup.value}; + const colorSettings: ColorSettings = this.colorSettingsFormGroup.getRawValue(); this.colorSettingsApplied.emit(colorSettings); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts index dfb049af19..f083b00723 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts @@ -82,9 +82,9 @@ export class DataLayerColorSettingsPanelComponent extends PageComponent implemen { type: [this.colorSettings?.type || DataLayerColorType.constant, []], color: [this.colorSettings?.color, []], - rangeKey: [{value: this.colorSettings?.rangeKey, disabled: this.colorSettings.type !== DataLayerColorType.range}, [Validators.required]], - range: [{value: this.colorSettings?.range, disabled: this.colorSettings.type !== DataLayerColorType.range}, []], - colorFunction: [{value: this.colorSettings?.colorFunction, disabled: this.colorSettings.type !== DataLayerColorType.function}, []] + rangeKey: [this.colorSettings?.rangeKey, [Validators.required]], + range: [this.colorSettings?.range, []], + colorFunction: [this.colorSettings?.colorFunction, []] } ); this.colorSettingsFormGroup.get('type').valueChanges.pipe( @@ -101,7 +101,7 @@ export class DataLayerColorSettingsPanelComponent extends PageComponent implemen } applyColorSettings() { - const colorSettings: DataLayerColorSettings = {...this.colorSettings ,...this.colorSettingsFormGroup.value}; + const colorSettings: DataLayerColorSettings = this.colorSettingsFormGroup.getRawValue(); this.colorSettingsApplied.emit(colorSettings); }