UI: Refactoring for error

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html

@@ -41,10 +41,10 @@
       </div>
       <tb-toggle-select [(ngModel)]="dataLayerMode"
                         [ngModelOptions]="{ standalone: true }">
-        <tb-toggle-option *ngIf="trip" value="trips" [error]="mapSettingsFormGroup.get('trips').invalid" errorText="widgets.maps.overlays.required-fields">{{ 'widgets.maps.overlays.trips' | translate }}</tb-toggle-option>
-        <tb-toggle-option value="markers" [error]="mapSettingsFormGroup.get('markers').invalid" errorText="widgets.maps.overlays.required-fields">{{ 'widgets.maps.overlays.markers' | translate }}</tb-toggle-option>
-        <tb-toggle-option value="polygons" [error]="mapSettingsFormGroup.get('polygons').invalid" errorText="widgets.maps.overlays.required-fields">{{ 'widgets.maps.overlays.polygons' | translate }}</tb-toggle-option>
-        <tb-toggle-option value="circles" [error]="mapSettingsFormGroup.get('circles').invalid" errorText="widgets.maps.overlays.required-fields">{{ 'widgets.maps.overlays.circles' | translate }}</tb-toggle-option>
+        <tb-toggle-option *ngIf="trip" value="trips" [error]="mapSettingsFormGroup.get('trips').invalid ? ('common.required-fields' | translate) : null">{{ 'widgets.maps.overlays.trips' | translate }}</tb-toggle-option>
+        <tb-toggle-option value="markers" [error]="mapSettingsFormGroup.get('markers').invalid ? ('common.required-fields' | translate) : null">{{ 'widgets.maps.overlays.markers' | translate }}</tb-toggle-option>
+        <tb-toggle-option value="polygons" [error]="mapSettingsFormGroup.get('polygons').invalid ? ('common.required-fields' | translate) : null">{{ 'widgets.maps.overlays.polygons' | translate }}</tb-toggle-option>
+        <tb-toggle-option value="circles" [error]="mapSettingsFormGroup.get('circles').invalid ? ('common.required-fields' | translate) : null">{{ 'widgets.maps.overlays.circles' | translate }}</tb-toggle-option>
       </tb-toggle-select>
     </div>
     <tb-map-data-layers *ngIf="trip"

ui-ngx/src/app/shared/components/toggle-header.component.html

@@ -45,7 +45,7 @@
       {{ option.name }}
       <mat-icon matTooltipPosition="above"
                 matTooltipClass="tb-error-tooltip"
-                [matTooltip]="option.errorText | translate"
+                [matTooltip]="option.error"
                 *ngIf="option.error && value !== option.value"
                 class="tb-error tb-error-icon">
         warning

ui-ngx/src/app/shared/components/toggle-header.component.ts

@@ -46,13 +46,12 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 import { startWith, takeUntil } from 'rxjs/operators';
 import { Platform } from '@angular/cdk/platform';
 import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-toggle';
-import { isDefinedAndNotNull } from '@core/utils';
+import { isDefined } from '@core/utils';
 
 export interface ToggleHeaderOption {
   name: string;
   value: any;
-  error?: boolean;
-  errorText?: any;
+  error?: string;
 }
 
 export type ToggleHeaderAppearance = 'fill' | 'fill-invert' | 'stroked';
@@ -70,11 +69,9 @@ export class ToggleOption implements OnChanges {
 
   @Input() value: any;
 
-  @Input() error: boolean;
+  @Input() error: string;
 
-  @Input() errorText: any;
-
-  @Output() errorChange = new EventEmitter<boolean>();
+  @Output() errorChange = new EventEmitter<string>();
 
   get viewValue(): string {
     return (this._element?.nativeElement.textContent || '').trim();
@@ -85,8 +82,8 @@ export class ToggleOption implements OnChanges {
   ) {}
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['error']) {
-      if (!changes['error'].firstChange && changes['error'].currentValue !== changes['error'].previousValue) {
+    if (changes?.error) {
+      if (!changes.error.firstChange && changes.error.currentValue !== changes.error.previousValue) {
         this.errorChange.emit(this.error);
       }
     }
@@ -121,7 +118,7 @@ export abstract class _ToggleBase extends PageComponent implements AfterContentI
 
   private subscribeToToggleOptions() {
     this.toggleOptions.forEach(option => {
-      if (isDefinedAndNotNull(option.error) || isDefinedAndNotNull(option.errorText)) {
+      if (isDefined(option.error)) {
         option.errorChange.pipe(takeUntil(this._destroyed)).subscribe(() => {
           this.syncToggleHeaderOptions();
         });
@@ -137,8 +134,7 @@ export abstract class _ToggleBase extends PageComponent implements AfterContentI
           {
             name: option.viewValue,
             value: option.value,
-            error: option.error,
-            errorText: option.errorText
+            error: option.error
           }
         );
       });

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

@@ -1137,7 +1137,8 @@
             "key-required": "Key is required.",
             "key-pattern": "Key is invalid.",
             "key-max-length": "Key should be less than 256 characters."
-        }
+        },
+        "required-fields": "Missing required fields"
     },
     "content-type": {
         "json": "Json",
@@ -7980,8 +7981,7 @@
                 "trips": "Trips",
                 "markers": "Markers",
                 "polygons": "Polygons",
-                "circles": "Circles",
-                "required-fields": "Required fields are not filled in."
+                "circles": "Circles"
             },
             "data-layer": {
                 "source": "Source",