From 665871c1d09ec03a465aeeb4f2798d82c36574c5 Mon Sep 17 00:00:00 2001
From: Tarnavskiy <starnavskiy@thingsboard.io>
Date: Fri, 28 Mar 2025 16:20:29 +0200
Subject: [PATCH] PROD-5908: Fixed bug with empty step-increment field. Fixed
 adaptation for small screen view

---
 .../alarm/alarms-table-widget-settings.component.html |  4 ++--
 .../alarm/alarms-table-widget-settings.component.ts   | 11 +++++++----
 .../timeseries-table-widget-settings.component.html   |  4 ++--
 .../timeseries-table-widget-settings.component.ts     | 11 +++++++----
 .../persistent-table-widget-settings.component.html   |  4 ++--
 .../persistent-table-widget-settings.component.ts     | 11 +++++++----
 .../entities-table-widget-settings.component.html     |  4 ++--
 .../entities-table-widget-settings.component.ts       | 11 +++++++----
 ui-ngx/src/form.scss                                  |  3 ++-
 9 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
index ba613ddbfe..eec36b90fa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
@@ -95,7 +95,7 @@
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
     <div class="tb-form-row space-between column-xs">
-      <div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
+      <div class="fixed-title-width" style="min-width: 120px;">{{ 'widgets.table.page-step-settings' | translate }}</div>
       <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.table.page-step-increment</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@@ -113,7 +113,7 @@
             warning
           </mat-icon>
         </mat-form-field>
-        <mat-divider vertical></mat-divider>
+        <mat-divider vertical class="xs:hidden"></mat-divider>
         <div class="tb-small-label" translate>widgets.table.page-step-count</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts
index 72194dcb22..876c56799a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts
@@ -66,6 +66,12 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
     };
   }
 
+  protected prepareInputSettings(settings: WidgetSettings): WidgetSettings {
+    settings.pageStepIncrement = settings.pageStepIncrement ?? settings.defaultPageSize;
+    this.pageStepSizeValues = buildPageStepSizeValues(settings.pageStepCount, settings.pageStepIncrement);
+    return settings;
+  }
+
   protected onSettingsSet(settings: WidgetSettings) {
     this.alarmsTableWidgetSettingsForm = this.fb.group({
       alarmsTitle: [settings.alarmsTitle, []],
@@ -86,14 +92,11 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
       defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
       pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
         Validators.required, Validators.pattern(/^\d*$/)]],
-      pageStepIncrement: [settings.pageStepIncrement ?? settings.defaultPageSize,
-        [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
       defaultSortOrder: [settings.defaultSortOrder, []],
       useRowStyleFunction: [settings.useRowStyleFunction, []],
       rowStyleFunction: [settings.rowStyleFunction, [Validators.required]]
     });
-    this.pageStepSizeValues = buildPageStepSizeValues(this.alarmsTableWidgetSettingsForm.get('pageStepCount').value,
-      this.alarmsTableWidgetSettingsForm.get('pageStepIncrement').value);
   }
 
   protected validatorTriggers(): string[] {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
index 61a688f36f..4f260c350a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
@@ -62,7 +62,7 @@
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
     <div class="tb-form-row space-between column-xs">
-      <div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
+      <div class="fixed-title-width" style="min-width: 120px;">{{ 'widgets.table.page-step-settings' | translate }}</div>
       <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.table.page-step-increment</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@@ -80,7 +80,7 @@
             warning
           </mat-icon>
         </mat-form-field>
-        <mat-divider vertical></mat-divider>
+        <mat-divider vertical class="xs:hidden"></mat-divider>
         <div class="tb-small-label" translate>widgets.table.page-step-count</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts
index 7826f48dec..05d49aca26 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts
@@ -62,6 +62,12 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
     };
   }
 
+  protected prepareInputSettings(settings: WidgetSettings): WidgetSettings {
+    settings.pageStepIncrement = settings.pageStepIncrement ?? settings.defaultPageSize;
+    this.pageStepSizeValues = buildPageStepSizeValues(settings.pageStepCount, settings.pageStepIncrement);
+    return settings;
+  }
+
   protected onSettingsSet(settings: WidgetSettings) {
     // For backward compatibility
     const dateFormat = settings.dateFormat;
@@ -83,15 +89,12 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
       defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
       pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
         Validators.required, Validators.pattern(/^\d*$/)]],
-      pageStepIncrement: [settings.pageStepIncrement ?? settings.defaultPageSize,
-        [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
       hideEmptyLines: [settings.hideEmptyLines, []],
       disableStickyHeader: [settings.disableStickyHeader, []],
       useRowStyleFunction: [settings.useRowStyleFunction, []],
       rowStyleFunction: [settings.rowStyleFunction, [Validators.required]]
     });
-    this.pageStepSizeValues = buildPageStepSizeValues(this.timeseriesTableWidgetSettingsForm.get('pageStepCount').value,
-      this.timeseriesTableWidgetSettingsForm.get('pageStepIncrement').value);
   }
 
   protected validatorTriggers(): string[] {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
index b3e0f21b83..0b32a225d4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
@@ -49,7 +49,7 @@
           {{ 'widgets.table.display-pagination' | translate }}
         </mat-slide-toggle>
         <div class="tb-form-row space-between column-xs">
-          <div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
+          <div class="fixed-title-width" style="min-width: 120px;">{{ 'widgets.table.page-step-settings' | translate }}</div>
           <div class="flex flex-row items-center justify-start gap-2">
             <div class="tb-small-label" translate>widgets.table.page-step-increment</div>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@@ -67,7 +67,7 @@
                 warning
               </mat-icon>
             </mat-form-field>
-            <mat-divider vertical></mat-divider>
+            <mat-divider vertical class="xs:hidden"></mat-divider>
             <div class="tb-small-label" translate>widgets.table.page-step-count</div>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.ts
index e1cb4f12f4..6401d01eb1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.ts
@@ -105,6 +105,12 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon
     };
   }
 
+  protected prepareInputSettings(settings: WidgetSettings): WidgetSettings {
+    settings.pageStepIncrement = settings.pageStepIncrement ?? settings.defaultPageSize;
+    this.pageStepSizeValues = buildPageStepSizeValues(settings.pageStepCount, settings.pageStepIncrement);
+    return settings;
+  }
+
   protected onSettingsSet(settings: WidgetSettings) {
     this.persistentTableWidgetSettingsForm = this.fb.group({
       enableFilter: [settings.enableFilter, []],
@@ -117,13 +123,10 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon
       defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
       pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
         Validators.required, Validators.pattern(/^\d*$/)]],
-      pageStepIncrement: [settings.pageStepIncrement ?? settings.defaultPageSize,
-        [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
       defaultSortOrder: [settings.defaultSortOrder, []],
       displayColumns: [settings.displayColumns, [Validators.required]]
     });
-    this.pageStepSizeValues = buildPageStepSizeValues(this.persistentTableWidgetSettingsForm.get('pageStepCount').value,
-      this.persistentTableWidgetSettingsForm.get('pageStepIncrement').value);
   }
 
   public validateSettings(): boolean {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
index b0be9fca0f..02f4be6b3d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
@@ -92,7 +92,7 @@
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
     <div class="tb-form-row space-between column-xs">
-      <div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
+      <div class="fixed-title-width" style="min-width: 120px;">{{ 'widgets.table.page-step-settings' | translate }}</div>
       <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.table.page-step-increment</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@@ -110,7 +110,7 @@
             warning
           </mat-icon>
         </mat-form-field>
-        <mat-divider vertical></mat-divider>
+        <mat-divider vertical class="xs:hidden"></mat-divider>
         <div class="tb-small-label" translate>widgets.table.page-step-count</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.ts
index c1bc327c3c..e7f20de9f1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.ts
@@ -64,6 +64,12 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
     };
   }
 
+  protected prepareInputSettings(settings: WidgetSettings): WidgetSettings {
+    settings.pageStepIncrement = settings.pageStepIncrement ?? settings.defaultPageSize;
+    this.pageStepSizeValues = buildPageStepSizeValues(settings.pageStepCount, settings.pageStepIncrement);
+    return settings;
+  }
+
   protected onSettingsSet(settings: WidgetSettings) {
     this.entitiesTableWidgetSettingsForm = this.fb.group({
       entitiesTitle: [settings.entitiesTitle, []],
@@ -82,14 +88,11 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
       defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
       pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
         Validators.required, Validators.pattern(/^\d*$/)]],
-      pageStepIncrement: [settings.pageStepIncrement ?? settings.defaultPageSize,
-        [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
       defaultSortOrder: [settings.defaultSortOrder, []],
       useRowStyleFunction: [settings.useRowStyleFunction, []],
       rowStyleFunction: [settings.rowStyleFunction, [Validators.required]]
     });
-    this.pageStepSizeValues = buildPageStepSizeValues(this.entitiesTableWidgetSettingsForm.get('pageStepCount').value,
-      this.entitiesTableWidgetSettingsForm.get('pageStepIncrement').value);
   }
 
   protected validatorTriggers(): string[] {
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index 8f3c7f0cd0..e516810895 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -360,9 +360,10 @@
       }
     }
     .tb-small-label {
+      display: flex;
+      align-items: center;
       height: 40px;
       font-size: 14px;
-      line-height: 40px;
       letter-spacing: 0.2px;
       color: rgba(0, 0, 0, 0.38);
     }