Merge pull request #11267 from ArtemDzhereleiko/AD/imp/digital-gauge-min-max-validation

Validation min max value for digital gauge settings

ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html

@@ -76,6 +76,14 @@
         <div class="tb-small-label" translate>widgets.gauge.max-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="maxValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="'widgets.gauge.min-max-validation-text' | translate"
+                    *ngIf="simpleGaugeWidgetConfigForm.get('maxValue').hasError('maxValue')"
+                    class="material-icons tb-suffix-show-always tb-error">
+            warning
+          </mat-icon>
         </mat-form-field>
       </div>
     </div>

ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { UntypedFormBuilder, UntypedFormGroup } 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';
@@ -109,7 +109,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 +182,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) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html

@@ -65,6 +65,14 @@
         <div class="tb-small-label" translate>widgets.gauge.max-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="maxValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="'widgets.gauge.min-max-validation-text' | translate"
+                    *ngIf="digitalGaugeWidgetSettingsForm.get('maxValue').hasError('maxValue')"
+                    class="material-icons tb-suffix-show-always tb-error">
+            warning
+          </mat-icon>
         </mat-form-field>
       </div>
     </div>

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;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -6282,7 +6282,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",