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

UI: Hide pageSizeOption on persistent table widget

Browse Source
This commit is contained in:
ArtemDzhereleiko 2021-12-01 12:37:30 +02:00
parent 721906b921
commit 12dcbf0e5e
2 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<div class="tb-table-widget tb-absolute-fill"> <div #persistentWidgetContainer class="tb-table-widget tb-absolute-fill">
<div fxFlex fxLayout="column" class="tb-absolute-fill"> <div fxFlex fxLayout="column" class="tb-absolute-fill">
<div fxFlex class="table-container"> <div fxFlex class="table-container">
<table mat-table [dataSource]="persistentDatasource" <table mat-table [dataSource]="persistentDatasource"
@ -120,6 +120,7 @@
[pageIndex]="pageLink.page" [pageIndex]="pageLink.page"
[pageSize]="pageLink.pageSize" [pageSize]="pageLink.pageSize"
[pageSizeOptions]="pageSizeOptions" [pageSizeOptions]="pageSizeOptions"
[hidePageSize]="hidePageSize"
showFirstLastButtons></mat-paginator> showFirstLastButtons></mat-paginator>
</div> </div>
</div> </div>

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

@ -67,6 +67,7 @@ import {
PERSISTENT_FILTER_PANEL_DATA, PersistentFilterPanelComponent, PersistentFilterPanelData PERSISTENT_FILTER_PANEL_DATA, PersistentFilterPanelComponent, PersistentFilterPanelData
} from '@home/components/widget/lib/rpc/persistent-filter-panel.component'; } from '@home/components/widget/lib/rpc/persistent-filter-panel.component';
import { PersistentAddDialogComponent } from '@home/components/widget/lib/rpc/persistent-add-dialog.component'; import { PersistentAddDialogComponent } from '@home/components/widget/lib/rpc/persistent-add-dialog.component';
import { ResizeObserver } from '@juggle/resize-observer';
interface PersistentTableWidgetSettings extends TableWidgetSettings { interface PersistentTableWidgetSettings extends TableWidgetSettings {
defaultSortOrder: string; defaultSortOrder: string;
@ -97,6 +98,7 @@ export class PersistentTableComponent extends PageComponent implements OnInit {
@Input() @Input()
ctx: WidgetContext; ctx: WidgetContext;
@ViewChild('persistentWidgetContainer', {static: true}) persistentWidgetContainerRef: ElementRef;
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
@ -111,6 +113,7 @@ export class PersistentTableComponent extends PageComponent implements OnInit {
private displayDetails = true; private displayDetails = true;
private allowDelete = true; private allowDelete = true;
private displayTableColumns: string[]; private displayTableColumns: string[];
private widgetResize$: ResizeObserver;
public persistentDatasource: PersistentDatasource; public persistentDatasource: PersistentDatasource;
public noDataDisplayMessageText: string; public noDataDisplayMessageText: string;
@ -123,6 +126,7 @@ export class PersistentTableComponent extends PageComponent implements OnInit {
public pageSizeOptions; public pageSizeOptions;
public actionCellButtonAction: PersistentTableWidgetActionDescriptor[] = []; public actionCellButtonAction: PersistentTableWidgetActionDescriptor[] = [];
public displayedColumns: string[]; public displayedColumns: string[];
public hidePageSize = false;
constructor(protected store: Store<AppState>, constructor(protected store: Store<AppState>,
private elementRef: ElementRef, private elementRef: ElementRef,
@ -143,6 +147,22 @@ export class PersistentTableComponent extends PageComponent implements OnInit {
this.subscription = this.ctx.defaultSubscription; this.subscription = this.ctx.defaultSubscription;
this.initializeConfig(); this.initializeConfig();
this.ctx.updateWidgetParams(); this.ctx.updateWidgetParams();
if (this.displayPagination) {
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.ctx.$container[0].offsetWidth < 500;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.ctx.detectChanges();
}
});
this.widgetResize$.observe(this.persistentWidgetContainerRef.nativeElement);
}
}
ngOnDestroy() {
if (this.widgetResize$) {
this.widgetResize$.disconnect();
}
} }
ngAfterViewInit(): void { ngAfterViewInit(): void {