dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PROD-5643: Pagination settings improvements

Browse Source
This commit is contained in:
Tarnavskiy 2025-02-25 13:49:41 +02:00
parent 6ff0d7247b
commit 7c14eaaaac
15 changed files with 254 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui-ngx/src/app/core/utils.ts
View File

@ -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<number>): 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);
}
}
}

22
ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts
View File

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

24
ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts
View File

@ -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<void>();
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 =

25
ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
View File

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

22
ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
View File

@ -95,11 +95,29 @@
{{ 'widgets.table.display-pagination' | translate }}
</mat-slide-toggle>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.table.default-page-size</div>
<div translate>widgets.table.page-step-size</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
<input matInput formControlName="pageStepSize" type="number" min="1" step="1" required
(change)="onPaginationSettingsChange()"
placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.table.page-step-count</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
(change)="onPaginationSettingsChange()"
placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<mat-form-field class="flex-1" subscriptSizing="dynamic">
<mat-label translate>widgets.table.default-page-size</mat-label>
<mat-select formControlName="defaultPageSize">
<mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
{{ size }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="tb-form-panel tb-slide-toggle">
<div class="tb-form-panel-title" translate>widgets.table.rows</div>

20
ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts
View File

@ -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<AppState>,
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});
}
}

22
ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
View File

@ -62,11 +62,29 @@
{{ 'widgets.table.display-pagination' | translate }}
</mat-slide-toggle>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.table.default-page-size</div>
<div translate>widgets.table.page-step-size</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
<input matInput formControlName="pageStepSize" type="number" min="1" step="1" required
(change)="onPaginationSettingsChange()"
placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.table.page-step-count</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
(change)="onPaginationSettingsChange()"
placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<mat-form-field class="flex-1" subscriptSizing="dynamic">
<mat-label translate>widgets.table.default-page-size</mat-label>
<mat-select formControlName="defaultPageSize">
<mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
{{ size }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.table.table-tabs</div>

20
ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts
View File

@ -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<AppState>,
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});
}
}

18
ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
View File

@ -49,7 +49,23 @@
</mat-slide-toggle>
<mat-form-field class="mat-block flex-1">
<mat-label translate>widgets.table.default-page-size</mat-label>
<input matInput type="number" min="1" step="1" formControlName="defaultPageSize">
<mat-select formControlName="defaultPageSize">
<mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
{{ size }}
</mat-option>
</mat-select>
</mat-form-field>
</section>
<section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
<mat-form-field class="mat-block flex-1">
<mat-label translate>widgets.table.page-step-size</mat-label>
<input matInput formControlName="pageStepSize" type="number" min="1" step="1" required
(change)="onPaginationSettingsChange()">
</mat-form-field>
<mat-form-field class="mat-block flex-1">
<mat-label translate>widgets.table.page-step-count</mat-label>
<input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
(change)="onPaginationSettingsChange()">
</mat-form-field>
</section>
<mat-form-field class="mat-block flex-1">

21
ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.ts
View File

@ -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<Array<DisplayColumn>>;
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<Array<DisplayColumn>> {

22
ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
View File

@ -92,11 +92,29 @@
{{ 'widgets.table.display-pagination' | translate }}
</mat-slide-toggle>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.table.default-page-size</div>
<div translate>widgets.table.page-step-size</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
<input matInput formControlName="pageStepSize" type="number" min="1" step="1" required
(change)="onPaginationSettingsChange()"
placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.table.page-step-count</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
(change)="onPaginationSettingsChange()"
placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<mat-form-field class="flex-1" subscriptSizing="dynamic">
<mat-label translate>widgets.table.default-page-size</mat-label>
<mat-select formControlName="defaultPageSize">
<mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
{{ size }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="tb-form-panel tb-slide-toggle">
<div class="tb-form-panel-title" translate>widgets.table.rows</div>

20
ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.ts
View File

@ -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<AppState>,
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});
}

2
ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
View File

@ -47,6 +47,8 @@ export interface TableWidgetSettings {
enableStickyHeader: boolean;
displayPagination: boolean;
defaultPageSize: number;
pageStepSize: number;
pageStepCount: number;
useRowStyleFunction: boolean;
rowStyleFunction?: TbFunction;
reserveSpaceForHiddenAction?: boolean;

22
ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
View File

@ -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<DatasourceData>;
private datasources: Array<Datasource>;
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);

2
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

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