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",