From e6bffae9c09fbcadc5b177bc06d7fabe0c918ec6 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 6 Sep 2024 17:42:46 +0300
Subject: [PATCH] UI: Improved show error in layout settings

---
 .../dashboard-settings-dialog.component.html  | 85 +++++++------------
 1 file changed, 32 insertions(+), 53 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
index 0a1733e851..5137f6128d 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
@@ -119,20 +119,15 @@
         </div>
         <div class="tb-form-row space-between">
           <div translate>dashboard.columns-count</div>
-          <mat-form-field *ngIf="!isScada()"
-                          appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic">
+          <mat-form-field *ngIf="!isScada()" appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic"
+                          matTooltipPosition="above"
+                          matTooltipClass="tb-error-tooltip"
+                          [matTooltipDisabled]="!(gridSettingsFormGroup.get('columns').invalid && gridSettingsFormGroup.get('columns').touched)"
+                          [matTooltip]="(gridSettingsFormGroup.get('columns').hasError('required') ? 'dashboard.columns-count-required' :
+                                     (gridSettingsFormGroup.get('columns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate">
             <input matInput formControlName="columns" type="number" min="10" max="1008" step="1"
                    required
                    placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="(gridSettingsFormGroup.get('columns').hasError('required') ? 'dashboard.columns-count-required' :
-                                     (gridSettingsFormGroup.get('columns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate"
-                      *ngIf="gridSettingsFormGroup.get('columns').invalid && gridSettingsFormGroup.get('columns').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
           </mat-form-field>
           <mat-form-field *ngIf="isScada()"
                           class="medium-width" appearance="outline" subscriptSizing="dynamic">
@@ -145,37 +140,29 @@
         </div>
         <div class="tb-form-row space-between">
           <div translate>dashboard.min-layout-width</div>
-          <mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic">
+          <mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
+                          matTooltipPosition="above"
+                          matTooltipClass="tb-error-tooltip"
+                          [matTooltipDisabled]="!(gridSettingsFormGroup.get('minColumns').invalid && gridSettingsFormGroup.get('minColumns').touched)"
+                          [matTooltip]="(gridSettingsFormGroup.get('minColumns').hasError('required') ? 'dashboard.columns-count-required' :
+                                     (gridSettingsFormGroup.get('minColumns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate">
             <input matInput formControlName="minColumns" type="number" min="10" max="1008" step="1"
                    required
                    placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="(gridSettingsFormGroup.get('minColumns').hasError('required') ? 'dashboard.columns-count-required' :
-                                     (gridSettingsFormGroup.get('minColumns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate"
-                      *ngIf="gridSettingsFormGroup.get('minColumns').invalid && gridSettingsFormGroup.get('minColumns').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
             <span translate matSuffix>dashboard.columns-suffix</span>
           </mat-form-field>
         </div>
         <div *ngIf="!isScada()" class="tb-form-row space-between">
           <div translate>dashboard.widgets-margins</div>
-          <mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic">
+          <mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic"
+                          matTooltipPosition="above"
+                          matTooltipClass="tb-error-tooltip"
+                          [matTooltipDisabled]="!(gridSettingsFormGroup.get('margin').invalid && gridSettingsFormGroup.get('margin').touched)"
+                          [matTooltip]="(gridSettingsFormGroup.get('margin').hasError('required') ? 'dashboard.margin-required' :
+                                     (gridSettingsFormGroup.get('margin').hasError('min') ? 'dashboard.min-margin-message' : 'dashboard.max-margin-message')) | translate">
             <input matInput formControlName="margin" type="number" min="0" max="50" step="any"
                    required
                    placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="(gridSettingsFormGroup.get('margin').hasError('required') ? 'dashboard.margin-required' :
-                                     (gridSettingsFormGroup.get('margin').hasError('min') ? 'dashboard.min-margin-message' : 'dashboard.max-margin-message')) | translate"
-                      *ngIf="gridSettingsFormGroup.get('margin').invalid && gridSettingsFormGroup.get('margin').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
           </mat-form-field>
         </div>
         <div *ngIf="!isScada()" class="tb-form-row">
@@ -190,20 +177,16 @@
         </div>
         <div *ngIf="isDefaultLayout && !isDefaultBreakpoint" class="tb-form-row space-between">
           <div translate>dashboard.row-height</div>
-          <mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic">
+          <mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
+                          matTooltipPosition="above"
+                          matTooltipClass="tb-error-tooltip"
+                          [matTooltipDisabled]="!(gridSettingsFormGroup.get('rowHeight').invalid && gridSettingsFormGroup.get('rowHeight').touched)"
+                          [matTooltip]="(gridSettingsFormGroup.get('rowHeight').hasError('required') ? 'dashboard.row-height-required' :
+                                     (gridSettingsFormGroup.get('rowHeight').hasError('min') ?
+                                       'dashboard.min-row-height-message' : 'dashboard.max-row-height-message')) | translate">
             <input matInput formControlName="rowHeight" type="number" min="5" max="200" step="any"
                    required
                    placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="(gridSettingsFormGroup.get('rowHeight').hasError('required') ? 'dashboard.row-height-required' :
-                                     (gridSettingsFormGroup.get('rowHeight').hasError('min') ?
-                                       'dashboard.min-row-height-message' : 'dashboard.max-row-height-message')) | translate"
-                      *ngIf="gridSettingsFormGroup.get('rowHeight').invalid && gridSettingsFormGroup.get('rowHeight').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
             <span matSuffix>px</span>
           </mat-form-field>
         </div>
@@ -245,20 +228,16 @@
         </div>
         <div *ngIf="!isScada()" class="tb-form-row space-between">
           <div translate>dashboard.mobile-row-height</div>
-          <mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic">
+          <mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
+                          matTooltipPosition="above"
+                          matTooltipClass="tb-error-tooltip"
+                          [matTooltipDisabled]="!(gridSettingsFormGroup.get('mobileRowHeight').invalid && gridSettingsFormGroup.get('mobileRowHeight').touched)"
+                          [matTooltip]="(gridSettingsFormGroup.get('mobileRowHeight').hasError('required') ? 'dashboard.mobile-row-height-required' :
+                                     (gridSettingsFormGroup.get('mobileRowHeight').hasError('min') ?
+                                       'dashboard.min-mobile-row-height-message' : 'dashboard.max-mobile-row-height-message')) | translate">
             <input matInput formControlName="mobileRowHeight" type="number" min="5" max="200" step="any"
                    required
                    placeholder="{{ 'widget-config.set' | translate }}">
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="(gridSettingsFormGroup.get('mobileRowHeight').hasError('required') ? 'dashboard.mobile-row-height-required' :
-                                     (gridSettingsFormGroup.get('mobileRowHeight').hasError('min') ?
-                                       'dashboard.min-mobile-row-height-message' : 'dashboard.max-mobile-row-height-message')) | translate"
-                      *ngIf="gridSettingsFormGroup.get('mobileRowHeight').invalid && gridSettingsFormGroup.get('mobileRowHeight').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
             <span matSuffix>px</span>
           </mat-form-field>
         </div>