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

Fixed empty "Step increment" field and adaptive view in Pagination settings
1 year ago · 0c8f43eaa6
10 changed files with 39 additions and 25 deletions
--- 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 !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
--- 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[] {
--- 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 !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
--- 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[] {
--- 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 !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
--- 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 {
--- 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 !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
--- 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[] {
--- 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);
    }
--- a/ui-ngx/tailwind.config.js
+++ b/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',