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

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

Browse Source 
Fixed empty "Step increment" field and adaptive view in Pagination settings
This commit is contained in:
Igor Kulikov 2025-03-31 17:41:56 +03:00 committed by GitHub
commit 0c8f43eaa6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 39 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,7 +95,7 @@
{{ 'widgets.table.display-pagination' | translate }}
</mat-slide-toggle>
<div class="tb-form-row space-between column-xs">
<div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
<div class="fixed-title-width !min-w-30">{{ 'widgets.table.page-step-settings' | translate }}</div>
<div class="flex flex-row items-center justify-start gap-2">
<div class="tb-small-label" translate>widgets.table.page-step-increment</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@ -113,7 +113,7 @@
warning
</mat-icon>
</mat-form-field>
<mat-divider vertical></mat-divider>
<mat-divider vertical class="xs:hidden"></mat-divider>
<div class="tb-small-label" translate>widgets.table.page-step-count</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required

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

@ -66,6 +66,12 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
};
}
protected prepareInputSettings(settings: WidgetSettings): WidgetSettings {
settings.pageStepIncrement = settings.pageStepIncrement ?? settings.defaultPageSize;
this.pageStepSizeValues = buildPageStepSizeValues(settings.pageStepCount, settings.pageStepIncrement);
return settings;
}
protected onSettingsSet(settings: WidgetSettings) {
this.alarmsTableWidgetSettingsForm = this.fb.group({
alarmsTitle: [settings.alarmsTitle, []],
@ -86,14 +92,11 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
Validators.required, Validators.pattern(/^\d*$/)]],
pageStepIncrement: [settings.pageStepIncrement ?? settings.defaultPageSize,
[Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
defaultSortOrder: [settings.defaultSortOrder, []],
useRowStyleFunction: [settings.useRowStyleFunction, []],
rowStyleFunction: [settings.rowStyleFunction, [Validators.required]]
});
this.pageStepSizeValues = buildPageStepSizeValues(this.alarmsTableWidgetSettingsForm.get('pageStepCount').value,
this.alarmsTableWidgetSettingsForm.get('pageStepIncrement').value);
}
protected validatorTriggers(): string[] {

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

@ -62,7 +62,7 @@
{{ 'widgets.table.display-pagination' | translate }}
</mat-slide-toggle>
<div class="tb-form-row space-between column-xs">
<div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
<div class="fixed-title-width !min-w-30">{{ 'widgets.table.page-step-settings' | translate }}</div>
<div class="flex flex-row items-center justify-start gap-2">
<div class="tb-small-label" translate>widgets.table.page-step-increment</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@ -80,7 +80,7 @@
warning
</mat-icon>
</mat-form-field>
<mat-divider vertical></mat-divider>
<mat-divider vertical class="xs:hidden"></mat-divider>
<div class="tb-small-label" translate>widgets.table.page-step-count</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required

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

@ -62,6 +62,12 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
};
}
protected prepareInputSettings(settings: WidgetSettings): WidgetSettings {
settings.pageStepIncrement = settings.pageStepIncrement ?? settings.defaultPageSize;
this.pageStepSizeValues = buildPageStepSizeValues(settings.pageStepCount, settings.pageStepIncrement);
return settings;
}
protected onSettingsSet(settings: WidgetSettings) {
// For backward compatibility
const dateFormat = settings.dateFormat;
@ -83,15 +89,12 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
Validators.required, Validators.pattern(/^\d*$/)]],
pageStepIncrement: [settings.pageStepIncrement ?? settings.defaultPageSize,
[Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
hideEmptyLines: [settings.hideEmptyLines, []],
disableStickyHeader: [settings.disableStickyHeader, []],
useRowStyleFunction: [settings.useRowStyleFunction, []],
rowStyleFunction: [settings.rowStyleFunction, [Validators.required]]
});
this.pageStepSizeValues = buildPageStepSizeValues(this.timeseriesTableWidgetSettingsForm.get('pageStepCount').value,
this.timeseriesTableWidgetSettingsForm.get('pageStepIncrement').value);
}
protected validatorTriggers(): string[] {

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

@ -49,7 +49,7 @@
{{ 'widgets.table.display-pagination' | translate }}
</mat-slide-toggle>
<div class="tb-form-row space-between column-xs">
<div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
<div class="fixed-title-width !min-w-30">{{ 'widgets.table.page-step-settings' | translate }}</div>
<div class="flex flex-row items-center justify-start gap-2">
<div class="tb-small-label" translate>widgets.table.page-step-increment</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@ -67,7 +67,7 @@
warning
</mat-icon>
</mat-form-field>
<mat-divider vertical></mat-divider>
<mat-divider vertical class="xs:hidden"></mat-divider>
<div class="tb-small-label" translate>widgets.table.page-step-count</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required

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

@ -105,6 +105,12 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon
};
}
protected prepareInputSettings(settings: WidgetSettings): WidgetSettings {
settings.pageStepIncrement = settings.pageStepIncrement ?? settings.defaultPageSize;
this.pageStepSizeValues = buildPageStepSizeValues(settings.pageStepCount, settings.pageStepIncrement);
return settings;
}
protected onSettingsSet(settings: WidgetSettings) {
this.persistentTableWidgetSettingsForm = this.fb.group({
enableFilter: [settings.enableFilter, []],
@ -117,13 +123,10 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon
defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
Validators.required, Validators.pattern(/^\d*$/)]],
pageStepIncrement: [settings.pageStepIncrement ?? settings.defaultPageSize,
[Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
defaultSortOrder: [settings.defaultSortOrder, []],
displayColumns: [settings.displayColumns, [Validators.required]]
});
this.pageStepSizeValues = buildPageStepSizeValues(this.persistentTableWidgetSettingsForm.get('pageStepCount').value,
this.persistentTableWidgetSettingsForm.get('pageStepIncrement').value);
}
public validateSettings(): boolean {

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

@ -92,7 +92,7 @@
{{ 'widgets.table.display-pagination' | translate }}
</mat-slide-toggle>
<div class="tb-form-row space-between column-xs">
<div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
<div class="fixed-title-width !min-w-30">{{ 'widgets.table.page-step-settings' | translate }}</div>
<div class="flex flex-row items-center justify-start gap-2">
<div class="tb-small-label" translate>widgets.table.page-step-increment</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
@ -110,7 +110,7 @@
warning
</mat-icon>
</mat-form-field>
<mat-divider vertical></mat-divider>
<mat-divider vertical class="xs:hidden"></mat-divider>
<div class="tb-small-label" translate>widgets.table.page-step-count</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required

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

@ -64,6 +64,12 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
};
}
protected prepareInputSettings(settings: WidgetSettings): WidgetSettings {
settings.pageStepIncrement = settings.pageStepIncrement ?? settings.defaultPageSize;
this.pageStepSizeValues = buildPageStepSizeValues(settings.pageStepCount, settings.pageStepIncrement);
return settings;
}
protected onSettingsSet(settings: WidgetSettings) {
this.entitiesTableWidgetSettingsForm = this.fb.group({
entitiesTitle: [settings.entitiesTitle, []],
@ -82,14 +88,11 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
Validators.required, Validators.pattern(/^\d*$/)]],
pageStepIncrement: [settings.pageStepIncrement ?? settings.defaultPageSize,
[Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
pageStepIncrement: [settings.pageStepIncrement, [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
defaultSortOrder: [settings.defaultSortOrder, []],
useRowStyleFunction: [settings.useRowStyleFunction, []],
rowStyleFunction: [settings.rowStyleFunction, [Validators.required]]
});
this.pageStepSizeValues = buildPageStepSizeValues(this.entitiesTableWidgetSettingsForm.get('pageStepCount').value,
this.entitiesTableWidgetSettingsForm.get('pageStepIncrement').value);
}
protected validatorTriggers(): string[] {

3
ui-ngx/src/form.scss
View File

@ -360,9 +360,10 @@
}
}
.tb-small-label {
display: flex;
align-items: center;
height: 40px;
font-size: 14px;
line-height: 40px;
letter-spacing: 0.2px;
color: rgba(0, 0, 0, 0.38);
}

1
ui-ngx/tailwind.config.js
View File

@ -102,6 +102,7 @@ module.exports = {
minWidth: {
'7.5': '1.875rem',
'25': '6.25rem',
'30': '7.5rem',
'37.5': '9.375rem',
'62.5': '15.625rem',
'72.5': '18.125rem',