From d3e20161c96ff744357deeacdc63ae48edd3c5d6 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 2 Apr 2025 14:08:28 +0300
Subject: [PATCH 1/4] UI: Error icon with tooltip for toggle select

---
 .../common/map/map-settings.component.html    |  8 ++--
 .../components/toggle-header.component.html   | 11 ++++-
 .../components/toggle-header.component.scss   |  6 +++
 .../components/toggle-header.component.ts     | 45 ++++++++++++++++---
 .../assets/locale/locale.constant-en_US.json  |  3 +-
 5 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html
index fd3af9feb8..de3a3aa66c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html
+++ b/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">{{ 'widgets.maps.overlays.trips' | translate }}</tb-toggle-option>
-        <tb-toggle-option value="markers">{{ 'widgets.maps.overlays.markers' | translate }}</tb-toggle-option>
-        <tb-toggle-option value="polygons">{{ 'widgets.maps.overlays.polygons' | translate }}</tb-toggle-option>
-        <tb-toggle-option value="circles">{{ 'widgets.maps.overlays.circles' | translate }}</tb-toggle-option>
+        <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-select>
     </div>
     <tb-map-data-layers *ngIf="trip"
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.html b/ui-ngx/src/app/shared/components/toggle-header.component.html
index 9b3c387432..8411df8031 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.html
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.html
@@ -41,7 +41,16 @@
                            [name]="name"
                            [(ngModel)]="value"
                            (ngModelChange)="valueChange.emit(value)">
-    <mat-button-toggle *ngFor="let option of options; trackBy: trackByHeaderOption" [value]="option.value" [disabled]="disabled">{{ option.name }}</mat-button-toggle>
+    <mat-button-toggle *ngFor="let option of options; trackBy: trackByHeaderOption" [value]="option.value" [disabled]="disabled">
+      {{ option.name }}
+      <mat-icon matTooltipPosition="above"
+                matTooltipClass="tb-error-tooltip"
+                [matTooltip]="option.errorText | translate"
+                *ngIf="option.error && value !== option.value"
+                class="tb-error tb-error-icon">
+        warning
+      </mat-icon>
+    </mat-button-toggle>
   </mat-button-toggle-group>
 </div>
 <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.scss b/ui-ngx/src/app/shared/components/toggle-header.component.scss
index d8259a1a55..6055c0742c 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.scss
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.scss
@@ -43,6 +43,12 @@
   .tb-toggle-header {
     transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
   }
+
+  .tb-error-icon {
+    width: 12px;
+    height: 12px;
+    font-size: 12px;
+  }
 }
 
 :host ::ng-deep {
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.ts b/ui-ngx/src/app/shared/components/toggle-header.component.ts
index eb860398db..4d3e56bd0f 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.ts
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.ts
@@ -16,7 +16,8 @@
 
 import {
   AfterContentChecked,
-  AfterContentInit, AfterViewChecked,
+  AfterContentInit,
+  AfterViewChecked,
   AfterViewInit,
   ChangeDetectorRef,
   Component,
@@ -25,11 +26,14 @@ import {
   ElementRef,
   EventEmitter,
   HostBinding,
-  Input, NgZone,
+  Input,
+  NgZone,
+  OnChanges,
   OnDestroy,
   OnInit,
   Output,
   QueryList,
+  SimpleChanges,
   ViewChild
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
@@ -42,10 +46,13 @@ 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';
 
 export interface ToggleHeaderOption {
   name: string;
   value: any;
+  error?: boolean;
+  errorText?: any;
 }
 
 export type ToggleHeaderAppearance = 'fill' | 'fill-invert' | 'stroked';
@@ -59,10 +66,16 @@ export type ScrollDirection = 'after' | 'before';
   }
 )
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class ToggleOption {
+export class ToggleOption implements OnChanges {
 
   @Input() value: any;
 
+  @Input() error: boolean;
+
+  @Input() errorText: any;
+
+  @Output() errorChange = new EventEmitter<boolean>();
+
   get viewValue(): string {
     return (this._element?.nativeElement.textContent || '').trim();
   }
@@ -70,6 +83,14 @@ export class ToggleOption {
   constructor(
     private _element: ElementRef<HTMLElement>
   ) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['error']) {
+      if (!changes['error'].firstChange && changes['error'].currentValue !== changes['error'].previousValue) {
+        this.errorChange.emit(this.error);
+      }
+    }
+  }
 }
 
 @Directive()
@@ -88,6 +109,7 @@ export abstract class _ToggleBase extends PageComponent implements AfterContentI
 
   ngAfterContentInit(): void {
     this.toggleOptions.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
+      this.subscribeToToggleOptions();
       this.syncToggleHeaderOptions();
     });
   }
@@ -97,13 +119,26 @@ export abstract class _ToggleBase extends PageComponent implements AfterContentI
     this._destroyed.complete();
   }
 
+  private subscribeToToggleOptions() {
+    this.toggleOptions.forEach(option => {
+      if (isDefinedAndNotNull(option.error) || isDefinedAndNotNull(option.errorText)) {
+        option.errorChange.pipe(takeUntil(this._destroyed)).subscribe(() => {
+          this.syncToggleHeaderOptions();
+        });
+      }
+    });
+  }
+
   private syncToggleHeaderOptions() {
     if (this.toggleOptions?.length) {
       this.options.length = 0;
       this.toggleOptions.forEach(option => {
         this.options.push(
-          { name: option.viewValue,
-            value: option.value
+          {
+            name: option.viewValue,
+            value: option.value,
+            error: option.error,
+            errorText: option.errorText
           }
         );
       });
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 7af62838cf..7c5eae3f75 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -7980,7 +7980,8 @@
                 "trips": "Trips",
                 "markers": "Markers",
                 "polygons": "Polygons",
-                "circles": "Circles"
+                "circles": "Circles",
+                "required-fields": "Required fields are not filled in."
             },
             "data-layer": {
                 "source": "Source",

From 98c91187ae5b8a21598e63cd5ceb271757e322b3 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 2 Apr 2025 15:46:29 +0300
Subject: [PATCH 2/4] UI: Refactoring for error

---
 .../common/map/map-settings.component.html    |  8 ++++----
 .../components/toggle-header.component.html   |  2 +-
 .../components/toggle-header.component.ts     | 20 ++++++++-----------
 .../assets/locale/locale.constant-en_US.json  |  6 +++---
 4 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html
index de3a3aa66c..fe2afa3b19 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html
+++ b/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"
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.html b/ui-ngx/src/app/shared/components/toggle-header.component.html
index 8411df8031..1340ad7782 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.html
+++ b/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
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.ts b/ui-ngx/src/app/shared/components/toggle-header.component.ts
index 4d3e56bd0f..3058ad285d 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.ts
+++ b/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
           }
         );
       });
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 7c5eae3f75..608bb0917a 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/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",

From 40179f0010935c483e76092629f29025aad257b0 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 2 Apr 2025 15:59:04 +0300
Subject: [PATCH 3/4] UI: Border error for toggle button

---
 .../src/app/shared/components/toggle-header.component.html  | 2 +-
 .../src/app/shared/components/toggle-header.component.scss  | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.html b/ui-ngx/src/app/shared/components/toggle-header.component.html
index 1340ad7782..253749d7b9 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.html
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.html
@@ -41,7 +41,7 @@
                            [name]="name"
                            [(ngModel)]="value"
                            (ngModelChange)="valueChange.emit(value)">
-    <mat-button-toggle *ngFor="let option of options; trackBy: trackByHeaderOption" [value]="option.value" [disabled]="disabled">
+    <mat-button-toggle *ngFor="let option of options; trackBy: trackByHeaderOption" [value]="option.value" [disabled]="disabled" [class.tb-toggle-button-error]="option.error && value !== option.value">
       {{ option.name }}
       <mat-icon matTooltipPosition="above"
                 matTooltipClass="tb-error-tooltip"
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.scss b/ui-ngx/src/app/shared/components/toggle-header.component.scss
index 6055c0742c..bf57b1cff1 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.scss
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.scss
@@ -85,6 +85,12 @@
         border-radius: 100px;
       }
     }
+    .tb-toggle-button-error {
+      .mat-button-toggle-button {
+        border: 1px solid rgb(221, 44, 0);
+        border-radius: 20px;
+      }
+    }
     .mat-button-toggle + .mat-button-toggle {
       border-left: none;
     }

From fb8c349904b91ad37c70f12a93158b565fbaafd7 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 2 Apr 2025 16:25:26 +0300
Subject: [PATCH 4/4] UI: Refactoring

---
 .../components/toggle-header.component.html   |  6 ++--
 .../components/toggle-header.component.ts     | 30 +++++++------------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.html b/ui-ngx/src/app/shared/components/toggle-header.component.html
index 253749d7b9..fdfabd08b5 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.html
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.html
@@ -41,12 +41,12 @@
                            [name]="name"
                            [(ngModel)]="value"
                            (ngModelChange)="valueChange.emit(value)">
-    <mat-button-toggle *ngFor="let option of options; trackBy: trackByHeaderOption" [value]="option.value" [disabled]="disabled" [class.tb-toggle-button-error]="option.error && value !== option.value">
+    <mat-button-toggle *ngFor="let option of options; trackBy: trackByHeaderOption" [value]="option.value" [disabled]="disabled" [class.tb-toggle-button-error]="(option.error$ | async) && value !== option.value">
       {{ option.name }}
       <mat-icon matTooltipPosition="above"
                 matTooltipClass="tb-error-tooltip"
-                [matTooltip]="option.error"
-                *ngIf="option.error && value !== option.value"
+                [matTooltip]="(option.error$ | async)"
+                *ngIf="(option.error$ | async) && value !== option.value"
                 class="tb-error tb-error-icon">
         warning
       </mat-icon>
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.ts b/ui-ngx/src/app/shared/components/toggle-header.component.ts
index 3058ad285d..9add580a73 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.ts
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.ts
@@ -39,19 +39,18 @@ import {
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { BehaviorSubject, Subject, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable, ReplaySubject, Subject, Subscription } from 'rxjs';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { MediaBreakpoints } from '@shared/models/constants';
 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 { isDefined } from '@core/utils';
 
 export interface ToggleHeaderOption {
   name: string;
   value: any;
-  error?: string;
+  error$?: Observable<string>;
 }
 
 export type ToggleHeaderAppearance = 'fill' | 'fill-invert' | 'stroked';
@@ -65,13 +64,13 @@ export type ScrollDirection = 'after' | 'before';
   }
 )
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class ToggleOption implements OnChanges {
+export class ToggleOption implements OnChanges, OnDestroy {
 
   @Input() value: any;
 
   @Input() error: string;
 
-  @Output() errorChange = new EventEmitter<string>();
+  currentError = new ReplaySubject<string>(1);
 
   get viewValue(): string {
     return (this._element?.nativeElement.textContent || '').trim();
@@ -83,11 +82,15 @@ export class ToggleOption implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes?.error) {
-      if (!changes.error.firstChange && changes.error.currentValue !== changes.error.previousValue) {
-        this.errorChange.emit(this.error);
+      if (changes.error.currentValue !== changes.error.previousValue) {
+        this.currentError.next(this.error);
       }
     }
   }
+
+  ngOnDestroy() {
+    this.currentError.complete();
+  }
 }
 
 @Directive()
@@ -106,7 +109,6 @@ export abstract class _ToggleBase extends PageComponent implements AfterContentI
 
   ngAfterContentInit(): void {
     this.toggleOptions.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
-      this.subscribeToToggleOptions();
       this.syncToggleHeaderOptions();
     });
   }
@@ -116,16 +118,6 @@ export abstract class _ToggleBase extends PageComponent implements AfterContentI
     this._destroyed.complete();
   }
 
-  private subscribeToToggleOptions() {
-    this.toggleOptions.forEach(option => {
-      if (isDefined(option.error)) {
-        option.errorChange.pipe(takeUntil(this._destroyed)).subscribe(() => {
-          this.syncToggleHeaderOptions();
-        });
-      }
-    });
-  }
-
   private syncToggleHeaderOptions() {
     if (this.toggleOptions?.length) {
       this.options.length = 0;
@@ -134,7 +126,7 @@ export abstract class _ToggleBase extends PageComponent implements AfterContentI
           {
             name: option.viewValue,
             value: option.value,
-            error: option.error
+            error$: option.currentError.asObservable()
           }
         );
       });