From 7c14eaaaac8e8b4fa577ea2d2a69c81594fe17b7 Mon Sep 17 00:00:00 2001 From: Tarnavskiy Date: Tue, 25 Feb 2025 13:49:41 +0200 Subject: [PATCH 1/4] PROD-5643: Pagination settings improvements --- ui-ngx/src/app/core/utils.ts | 13 ++++++++++ .../alarm/alarms-table-widget.component.ts | 22 +++++++++++++--- .../entity/entities-table-widget.component.ts | 24 +++++++++++++++--- .../lib/rpc/persistent-table.component.ts | 25 ++++++++++++++++--- ...larms-table-widget-settings.component.html | 22 ++++++++++++++-- .../alarms-table-widget-settings.component.ts | 20 +++++++++++++++ ...eries-table-widget-settings.component.html | 22 ++++++++++++++-- ...eseries-table-widget-settings.component.ts | 20 +++++++++++++++ ...stent-table-widget-settings.component.html | 18 ++++++++++++- ...sistent-table-widget-settings.component.ts | 21 ++++++++++++++++ ...ities-table-widget-settings.component.html | 22 ++++++++++++++-- ...ntities-table-widget-settings.component.ts | 20 +++++++++++++++ .../widget/lib/table-widget.models.ts | 2 ++ .../lib/timeseries-table-widget.component.ts | 22 +++++++++++++--- .../assets/locale/locale.constant-en_US.json | 2 ++ 15 files changed, 254 insertions(+), 21 deletions(-) diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index fed2de125f..d139fe58bb 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -31,6 +31,7 @@ import { isNotEmptyTbFunction, TbFunction } from '@shared/models/js-function.models'; +import { UntypedFormGroup } from '@angular/forms'; const varsRegex = /\${([^}]*)}/g; @@ -926,3 +927,15 @@ 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 2b7bd7b2da..7455e08b15 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 @@ -185,7 +185,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, public enableStickyHeader = true; public enableStickyAction = false; public showCellActionsMenu = true; - public pageSizeOptions; + public pageSizeOptions = []; public pageLink: AlarmDataPageLink; public sortOrderProperty: string; public textSearchMode = false; @@ -213,7 +213,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, private allowClear = true; public allowAssign = true; - private defaultPageSize = 10; + private defaultPageSize; private defaultSortOrder = '-' + alarmFields.createdTime.value; private contentsInfo: {[key: string]: CellContentInfo} = {}; @@ -392,10 +392,26 @@ 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 pageStepCount = this.settings.pageStepCount; if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) { this.defaultPageSize = pageSize; } - this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3]; + if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) { + if (!this.defaultPageSize) { + this.defaultPageSize = pageStepSize; + } + } else { + if (!this.defaultPageSize) { + this.defaultPageSize = 10; + } + pageStepSize = this.defaultPageSize; + pageStepCount = 3; + } + + for (let i = 1; i <= pageStepCount; i++) { + this.pageSizeOptions.push(pageStepSize * i); + } this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : 1024; const alarmFilter = this.entityService.resolveAlarmFilter(this.widgetConfig.alarmFilterConfig, false); 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 e54153e360..e9e5c12f18 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 @@ -42,7 +42,7 @@ import { import { IWidgetSubscription } from '@core/api/widget-api.models'; import { UtilsService } from '@core/services/utils.service'; import { TranslateService } from '@ngx-translate/core'; -import { deepClone, hashCode, isDefined, isNumber, isObject, isUndefined } from '@core/utils'; +import { deepClone, hashCode, isDefined, isDefinedAndNotNull, isNumber, isObject, isUndefined } from '@core/utils'; import cssjs from '@core/css/css'; import { CollectionViewer, DataSource } from '@angular/cdk/collections'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; @@ -139,7 +139,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni public enableStickyHeader = true; public enableStickyAction = true; public showCellActionsMenu = true; - public pageSizeOptions; + public pageSizeOptions = []; public pageLink: EntityDataPageLink; public sortOrderProperty: string; public textSearchMode = false; @@ -161,7 +161,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni private widgetResize$: ResizeObserver; private destroy$ = new Subject(); - private defaultPageSize = 10; + private defaultPageSize; private defaultSortOrder = 'entityName'; private contentsInfo: {[key: string]: CellContentInfo} = {}; @@ -311,10 +311,26 @@ 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 pageStepCount = this.settings.pageStepCount; if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) { this.defaultPageSize = pageSize; } - this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3]; + if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) { + if (!this.defaultPageSize) { + this.defaultPageSize = pageStepSize; + } + } else { + if (!this.defaultPageSize) { + this.defaultPageSize = 10; + } + pageStepSize = this.defaultPageSize; + pageStepCount = 3; + } + + for (let i = 1; i <= pageStepCount; i++) { + this.pageSizeOptions.push(pageStepSize * i); + } this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : 1024; this.noDataDisplayMessageText = 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 ba12957779..b795e927f6 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 @@ -43,7 +43,7 @@ import { import cssjs from '@core/css/css'; import { UtilsService } from '@core/services/utils.service'; import { TranslateService } from '@ngx-translate/core'; -import { hashCode, isDefined, isNumber, parseHttpErrorMessage } from '@core/utils'; +import { hashCode, isDefined, isDefinedAndNotNull, isNumber, parseHttpErrorMessage } from '@core/utils'; import { CollectionViewer, DataSource } from '@angular/cdk/collections'; import { emptyPageData, PageData } from '@shared/models/page/page-data'; import { @@ -114,7 +114,7 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O private subscription: IWidgetSubscription; private enableFilterAction = true; private allowSendRequest = true; - private defaultPageSize = 10; + private defaultPageSize; private defaultSortOrder = '-createdTime'; private rpcStatusFilter: RpcStatus; private displayDetails = true; @@ -130,7 +130,7 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O public enableStickyHeader = true; public enableStickyAction = true; public pageLink: PageLink; - public pageSizeOptions; + public pageSizeOptions = []; public actionCellButtonAction: PersistentTableWidgetActionDescriptor[] = []; public displayedColumns: string[]; public hidePageSize = false; @@ -207,10 +207,27 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O this.displayedColumns = [...this.displayTableColumns]; const pageSize = this.settings.defaultPageSize; + let pageStepSize = this.settings.pageStepSize; + let pageStepCount = this.settings.pageStepCount; if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) { this.defaultPageSize = pageSize; } - this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3]; + if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) { + if (!this.defaultPageSize) { + this.defaultPageSize = pageStepSize; + } + } else { + if (!this.defaultPageSize) { + this.defaultPageSize = 10; + } + pageStepSize = this.defaultPageSize; + pageStepCount = 3; + } + + for (let i = 1; i <= pageStepCount; i++) { + this.pageSizeOptions.push(pageStepSize * i); + } + if (this.settings.defaultSortOrder && this.settings.defaultSortOrder.length) { this.defaultSortOrder = this.settings.defaultSortOrder; } 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 b0ecdbeb74..fe4db349ca 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,11 +95,29 @@ {{ 'widgets.table.display-pagination' | translate }}
-
widgets.table.default-page-size
+
widgets.table.page-step-size
- +
+
+
widgets.table.page-step-count
+ + + +
+ + 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 e3606b271a..1d6b8ab1c1 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,6 +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'; @Component({ selector: 'tb-alarms-table-widget-settings', @@ -28,6 +29,7 @@ import { AppState } from '@core/core.state'; export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent { alarmsTableWidgetSettingsForm: UntypedFormGroup; + pageStepSizeValues = []; constructor(protected store: Store, private fb: UntypedFormBuilder) { @@ -56,6 +58,8 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent displayActivity: true, displayPagination: true, defaultPageSize: 10, + pageStepSize: null, + pageStepCount: 3, defaultSortOrder: '-createdTime', useRowStyleFunction: false, rowStyleFunction: '' @@ -80,10 +84,20 @@ 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, + [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); } protected validatorTriggers(): string[] { @@ -100,11 +114,17 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent } if (displayPagination) { this.alarmsTableWidgetSettingsForm.get('defaultPageSize').enable(); + this.alarmsTableWidgetSettingsForm.get('pageStepCount').enable(); + this.alarmsTableWidgetSettingsForm.get('pageStepSize').enable(); } else { this.alarmsTableWidgetSettingsForm.get('defaultPageSize').disable(); + this.alarmsTableWidgetSettingsForm.get('pageStepCount').disable(); + this.alarmsTableWidgetSettingsForm.get('pageStepSize').disable(); } 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 70cc2b0224..540d3348d4 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,11 +62,29 @@ {{ 'widgets.table.display-pagination' | translate }}
-
widgets.table.default-page-size
+
widgets.table.page-step-size
- +
+
+
widgets.table.page-step-count
+ + + +
+ + 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 e1f2975d92..fdc28f0f30 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,6 +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'; @Component({ selector: 'tb-timeseries-table-widget-settings', @@ -28,6 +29,7 @@ import { AppState } from '@core/core.state'; export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsComponent { timeseriesTableWidgetSettingsForm: UntypedFormGroup; + pageStepSizeValues = []; constructor(protected store: Store, private fb: UntypedFormBuilder) { @@ -51,6 +53,8 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon displayPagination: true, useEntityLabel: false, defaultPageSize: 10, + pageStepSize: null, + pageStepCount: 3, hideEmptyLines: false, disableStickyHeader: false, useRowStyleFunction: false, @@ -77,11 +81,21 @@ 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, + [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); } protected validatorTriggers(): string[] { @@ -98,11 +112,17 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon } if (displayPagination) { this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').enable(); + this.timeseriesTableWidgetSettingsForm.get('pageStepCount').enable(); + this.timeseriesTableWidgetSettingsForm.get('pageStepSize').enable(); } else { this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').disable(); + this.timeseriesTableWidgetSettingsForm.get('pageStepCount').disable(); + this.timeseriesTableWidgetSettingsForm.get('pageStepSize').disable(); } 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 229cb21adc..46782364d8 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,23 @@ widgets.table.default-page-size - + + + {{ size }} + + + + +
+ + widgets.table.page-step-size + + + + widgets.table.page-step-count +
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 d4022f00e0..51cfa5652f 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,6 +27,7 @@ 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'; interface DisplayColumn { name: string; @@ -57,6 +58,8 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon persistentTableWidgetSettingsForm: UntypedFormGroup; + pageStepSizeValues = []; + filteredDisplayColumns: Observable>; columnSearchText = ''; @@ -94,6 +97,8 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon displayPagination: true, defaultPageSize: 10, + pageStepSize: null, + pageStepCount: 3, defaultSortOrder: '-createdTime', displayColumns: ['rpcId', 'messageType', 'status', 'method', 'createdTime', 'expirationTime'] @@ -110,9 +115,19 @@ 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, + [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); } public validateSettings(): boolean { @@ -129,10 +144,16 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon 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(); } else { this.persistentTableWidgetSettingsForm.get('defaultPageSize').disable(); + this.persistentTableWidgetSettingsForm.get('pageStepCount').disable(); + this.persistentTableWidgetSettingsForm.get('pageStepSize').disable(); } 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 c3b5629a16..04c1f71c52 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,11 +92,29 @@ {{ 'widgets.table.display-pagination' | translate }}
-
widgets.table.default-page-size
+
widgets.table.page-step-size
- +
+
+
widgets.table.page-step-count
+ + + +
+ + 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 892684cc7d..a2fc3ef9c7 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,6 +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'; @Component({ selector: 'tb-entities-table-widget-settings', @@ -28,6 +29,7 @@ import { AppState } from '@core/core.state'; export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponent { entitiesTableWidgetSettingsForm: UntypedFormGroup; + pageStepSizeValues = []; constructor(protected store: Store, private fb: UntypedFormBuilder) { @@ -54,6 +56,8 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen displayEntityType: true, displayPagination: true, defaultPageSize: 10, + pageStepSize: null, + pageStepCount: 3, defaultSortOrder: 'entityName', useRowStyleFunction: false, rowStyleFunction: '' @@ -76,10 +80,20 @@ 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, + [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); } protected validatorTriggers(): string[] { @@ -98,8 +112,12 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen } if (displayPagination) { this.entitiesTableWidgetSettingsForm.get('defaultPageSize').enable(); + this.entitiesTableWidgetSettingsForm.get('pageStepCount').enable(); + this.entitiesTableWidgetSettingsForm.get('pageStepSize').enable(); } else { this.entitiesTableWidgetSettingsForm.get('defaultPageSize').disable(); + this.entitiesTableWidgetSettingsForm.get('pageStepCount').disable(); + this.entitiesTableWidgetSettingsForm.get('pageStepSize').disable(); } if (displayEntityName) { this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').enable(); @@ -113,6 +131,8 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen } 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 696570a04a..c4bdc91fa4 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 @@ -47,6 +47,8 @@ export interface TableWidgetSettings { enableStickyHeader: boolean; displayPagination: boolean; defaultPageSize: number; + pageStepSize: number; + pageStepCount: number; useRowStyleFunction: boolean; rowStyleFunction?: TbFunction; reserveSpaceForHiddenAction?: boolean; 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 7122bfc583..f9d02e27b5 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 @@ -173,7 +173,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI public enableStickyHeader = true; public enableStickyAction = true; public showCellActionsMenu = true; - public pageSizeOptions; + public pageSizeOptions = []; public textSearchMode = false; public hidePageSize = false; public sources: TimeseriesTableSource[]; @@ -192,7 +192,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI private latestData: Array; private datasources: Array; - private defaultPageSize = 10; + private defaultPageSize; private defaultSortOrder = '-0'; private hideEmptyLines = false; public showTimestamp = true; @@ -352,10 +352,26 @@ 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 pageStepCount = this.settings.pageStepCount; if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) { this.defaultPageSize = pageSize; } - this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3]; + if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) { + if (!this.defaultPageSize) { + this.defaultPageSize = pageStepSize; + } + } else { + if (!this.defaultPageSize) { + this.defaultPageSize = 10; + } + pageStepSize = this.defaultPageSize; + pageStepCount = 3; + } + + for (let i = 1; i <= pageStepCount; i++) { + this.pageSizeOptions.push(pageStepSize * i); + } this.noDataDisplayMessageText = noDataMessage(this.widgetConfig.noDataDisplayMessage, 'widget.no-data-found', this.utils, this.translate); 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 18801bda2c..d258b27d7f 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -8111,6 +8111,8 @@ "display-timestamp": "Timestamp", "display-pagination": "Display pagination", "default-page-size": "Default page size", + "page-step-count": "Number of steps", + "page-step-size": "Page size increment", "use-entity-label-tab-name": "Use entity label in tab name", "hide-empty-lines": "Hide empty lines", "row-style": "Row style", From f0e5042fdd75c32f40e3dc3d243edd7b4922ff00 Mon Sep 17 00:00:00 2001 From: Tarnavskiy Date: Wed, 26 Feb 2025 18:44:25 +0200 Subject: [PATCH 2/4] 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", From e32b58769c7503c6619171e80475d6e18a740bf1 Mon Sep 17 00:00:00 2001 From: Tarnavskiy Date: Wed, 26 Feb 2025 18:51:24 +0200 Subject: [PATCH 3/4] Removed unused imports --- ui-ngx/src/app/core/utils.ts | 1 - .../control/persistent-table-widget-settings.component.ts | 1 - .../modules/home/components/widget/lib/table-widget.models.ts | 1 - 3 files changed, 3 deletions(-) diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index ac353e57b0..fed2de125f 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -31,7 +31,6 @@ import { isNotEmptyTbFunction, TbFunction } from '@shared/models/js-function.models'; -import { UntypedFormGroup } from '@angular/forms'; const varsRegex = /\${([^}]*)}/g; 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 2c46642b8d..6714e3d912 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,6 @@ 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 { isDefinedAndNotNull } from '@core/utils'; import { buildPageStepSizeValues } from '@home/components/widget/lib/table-widget.models'; interface DisplayColumn { 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 90d4589e8a..fb791b8258 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 @@ -34,7 +34,6 @@ 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'; From f11ea0ba3d09718c124aef77874809f338647eff Mon Sep 17 00:00:00 2001 From: Tarnavskiy Date: Thu, 27 Feb 2025 16:41:21 +0200 Subject: [PATCH 4/4] Code formatting --- .../settings/alarm/alarms-table-widget-settings.component.ts | 3 +-- .../control/persistent-table-widget-settings.component.html | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) 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 7a7b97dc18..51452fb9b9 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 @@ -97,8 +97,7 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent } protected validatorTriggers(): string[] { - return ['useRowStyleFunction', 'displayPagination', 'pageStepCount', - 'pageStepIncrement']; + return ['useRowStyleFunction', 'displayPagination', 'pageStepCount', 'pageStepIncrement']; } protected updateValidators(emitEvent: boolean, trigger: 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 e69ef101fb..addf275f4f 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 @@ -45,7 +45,7 @@
widgets.table.pagination
- + {{ 'widgets.table.display-pagination' | translate }}