From c806b06c9e1c0e0b67b77554f420f55a82400740 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Tue, 23 Jul 2024 15:25:31 +0300 Subject: [PATCH 1/2] UI: Add validation for min max value --- ...l-simple-gauge-basic-config.component.html | 8 +++++ ...tal-simple-gauge-basic-config.component.ts | 31 ++++++++++++++++-- ...gital-gauge-widget-settings.component.html | 8 +++++ ...digital-gauge-widget-settings.component.ts | 32 ++++++++++++++++--- .../assets/locale/locale.constant-en_US.json | 3 +- 5 files changed, 74 insertions(+), 8 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html index 9f170dff8c..11e0d6abc2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html @@ -76,6 +76,14 @@
widgets.gauge.max-value-short
+ + warning + diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts index c3850db5ee..f6a74c496e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts @@ -14,7 +14,14 @@ /// limitations under the License. /// -import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { + AbstractControl, + UntypedFormBuilder, + UntypedFormGroup, + ValidationErrors, + ValidatorFn, + Validators +} from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; @@ -109,7 +116,7 @@ export class DigitalSimpleGaugeBasicConfigComponent extends BasicWidgetConfigCom showMinMax: [settings.showMinMax, []], minValue: [settings.minValue, []], - maxValue: [settings.maxValue, []], + maxValue: [settings.maxValue, [this.maxValueValidation()]], minMaxFont: [settings.minMaxFont, []], minMaxColor: [settings.minMaxFont?.color, []], @@ -182,11 +189,29 @@ export class DigitalSimpleGaugeBasicConfigComponent extends BasicWidgetConfigCom return this.widgetConfig; } + private maxValueValidation(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const value: string = control.value; + if (value) { + if (value < control.parent?.get('minValue').value) { + return {maxValue: true}; + } + } + return null; + }; + } + protected validatorTriggers(): string[] { - return ['gaugeType', 'showValue', 'showTitle', 'showMinMax']; + return ['gaugeType', 'showValue', 'showTitle', 'showMinMax', 'minValue']; } protected updateValidators(emitEvent: boolean, trigger?: string) { + if (trigger === 'minValue') { + this.simpleGaugeWidgetConfigForm.get('maxValue').updateValueAndValidity({emitEvent: true}); + this.simpleGaugeWidgetConfigForm.get('maxValue').markAsTouched({onlySelf: true}); + return; + } + const isDonut = this.simpleGaugeWidgetConfigForm.get('gaugeType').value === this.digitalGaugeType.donut; if (isDonut) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html index 62cacf0730..173d2102d6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html @@ -65,6 +65,14 @@
widgets.gauge.max-value-short
+ + warning + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts index 5a4289a8d2..5de1b77b18 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts @@ -16,7 +16,14 @@ import { Datasource, WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; import { Component } from '@angular/core'; -import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { + AbstractControl, + UntypedFormArray, + UntypedFormBuilder, + UntypedFormGroup, ValidationErrors, + ValidatorFn, + Validators +} from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { GaugeType } from '@home/components/widget/lib/canvas-digital-gauge'; @@ -167,7 +174,7 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent donutStartAngle: [settings.donutStartAngle, []], showMinMax: [settings.showMinMax, []], minValue: [settings.minValue, []], - maxValue: [settings.maxValue, []], + maxValue: [settings.maxValue, [this.maxValueValidation()]], minMaxFont: [settings.minMaxFont, []], minMaxColor: [settings.minMaxFont.color, []], @@ -206,6 +213,18 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent }); } + private maxValueValidation(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const value: string = control.value; + if (value) { + if (value < control.parent?.get('minValue').value) { + return {maxValue: true}; + } + } + return null; + }; + } + protected prepareOutputSettings(settings) { const barColor: ColorSettings = this.digitalGaugeWidgetSettingsForm.get('barColor').value; @@ -230,10 +249,15 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent } protected validatorTriggers(): string[] { - return ['gaugeType', 'showTitle', 'showUnitTitle', 'showValue', 'showMinMax', 'showTimestamp', 'showTicks', 'animation']; + return ['gaugeType', 'showTitle', 'showUnitTitle', 'showValue', 'showMinMax', 'showTimestamp', 'showTicks', 'animation', 'minValue']; } - protected updateValidators(emitEvent: boolean) { + protected updateValidators(emitEvent: boolean, trigger: string) { + if (trigger === 'minValue') { + this.digitalGaugeWidgetSettingsForm.get('maxValue').updateValueAndValidity({emitEvent: true}); + this.digitalGaugeWidgetSettingsForm.get('maxValue').markAsTouched({onlySelf: true}); + return; + } const gaugeType: GaugeType = this.digitalGaugeWidgetSettingsForm.get('gaugeType').value; const showTitle: boolean = this.digitalGaugeWidgetSettingsForm.get('showTitle').value; const showUnitTitle: boolean = this.digitalGaugeWidgetSettingsForm.get('showUnitTitle').value; diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 33c8d25652..fe6d8b356f 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -6279,7 +6279,8 @@ "min-and-max-value": "Min and max value", "min-and-max-label": "Min and max label", "font": "Font", - "tick-width-and-color": "Tick width and color" + "tick-width-and-color": "Tick width and color", + "min-max-validation-text": "Max value must be bigger than min value" }, "gpio": { "pin": "Pin", From be482b8b3004cd68b28f80347ff7e51a06dfad8c Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Tue, 23 Jul 2024 15:30:00 +0300 Subject: [PATCH 2/2] UI: optimize import --- .../gauge/digital-simple-gauge-basic-config.component.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts index f6a74c496e..bb0eae4faf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts @@ -14,14 +14,7 @@ /// limitations under the License. /// -import { - AbstractControl, - UntypedFormBuilder, - UntypedFormGroup, - ValidationErrors, - ValidatorFn, - Validators -} from '@angular/forms'; +import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidationErrors, ValidatorFn } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';