From f0e5042fdd75c32f40e3dc3d243edd7b4922ff00 Mon Sep 17 00:00:00 2001 From: Tarnavskiy Date: Wed, 26 Feb 2025 18:44:25 +0200 Subject: [PATCH] UI-redesign and additional corrections --- ui-ngx/src/app/core/utils.ts | 12 --- .../alarm/alarms-table-widget.component.ts | 21 +++--- .../entity/entities-table-widget.component.ts | 21 +++--- .../lib/rpc/persistent-table.component.ts | 21 +++--- ...larms-table-widget-settings.component.html | 62 ++++++++++----- .../alarms-table-widget-settings.component.ts | 49 ++++++------ ...eries-table-widget-settings.component.html | 62 ++++++++++----- ...eseries-table-widget-settings.component.ts | 48 ++++++------ ...stent-table-widget-settings.component.html | 75 +++++++++++++------ ...sistent-table-widget-settings.component.ts | 44 +++++------ ...ities-table-widget-settings.component.html | 62 ++++++++++----- ...ntities-table-widget-settings.component.ts | 59 +++++++-------- .../widget/lib/table-widget.models.ts | 16 +++- .../lib/timeseries-table-widget.component.ts | 21 +++--- .../assets/locale/locale.constant-en_US.json | 5 +- 15 files changed, 336 insertions(+), 242 deletions(-) diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index d139fe58bb..ac353e57b0 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -927,15 +927,3 @@ export const unwrapModule = (module: any) : any => { return module; } }; - -export function buildPageStepSizeValues(formGroup: UntypedFormGroup, pageSteps: Array): void { - const pageStepCount = formGroup.get('pageStepCount')?.value; - const pageStepSize = formGroup.get('pageStepSize')?.value; - pageSteps.length = 0; - if (isDefinedAndNotNull(pageStepCount) && pageStepCount > 0 && pageStepCount <= 100 && - isDefinedAndNotNull(pageStepSize) && pageStepSize > 0) { - for (let i = 1; i <= pageStepCount; i++) { - pageSteps.push(pageStepSize * i); - } - } -} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts index 7455e08b15..6eb7195b0b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts @@ -392,25 +392,24 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, this.rowStylesInfo = getRowStyleInfo(this.ctx, this.settings, 'alarm, ctx'); const pageSize = this.settings.defaultPageSize; - let pageStepSize = this.settings.pageStepSize; + let pageStepIncrement = this.settings.pageStepIncrement; let pageStepCount = this.settings.pageStepCount; + if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) { this.defaultPageSize = pageSize; } - if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) { - if (!this.defaultPageSize) { - this.defaultPageSize = pageStepSize; - } - } else { - if (!this.defaultPageSize) { - this.defaultPageSize = 10; - } - pageStepSize = this.defaultPageSize; + + if (!this.defaultPageSize) { + this.defaultPageSize = pageStepIncrement ?? 10; + } + + if (!isDefinedAndNotNull(pageStepIncrement) || !isDefinedAndNotNull(pageStepCount)) { + pageStepIncrement = this.defaultPageSize; pageStepCount = 3; } for (let i = 1; i <= pageStepCount; i++) { - this.pageSizeOptions.push(pageStepSize * i); + this.pageSizeOptions.push(pageStepIncrement * i); } this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : 1024; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts index e9e5c12f18..e029451a28 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts @@ -311,25 +311,24 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni this.rowStylesInfo = getRowStyleInfo(this.ctx, this.settings, 'entity, ctx'); const pageSize = this.settings.defaultPageSize; - let pageStepSize = this.settings.pageStepSize; + let pageStepIncrement = this.settings.pageStepIncrement; let pageStepCount = this.settings.pageStepCount; + if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) { this.defaultPageSize = pageSize; } - if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) { - if (!this.defaultPageSize) { - this.defaultPageSize = pageStepSize; - } - } else { - if (!this.defaultPageSize) { - this.defaultPageSize = 10; - } - pageStepSize = this.defaultPageSize; + + if (!this.defaultPageSize) { + this.defaultPageSize = pageStepIncrement ?? 10; + } + + if (!isDefinedAndNotNull(pageStepIncrement) || !isDefinedAndNotNull(pageStepCount)) { + pageStepIncrement = this.defaultPageSize; pageStepCount = 3; } for (let i = 1; i <= pageStepCount; i++) { - this.pageSizeOptions.push(pageStepSize * i); + this.pageSizeOptions.push(pageStepIncrement * i); } this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : 1024; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts index b795e927f6..4fae519634 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts @@ -207,25 +207,24 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O this.displayedColumns = [...this.displayTableColumns]; const pageSize = this.settings.defaultPageSize; - let pageStepSize = this.settings.pageStepSize; + let pageStepIncrement = this.settings.pageStepIncrement; let pageStepCount = this.settings.pageStepCount; + if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) { this.defaultPageSize = pageSize; } - if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) { - if (!this.defaultPageSize) { - this.defaultPageSize = pageStepSize; - } - } else { - if (!this.defaultPageSize) { - this.defaultPageSize = 10; - } - pageStepSize = this.defaultPageSize; + + if (!this.defaultPageSize) { + this.defaultPageSize = pageStepIncrement ?? 10; + } + + if (!isDefinedAndNotNull(pageStepIncrement) || !isDefinedAndNotNull(pageStepCount)) { + pageStepIncrement = this.defaultPageSize; pageStepCount = 3; } for (let i = 1; i <= pageStepCount; i++) { - this.pageSizeOptions.push(pageStepSize * i); + this.pageSizeOptions.push(pageStepIncrement * i); } if (this.settings.defaultSortOrder && this.settings.defaultSortOrder.length) { 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 fe4db349ca..ab4bad3706 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,29 +95,53 @@ {{ 'widgets.table.display-pagination' | translate }}
-
widgets.table.page-step-size
- - - +
{{ 'widgets.table.page-step-settings' | translate }}
+
+
widgets.table.page-step-increment
+ + + + warning + + + +
widgets.table.page-step-count
+ + + + warning + + +
-
widgets.table.page-step-count
- - +
widgets.table.default-page-size
+ + + + {{ size }} + +
- - widgets.table.default-page-size - - - {{ size }} - - -
widgets.table.rows
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 1d6b8ab1c1..7a7b97dc18 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 @@ -19,7 +19,7 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.m import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; -import { buildPageStepSizeValues, isDefinedAndNotNull } from '@core/utils'; +import { buildPageStepSizeValues } from '@home/components/widget/lib/table-widget.models'; @Component({ selector: 'tb-alarms-table-widget-settings', @@ -58,7 +58,7 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent displayActivity: true, displayPagination: true, defaultPageSize: 10, - pageStepSize: null, + pageStepIncrement: null, pageStepCount: 3, defaultSortOrder: '-createdTime', useRowStyleFunction: false, @@ -84,47 +84,46 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent displayActivity: [settings.displayActivity, []], displayPagination: [settings.displayPagination, []], defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]], - pageStepCount: [isDefinedAndNotNull(settings.pageStepCount) ? settings.pageStepCount : 3, - [Validators.min(1), Validators.max(100), Validators.required, Validators.pattern(/^\d*$/)]], - pageStepSize: [isDefinedAndNotNull(settings.pageStepSize) ? settings.pageStepSize : settings.defaultPageSize, + 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*$/)]], defaultSortOrder: [settings.defaultSortOrder, []], useRowStyleFunction: [settings.useRowStyleFunction, []], rowStyleFunction: [settings.rowStyleFunction, [Validators.required]] }); - buildPageStepSizeValues(this.alarmsTableWidgetSettingsForm, this.pageStepSizeValues); - } - - public onPaginationSettingsChange(): void { - this.alarmsTableWidgetSettingsForm.get('defaultPageSize').reset(); - buildPageStepSizeValues(this.alarmsTableWidgetSettingsForm, this.pageStepSizeValues); + this.pageStepSizeValues = buildPageStepSizeValues(this.alarmsTableWidgetSettingsForm.get('pageStepCount').value, + this.alarmsTableWidgetSettingsForm.get('pageStepIncrement').value); } protected validatorTriggers(): string[] { - return ['useRowStyleFunction', 'displayPagination']; + return ['useRowStyleFunction', 'displayPagination', 'pageStepCount', + 'pageStepIncrement']; } - protected updateValidators(emitEvent: boolean) { + protected updateValidators(emitEvent: boolean, trigger: string) { + if (trigger === 'pageStepCount' || trigger === 'pageStepIncrement') { + this.alarmsTableWidgetSettingsForm.get('defaultPageSize').reset(); + this.pageStepSizeValues = buildPageStepSizeValues(this.alarmsTableWidgetSettingsForm.get('pageStepCount').value, + this.alarmsTableWidgetSettingsForm.get('pageStepIncrement').value); + return; + } const useRowStyleFunction: boolean = this.alarmsTableWidgetSettingsForm.get('useRowStyleFunction').value; const displayPagination: boolean = this.alarmsTableWidgetSettingsForm.get('displayPagination').value; if (useRowStyleFunction) { - this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').enable(); + this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').enable({emitEvent}); } else { - this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').disable(); + this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').disable({emitEvent}); } if (displayPagination) { - this.alarmsTableWidgetSettingsForm.get('defaultPageSize').enable(); - this.alarmsTableWidgetSettingsForm.get('pageStepCount').enable(); - this.alarmsTableWidgetSettingsForm.get('pageStepSize').enable(); + this.alarmsTableWidgetSettingsForm.get('defaultPageSize').enable({emitEvent}); + this.alarmsTableWidgetSettingsForm.get('pageStepCount').enable({emitEvent: false}); + this.alarmsTableWidgetSettingsForm.get('pageStepIncrement').enable({emitEvent: false}); } else { - this.alarmsTableWidgetSettingsForm.get('defaultPageSize').disable(); - this.alarmsTableWidgetSettingsForm.get('pageStepCount').disable(); - this.alarmsTableWidgetSettingsForm.get('pageStepSize').disable(); + this.alarmsTableWidgetSettingsForm.get('defaultPageSize').disable({emitEvent}); + this.alarmsTableWidgetSettingsForm.get('pageStepCount').disable({emitEvent: false}); + this.alarmsTableWidgetSettingsForm.get('pageStepIncrement').disable({emitEvent: false}); } - this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent}); - this.alarmsTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent}); - this.alarmsTableWidgetSettingsForm.get('pageStepCount').updateValueAndValidity({emitEvent}); - this.alarmsTableWidgetSettingsForm.get('pageStepSize').updateValueAndValidity({emitEvent}); } } 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 540d3348d4..befe55b1f5 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,29 +62,53 @@ {{ 'widgets.table.display-pagination' | translate }}
-
widgets.table.page-step-size
- - - +
{{ 'widgets.table.page-step-settings' | translate }}
+
+
widgets.table.page-step-increment
+ + + + warning + + + +
widgets.table.page-step-count
+ + + + warning + + +
-
widgets.table.page-step-count
- - +
widgets.table.default-page-size
+ + + + {{ size }} + +
- - widgets.table.default-page-size - - - {{ size }} - - -
widgets.table.table-tabs
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 fdc28f0f30..1b9761814e 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 @@ -19,7 +19,7 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.m import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; -import { buildPageStepSizeValues, isDefinedAndNotNull } from '@core/utils'; +import { buildPageStepSizeValues } from '@home/components/widget/lib/table-widget.models'; @Component({ selector: 'tb-timeseries-table-widget-settings', @@ -53,7 +53,7 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon displayPagination: true, useEntityLabel: false, defaultPageSize: 10, - pageStepSize: null, + pageStepIncrement: null, pageStepCount: 3, hideEmptyLines: false, disableStickyHeader: false, @@ -81,48 +81,46 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon displayPagination: [settings.displayPagination, []], useEntityLabel: [settings.useEntityLabel, []], defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]], - pageStepCount: [isDefinedAndNotNull(settings.pageStepCount) ? settings.pageStepCount : 3, - [Validators.min(1), Validators.max(100), Validators.required, Validators.pattern(/^\d*$/)]], - pageStepSize: [isDefinedAndNotNull(settings.pageStepSize) ? settings.pageStepSize : settings.defaultPageSize, + 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*$/)]], hideEmptyLines: [settings.hideEmptyLines, []], disableStickyHeader: [settings.disableStickyHeader, []], useRowStyleFunction: [settings.useRowStyleFunction, []], rowStyleFunction: [settings.rowStyleFunction, [Validators.required]] }); - buildPageStepSizeValues(this.timeseriesTableWidgetSettingsForm, this.pageStepSizeValues); - } - - public onPaginationSettingsChange(): void { - this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').reset(); - buildPageStepSizeValues(this.timeseriesTableWidgetSettingsForm, this.pageStepSizeValues); + this.pageStepSizeValues = buildPageStepSizeValues(this.timeseriesTableWidgetSettingsForm.get('pageStepCount').value, + this.timeseriesTableWidgetSettingsForm.get('pageStepIncrement').value); } protected validatorTriggers(): string[] { - return ['useRowStyleFunction', 'displayPagination']; + return ['useRowStyleFunction', 'displayPagination', 'pageStepCount', 'pageStepIncrement']; } - protected updateValidators(emitEvent: boolean) { + protected updateValidators(emitEvent: boolean, trigger: string) { + if (trigger === 'pageStepCount' || trigger === 'pageStepIncrement') { + this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').reset(); + this.pageStepSizeValues = buildPageStepSizeValues(this.timeseriesTableWidgetSettingsForm.get('pageStepCount').value, + this.timeseriesTableWidgetSettingsForm.get('pageStepIncrement').value); + return; + } const useRowStyleFunction: boolean = this.timeseriesTableWidgetSettingsForm.get('useRowStyleFunction').value; const displayPagination: boolean = this.timeseriesTableWidgetSettingsForm.get('displayPagination').value; if (useRowStyleFunction) { - this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').enable(); + this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').enable({emitEvent}); } else { - this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').disable(); + this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').disable({emitEvent}); } if (displayPagination) { - this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').enable(); - this.timeseriesTableWidgetSettingsForm.get('pageStepCount').enable(); - this.timeseriesTableWidgetSettingsForm.get('pageStepSize').enable(); + this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').enable({emitEvent}); + this.timeseriesTableWidgetSettingsForm.get('pageStepCount').enable({emitEvent: false}); + this.timeseriesTableWidgetSettingsForm.get('pageStepIncrement').enable({emitEvent: false}); } else { - this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').disable(); - this.timeseriesTableWidgetSettingsForm.get('pageStepCount').disable(); - this.timeseriesTableWidgetSettingsForm.get('pageStepSize').disable(); + this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').disable({emitEvent}); + this.timeseriesTableWidgetSettingsForm.get('pageStepCount').disable({emitEvent: false}); + this.timeseriesTableWidgetSettingsForm.get('pageStepIncrement').disable({emitEvent: false}); } - this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent}); - this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent}); - this.timeseriesTableWidgetSettingsForm.get('pageStepCount').updateValueAndValidity({emitEvent}); - this.timeseriesTableWidgetSettingsForm.get('pageStepSize').updateValueAndValidity({emitEvent}); } } 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 46782364d8..e69ef101fb 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 @@ -43,31 +43,60 @@ {{ 'widgets.persistent-table.allow-delete-request' | translate }} -
- +
+
widgets.table.pagination
+ {{ 'widgets.table.display-pagination' | translate }} - - widgets.table.default-page-size - - - {{ size }} - - - -
-
- - widgets.table.page-step-size - - - - widgets.table.page-step-count - - -
+
+
{{ 'widgets.table.page-step-settings' | translate }}
+
+
widgets.table.page-step-increment
+ + + + warning + + + +
widgets.table.page-step-count
+ + + + warning + + +
+
+
+
widgets.table.default-page-size
+ + + + {{ size }} + + + +
+
widgets.table.default-sort-order 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 51cfa5652f..2c46642b8d 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 @@ -27,7 +27,8 @@ import { MatChipInputEvent, MatChipGrid } from '@angular/material/chips'; import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; import { map, mergeMap, share, startWith } from 'rxjs/operators'; import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes'; -import { buildPageStepSizeValues, isDefinedAndNotNull } from '@core/utils'; +import { isDefinedAndNotNull } from '@core/utils'; +import { buildPageStepSizeValues } from '@home/components/widget/lib/table-widget.models'; interface DisplayColumn { name: string; @@ -97,7 +98,7 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon displayPagination: true, defaultPageSize: 10, - pageStepSize: null, + pageStepIncrement: null, pageStepCount: 3, defaultSortOrder: '-createdTime', @@ -115,19 +116,15 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon displayDetails: [settings.displayDetails, []], displayPagination: [settings.displayPagination, []], defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]], - pageStepCount: [isDefinedAndNotNull(settings.pageStepCount) ? settings.pageStepCount : 3, - [Validators.min(1), Validators.max(100), Validators.required, Validators.pattern(/^\d*$/)]], - pageStepSize: [isDefinedAndNotNull(settings.pageStepSize) ? settings.pageStepSize : settings.defaultPageSize, + 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*$/)]], defaultSortOrder: [settings.defaultSortOrder, []], displayColumns: [settings.displayColumns, [Validators.required]] }); - buildPageStepSizeValues(this.persistentTableWidgetSettingsForm, this.pageStepSizeValues); - } - - public onPaginationSettingsChange(): void { - this.persistentTableWidgetSettingsForm.get('defaultPageSize').reset(); - buildPageStepSizeValues(this.persistentTableWidgetSettingsForm, this.pageStepSizeValues); + this.pageStepSizeValues = buildPageStepSizeValues(this.persistentTableWidgetSettingsForm.get('pageStepCount').value, + this.persistentTableWidgetSettingsForm.get('pageStepIncrement').value); } public validateSettings(): boolean { @@ -137,23 +134,26 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon } protected validatorTriggers(): string[] { - return ['displayPagination']; + return ['displayPagination', 'pageStepCount', 'pageStepIncrement']; } - protected updateValidators(emitEvent: boolean) { + protected updateValidators(emitEvent: boolean, trigger: string) { + if (trigger === 'pageStepCount' || trigger === 'pageStepIncrement') { + this.persistentTableWidgetSettingsForm.get('defaultPageSize').reset(); + this.pageStepSizeValues = buildPageStepSizeValues(this.persistentTableWidgetSettingsForm.get('pageStepCount').value, + this.persistentTableWidgetSettingsForm.get('pageStepIncrement').value); + return; + } const displayPagination: boolean = this.persistentTableWidgetSettingsForm.get('displayPagination').value; if (displayPagination) { - this.persistentTableWidgetSettingsForm.get('defaultPageSize').enable(); - this.persistentTableWidgetSettingsForm.get('pageStepCount').enable(); - this.persistentTableWidgetSettingsForm.get('pageStepSize').enable(); + this.persistentTableWidgetSettingsForm.get('defaultPageSize').enable({emitEvent}); + this.persistentTableWidgetSettingsForm.get('pageStepCount').enable({emitEvent: false}); + this.persistentTableWidgetSettingsForm.get('pageStepIncrement').enable({emitEvent: false}); } else { - this.persistentTableWidgetSettingsForm.get('defaultPageSize').disable(); - this.persistentTableWidgetSettingsForm.get('pageStepCount').disable(); - this.persistentTableWidgetSettingsForm.get('pageStepSize').disable(); + this.persistentTableWidgetSettingsForm.get('defaultPageSize').disable({emitEvent}); + this.persistentTableWidgetSettingsForm.get('pageStepCount').disable({emitEvent: false}); + this.persistentTableWidgetSettingsForm.get('pageStepIncrement').disable({emitEvent: false}); } - this.persistentTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent}); - this.persistentTableWidgetSettingsForm.get('pageStepCount').updateValueAndValidity({emitEvent}); - this.persistentTableWidgetSettingsForm.get('pageStepSize').updateValueAndValidity({emitEvent}); } private fetchColumns(searchText?: string): Observable> { 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 04c1f71c52..ecd4b1d025 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,29 +92,53 @@ {{ 'widgets.table.display-pagination' | translate }}
-
widgets.table.page-step-size
- - - +
{{ 'widgets.table.page-step-settings' | translate }}
+
+
widgets.table.page-step-increment
+ + + + warning + + + +
widgets.table.page-step-count
+ + + + warning + + +
-
widgets.table.page-step-count
- - +
widgets.table.default-page-size
+ + + + {{ size }} + +
- - widgets.table.default-page-size - - - {{ size }} - - -
widgets.table.rows
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 a2fc3ef9c7..fe13d3d007 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 @@ -19,7 +19,7 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.m import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; -import { buildPageStepSizeValues, isDefinedAndNotNull } from '@core/utils'; +import { buildPageStepSizeValues } from '@home/components/widget/lib/table-widget.models'; @Component({ selector: 'tb-entities-table-widget-settings', @@ -56,7 +56,7 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen displayEntityType: true, displayPagination: true, defaultPageSize: 10, - pageStepSize: null, + pageStepIncrement: null, pageStepCount: 3, defaultSortOrder: 'entityName', useRowStyleFunction: false, @@ -80,61 +80,58 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen displayEntityType: [settings.displayEntityType, []], displayPagination: [settings.displayPagination, []], defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]], - pageStepCount: [isDefinedAndNotNull(settings.pageStepCount) ? settings.pageStepCount : 3, - [Validators.min(1), Validators.max(100), Validators.required, Validators.pattern(/^\d*$/)]], - pageStepSize: [isDefinedAndNotNull(settings.pageStepSize) ? settings.pageStepSize : settings.defaultPageSize, + 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*$/)]], defaultSortOrder: [settings.defaultSortOrder, []], useRowStyleFunction: [settings.useRowStyleFunction, []], rowStyleFunction: [settings.rowStyleFunction, [Validators.required]] }); - buildPageStepSizeValues(this.entitiesTableWidgetSettingsForm, this.pageStepSizeValues); - } - - public onPaginationSettingsChange(): void { - this.entitiesTableWidgetSettingsForm.get('defaultPageSize').reset(); - buildPageStepSizeValues(this.entitiesTableWidgetSettingsForm, this.pageStepSizeValues); + this.pageStepSizeValues = buildPageStepSizeValues(this.entitiesTableWidgetSettingsForm.get('pageStepCount').value, + this.entitiesTableWidgetSettingsForm.get('pageStepIncrement').value); } protected validatorTriggers(): string[] { - return ['useRowStyleFunction', 'displayPagination', 'displayEntityName', 'displayEntityLabel']; + return ['useRowStyleFunction', 'displayPagination', 'displayEntityName', 'displayEntityLabel', 'pageStepCount', + 'pageStepIncrement']; } - protected updateValidators(emitEvent: boolean) { + protected updateValidators(emitEvent: boolean, trigger: string) { + if (trigger === 'pageStepCount' || trigger === 'pageStepIncrement') { + this.entitiesTableWidgetSettingsForm.get('defaultPageSize').reset(); + this.pageStepSizeValues = buildPageStepSizeValues(this.entitiesTableWidgetSettingsForm.get('pageStepCount').value, + this.entitiesTableWidgetSettingsForm.get('pageStepIncrement').value); + return; + } const useRowStyleFunction: boolean = this.entitiesTableWidgetSettingsForm.get('useRowStyleFunction').value; const displayPagination: boolean = this.entitiesTableWidgetSettingsForm.get('displayPagination').value; const displayEntityName: boolean = this.entitiesTableWidgetSettingsForm.get('displayEntityName').value; const displayEntityLabel: boolean = this.entitiesTableWidgetSettingsForm.get('displayEntityLabel').value; if (useRowStyleFunction) { - this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').enable(); + this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').enable({emitEvent}); } else { - this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').disable(); + this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').disable({emitEvent}); } if (displayPagination) { - this.entitiesTableWidgetSettingsForm.get('defaultPageSize').enable(); - this.entitiesTableWidgetSettingsForm.get('pageStepCount').enable(); - this.entitiesTableWidgetSettingsForm.get('pageStepSize').enable(); + this.entitiesTableWidgetSettingsForm.get('defaultPageSize').enable({emitEvent}); + this.entitiesTableWidgetSettingsForm.get('pageStepCount').enable({emitEvent: false}); + this.entitiesTableWidgetSettingsForm.get('pageStepIncrement').enable({emitEvent: false}); } else { - this.entitiesTableWidgetSettingsForm.get('defaultPageSize').disable(); - this.entitiesTableWidgetSettingsForm.get('pageStepCount').disable(); - this.entitiesTableWidgetSettingsForm.get('pageStepSize').disable(); + this.entitiesTableWidgetSettingsForm.get('defaultPageSize').disable({emitEvent}); + this.entitiesTableWidgetSettingsForm.get('pageStepCount').disable({emitEvent: false}); + this.entitiesTableWidgetSettingsForm.get('pageStepIncrement').disable({emitEvent: false}); } if (displayEntityName) { - this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').enable(); + this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').enable({emitEvent}); } else { - this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').disable(); + this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').disable({emitEvent}); } if (displayEntityLabel) { - this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').enable(); + this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').enable({emitEvent}); } else { - this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').disable(); + this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').disable({emitEvent}); } - this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent}); - this.entitiesTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent}); - this.entitiesTableWidgetSettingsForm.get('pageStepCount').updateValueAndValidity({emitEvent}); - this.entitiesTableWidgetSettingsForm.get('pageStepSize').updateValueAndValidity({emitEvent}); - this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').updateValueAndValidity({emitEvent}); - this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').updateValueAndValidity({emitEvent}); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts index c4bdc91fa4..90d4589e8a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts @@ -16,7 +16,7 @@ import { EntityId } from '@shared/models/id/entity-id'; import { DataKey, FormattedData, WidgetActionDescriptor, WidgetConfig } from '@shared/models/widget.models'; -import { getDescendantProp, isDefined, isNotEmptyStr } from '@core/utils'; +import { getDescendantProp, isDefined, isDefinedAndNotNull, isNotEmptyStr } from '@core/utils'; import { AlarmDataInfo, alarmFields } from '@shared/models/alarm.models'; import tinycolor from 'tinycolor2'; import { Direction } from '@shared/models/page/sort-order'; @@ -34,6 +34,7 @@ import { } from '@shared/models/js-function.models'; import { forkJoin, Observable, of, ReplaySubject } from 'rxjs'; import { catchError, map, share } from 'rxjs/operators'; +import { UntypedFormGroup } from '@angular/forms'; type ColumnVisibilityOptions = 'visible' | 'hidden' | 'hidden-mobile'; @@ -47,7 +48,7 @@ export interface TableWidgetSettings { enableStickyHeader: boolean; displayPagination: boolean; defaultPageSize: number; - pageStepSize: number; + pageStepIncrement: number; pageStepCount: number; useRowStyleFunction: boolean; rowStyleFunction?: TbFunction; @@ -560,3 +561,14 @@ export function getHeaderTitle(dataKey: DataKey, keySettings: TableWidgetDataKey } return dataKey.label; } + +export function buildPageStepSizeValues(pageStepCount: number, pageStepIncrement: number): Array { + const pageSteps: Array = []; + if (isDefinedAndNotNull(pageStepCount) && pageStepCount > 0 && pageStepCount <= 100 && + isDefinedAndNotNull(pageStepIncrement) && pageStepIncrement > 0) { + for (let i = 1; i <= pageStepCount; i++) { + pageSteps.push(pageStepIncrement * i); + } + } + return pageSteps; +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts index f9d02e27b5..539ba9229a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts @@ -352,25 +352,24 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI this.rowStylesInfo = getRowStyleInfo(this.ctx, this.settings, 'rowData, ctx'); const pageSize = this.settings.defaultPageSize; - let pageStepSize = this.settings.pageStepSize; + let pageStepIncrement = this.settings.pageStepIncrement; let pageStepCount = this.settings.pageStepCount; + if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) { this.defaultPageSize = pageSize; } - if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) { - if (!this.defaultPageSize) { - this.defaultPageSize = pageStepSize; - } - } else { - if (!this.defaultPageSize) { - this.defaultPageSize = 10; - } - pageStepSize = this.defaultPageSize; + + if (!this.defaultPageSize) { + this.defaultPageSize = pageStepIncrement ?? 10; + } + + if (!isDefinedAndNotNull(pageStepIncrement) || !isDefinedAndNotNull(pageStepCount)) { + pageStepIncrement = this.defaultPageSize; pageStepCount = 3; } for (let i = 1; i <= pageStepCount; i++) { - this.pageSizeOptions.push(pageStepSize * i); + this.pageSizeOptions.push(pageStepIncrement * i); } this.noDataDisplayMessageText = 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 d258b27d7f..3aa6092476 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -8111,8 +8111,11 @@ "display-timestamp": "Timestamp", "display-pagination": "Display pagination", "default-page-size": "Default page size", + "page-step-settings": "Page step settings", "page-step-count": "Number of steps", - "page-step-size": "Page size increment", + "page-step-increment": "Step increment", + "page-step-count-format-message": "Should be an integer value, in the range from 1 to 100.", + "page-step-increment-format-message": "Should be an integer value, greater or equal to 1.", "use-entity-label-tab-name": "Use entity label in tab name", "hide-empty-lines": "Hide empty lines", "row-style": "Row style",