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

PROD-5908: Fixed bug with empty step-increment field. Fixed adaptation for small screen view

Browse Source
This commit is contained in:
Tarnavskiy 2025-03-28 16:20:29 +02:00
parent f31d578ea0
commit 665871c1d0
9 changed files with 38 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" style="min-width: 120px;">{{ '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" style="min-width: 120px;">{{ '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" style="min-width: 120px;">{{ '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" style="min-width: 120px;">{{ '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);
}