Merge pull request #13060 from Terny22/bugfix/empty-step-increment

Fixed empty "Step increment" field and adaptive view in Pagination settings

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 !min-w-30">{{ '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

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,
+      pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
-        [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[] {

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 !min-w-30">{{ '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

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,
+      pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
-        [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[] {

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 !min-w-30">{{ '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

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,
+      pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
-        [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 {

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 !min-w-30">{{ '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

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,
+      pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
-        [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[] {

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);
     }

ui-ngx/tailwind.config.js

@@ -102,6 +102,7 @@ module.exports = {
       minWidth: {
         '7.5': '1.875rem',
         '25': '6.25rem',
+        '30': '7.5rem',
         '37.5': '9.375rem',
         '62.5': '15.625rem',
         '72.5': '18.125rem',