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

Hide page size on tables refactoring

Browse Source
This commit is contained in:
ArtemDzhereleiko 2021-12-14 12:40:18 +02:00
parent 76dccab3f7
commit 09c8f2bdc7
21 changed files with 70 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div #attributeTableContainer class="mat-padding tb-entity-table tb-absolute-fill">
<div class="mat-padding tb-entity-table tb-absolute-fill">
<div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
<mat-toolbar class="mat-table-toolbar" [fxShow]="mode === 'default' && !textSearchMode && dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools">

1
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
View File

@ -18,6 +18,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-entity-table {
.tb-entity-table-content {
width: 100%;

18
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
View File

@ -111,6 +111,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
pageLink: PageLink;
textSearchMode = false;
dataSource: AttributeDatasource;
hidePageSize = false;
activeValue = false;
dirtyValue = false;
@ -129,10 +130,14 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
aliasController: IAliasController;
private widgetDatasource: Datasource;
private widgetResize$: ResizeObserver;
private disableAttributeScopeSelectionValue: boolean;
get disableAttributeScopeSelection(): boolean {
return this.disableAttributeScopeSelectionValue;
}
@Input()
set disableAttributeScopeSelection(value: boolean) {
this.disableAttributeScopeSelectionValue = coerceBooleanProperty(value);
@ -168,15 +173,11 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
@Input()
entityName: string;
@ViewChild('attributeTableContainer', {static: true}) attributeTableContainerRef: ElementRef;
@ViewChild('searchInput') searchInputField: ElementRef;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
public hidePageSize = false;
private widgetResize$: ResizeObserver;
constructor(protected store: Store<AppState>,
private attributeService: AttributeService,
private telemetryWsService: TelemetryWebsocketService,
@ -190,7 +191,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
private dashboardUtils: DashboardUtilsService,
private widgetService: WidgetService,
private zone: NgZone,
private cd: ChangeDetectorRef) {
private cd: ChangeDetectorRef,
private elementRef: ElementRef) {
super(store);
this.dirtyValue = !this.activeValue;
const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC };
@ -200,13 +202,13 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
ngOnInit() {
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.attributeTableContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.cd.detectChanges();
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.attributeTableContainerRef.nativeElement);
this.widgetResize$.observe(this.elementRef.nativeElement);
}
ngOnDestroy() {

2
ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
View File

@ -32,7 +32,7 @@
</tb-entity-details-panel>
</mat-drawer>
<mat-drawer-content>
<div #entitiesTableContainer class="mat-padding tb-entity-table tb-absolute-fill">
<div class="mat-padding tb-entity-table tb-absolute-fill">
<div fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
<mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools">

1
ui-ngx/src/app/modules/home/components/entity/entities-table.component.scss
View File

@ -18,6 +18,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-entity-table {
.tb-entity-table-content {
width: 100%;

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

@ -43,7 +43,8 @@ import { TranslateService } from '@ngx-translate/core';
import { BaseData, HasId } from '@shared/models/base-data';
import { ActivatedRoute } from '@angular/router';
import {
CellActionDescriptor, CellActionDescriptorType,
CellActionDescriptor,
CellActionDescriptorType,
EntityActionTableColumn,
EntityColumn,
EntityTableColumn,
@ -55,11 +56,7 @@ import { EntityTypeTranslation } from '@shared/models/entity-type.models';
import { DialogService } from '@core/services/dialog.service';
import { AddEntityDialogComponent } from './add-entity-dialog.component';
import { AddEntityDialogData, EntityAction } from '@home/models/entity/entity-component.models';
import {
calculateIntervalStartEndTime,
HistoryWindowType,
Timewindow
} from '@shared/models/time/time.models';
import { calculateIntervalStartEndTime, HistoryWindowType, Timewindow } from '@shared/models/time/time.models';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
import { isDefined, isUndefined } from '@core/utils';
@ -100,6 +97,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
defaultPageSize = 10;
displayPagination = true;
hidePageSize = false;
pageSizeOptions;
pageLink: PageLink;
textSearchMode = false;
@ -111,8 +109,6 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
isDetailsOpen = false;
detailsPanelOpened = new EventEmitter<boolean>();
@ViewChild('entitiesTableContainer', {static: true}) entitiesTableContainerRef: ElementRef;
@ViewChild('entityTableHeader', {static: true}) entityTableHeaderAnchor: TbAnchorComponent;
@ViewChild('searchInput') searchInputField: ElementRef;
@ -125,7 +121,6 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
private viewInited = false;
private widgetResize$: ResizeObserver;
public hidePageSize = false;
constructor(protected store: Store<AppState>,
public route: ActivatedRoute,
@ -134,7 +129,8 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
private dialogService: DialogService,
private domSanitizer: DomSanitizer,
private cd: ChangeDetectorRef,
private componentFactoryResolver: ComponentFactoryResolver) {
private componentFactoryResolver: ComponentFactoryResolver,
private elementRef: ElementRef) {
super(store);
}
@ -145,13 +141,13 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
this.init(this.route.snapshot.data.entitiesTableConfig);
}
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.entitiesTableContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.cd.detectChanges();
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.entitiesTableContainerRef.nativeElement);
this.widgetResize$.observe(this.elementRef.nativeElement);
}
ngOnDestroy() {

2
ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div #relationTableContainer class="mat-padding tb-entity-table tb-absolute-fill">
<div class="mat-padding tb-entity-table tb-absolute-fill">
<div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
<mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools">

1
ui-ngx/src/app/modules/home/components/relation/relation-table.component.scss
View File

@ -18,6 +18,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-entity-table {
.tb-entity-table-content {
width: 100%;

12
ui-ngx/src/app/modules/home/components/relation/relation-table.component.ts
View File

@ -67,6 +67,7 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
displayedColumns: string[];
direction: EntitySearchDirection;
pageLink: PageLink;
hidePageSize = false;
textSearchMode = false;
dataSource: RelationsDatasource;
@ -77,7 +78,6 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
viewsInited = false;
private widgetResize$: ResizeObserver;
public hidePageSize = false;
@Input()
set active(active: boolean) {
@ -105,7 +105,6 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
}
}
@ViewChild('relationTableContainer', {static: true}) relationTableContainerRef: ElementRef;
@ViewChild('searchInput') searchInputField: ElementRef;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ -116,7 +115,8 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
public translate: TranslateService,
public dialog: MatDialog,
private dialogService: DialogService,
private cd: ChangeDetectorRef) {
private cd: ChangeDetectorRef,
private elementRef: ElementRef) {
super(store);
this.dirtyValue = !this.activeValue;
const sortOrder: SortOrder = { property: 'type', direction: Direction.ASC };
@ -128,13 +128,13 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
ngOnInit() {
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.relationTableContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.cd.detectChanges();
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.relationTableContainerRef.nativeElement);
this.widgetResize$.observe(this.elementRef.nativeElement);
}
ngOnDestroy() {

5
ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div #manageActionWidgetContainer class="mat-padding tb-entity-table tb-absolute-fill">
<div class="mat-padding tb-entity-table tb-absolute-fill">
<div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
<mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode">
<div class="mat-toolbar-tools">
@ -119,6 +119,7 @@
<mat-paginator [length]="dataSource.total() | async"
[pageIndex]="pageLink.page"
[pageSize]="pageLink.pageSize"
[pageSizeOptions]="[10, 20, 30]"></mat-paginator>
[pageSizeOptions]="[10, 20, 30]"
[hidePageSize]="hidePageSize"></mat-paginator>
</div>
</div>

1
ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.scss
View File

@ -16,6 +16,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-entity-table {
.tb-entity-table-content {
width: 100%;

16
ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
View File

@ -46,13 +46,12 @@ import {
WidgetActionsDatasource
} from '@home/components/widget/action/manage-widget-actions.component.models';
import { UtilsService } from '@core/services/utils.service';
import { WidgetActionDescriptor, WidgetActionSource } from '@shared/models/widget.models';
import { WidgetActionDescriptor, WidgetActionSource, widgetType } from '@shared/models/widget.models';
import {
WidgetActionDialogComponent,
WidgetActionDialogData
} from '@home/components/widget/action/widget-action-dialog.component';
import { deepClone } from '@core/utils';
import { widgetType } from '@shared/models/widget.models';
import { ResizeObserver } from '@juggle/resize-observer';
import { hidePageSizePixelValue } from '@shared/models/constants';
@ -81,14 +80,14 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
displayedColumns: string[];
pageLink: PageLink;
textSearchMode = false;
hidePageSize = false;
dataSource: WidgetActionsDatasource;
viewsInited = false;
dirtyValue = false;
public hidePageSize = false;
private widgetResize$: ResizeObserver;
@ViewChild('manageActionWidgetContainer', {static: true}) manageActionWidgetContainerRef: ElementRef;
@ViewChild('searchInput') searchInputField: ElementRef;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ -101,7 +100,8 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
private utils: UtilsService,
private dialog: MatDialog,
private dialogs: DialogService,
private cd: ChangeDetectorRef) {
private cd: ChangeDetectorRef,
private elementRef: ElementRef) {
super(store);
const sortOrder: SortOrder = { property: 'actionSourceName', direction: Direction.ASC };
this.pageLink = new PageLink(10, 0, null, sortOrder);
@ -111,13 +111,13 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
ngOnInit(): void {
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.manageActionWidgetContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.cd.detectChanges();
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.manageActionWidgetContainerRef.nativeElement);
this.widgetResize$.observe(this.elementRef.nativeElement);
}
ngOnDestroy(): void {

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

@ -15,7 +15,7 @@
limitations under the License.
-->
<div #alarmWidgetContainer class="tb-table-widget tb-absolute-fill">
<div class="tb-table-widget tb-absolute-fill">
<div fxFlex fxLayout="column" class="tb-absolute-fill">
<mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && alarmsDatasource.selection.isEmpty()">
<div class="mat-toolbar-tools">

1
ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss
View File

@ -16,6 +16,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-table-widget {
.table-container {
position: relative;

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

@ -16,6 +16,7 @@
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
@ -154,7 +155,6 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
@Input()
ctx: WidgetContext;
@ViewChild('alarmWidgetContainer', {static: true}) alarmWidgetContainerRef: ElementRef;
@ViewChild('searchInput') searchInputField: ElementRef;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ -167,11 +167,11 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
public pageLink: AlarmDataPageLink;
public sortOrderProperty: string;
public textSearchMode = false;
public hidePageSize = false;
public columns: Array<EntityColumn> = [];
public displayedColumns: string[] = [];
public alarmsDatasource: AlarmsDatasource;
public noDataDisplayMessageText: string;
public hidePageSize = false;
private setCellButtonAction: boolean;
private cellContentCache: Array<any> = [];
@ -240,7 +240,8 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
private datePipe: DatePipe,
private dialog: MatDialog,
private dialogService: DialogService,
private alarmService: AlarmService) {
private alarmService: AlarmService,
private cd: ChangeDetectorRef) {
super(store);
this.pageLink = {
page: 0,
@ -263,13 +264,13 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
() => this.pageLink.page = 0
);
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.alarmWidgetContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.ctx.detectChanges();
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.alarmWidgetContainerRef.nativeElement);
this.widgetResize$.observe(this.elementRef.nativeElement);
}
}

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

@ -15,7 +15,7 @@
limitations under the License.
-->
<div #entitiesWidgetContainer class="tb-table-widget tb-absolute-fill">
<div class="tb-table-widget tb-absolute-fill">
<div fxFlex fxLayout="column" class="tb-absolute-fill">
<mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode">
<div class="mat-toolbar-tools">

1
ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.scss
View File

@ -16,6 +16,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-table-widget {
.table-container {
position: relative;

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

@ -16,6 +16,7 @@
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
Injector,
@ -131,7 +132,6 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
@Input()
ctx: WidgetContext;
@ViewChild('entitiesWidgetContainer', {static: true}) entitiesWidgetContainerRef: ElementRef;
@ViewChild('searchInput') searchInputField: ElementRef;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ -143,11 +143,11 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
public pageLink: EntityDataPageLink;
public sortOrderProperty: string;
public textSearchMode = false;
public hidePageSize = false;
public columns: Array<EntityColumn> = [];
public displayedColumns: string[] = [];
public entityDatasource: EntityDatasource;
public noDataDisplayMessageText: string;
public hidePageSize = false;
private setCellButtonAction: boolean;
private cellContentCache: Array<any> = [];
@ -198,7 +198,8 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
private utils: UtilsService,
private datePipe: DatePipe,
private translate: TranslateService,
private domSanitizer: DomSanitizer) {
private domSanitizer: DomSanitizer,
private cd: ChangeDetectorRef) {
super(store);
this.pageLink = {
page: 0,
@ -218,13 +219,13 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
this.ctx.updateWidgetParams();
if (this.displayPagination) {
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.entitiesWidgetContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.ctx.detectChanges();
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.entitiesWidgetContainerRef.nativeElement);
this.widgetResize$.observe(this.elementRef.nativeElement);
}
}

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

@ -15,7 +15,7 @@
limitations under the License.
-->
<div #timeseriesWidgetContainer class="tb-table-widget tb-absolute-fill">
<div class="tb-table-widget tb-absolute-fill">
<div fxFlex fxLayout="column" class="tb-absolute-fill">
<mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode">
<div class="mat-toolbar-tools">

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

@ -16,6 +16,7 @@
:host {
width: 100%;
height: 100%;
display: block;
.tb-table-widget {
mat-footer-row, mat-row {
height: 38px;

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

@ -16,6 +16,7 @@
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
Input,
@ -117,7 +118,6 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
@Input()
ctx: WidgetContext;
@ViewChild('timeseriesWidgetContainer', {static: true}) timeseriesWidgetContainerRef: ElementRef;
@ViewChild('searchInput') searchInputField: ElementRef;
@ViewChildren(MatPaginator) paginators: QueryList<MatPaginator>;
@ViewChildren(MatSort) sorts: QueryList<MatSort>;
@ -127,11 +127,11 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
public enableStickyAction = true;
public pageSizeOptions;
public textSearchMode = false;
public hidePageSize = false;
public textSearch: string = null;
public sources: TimeseriesTableSource[];
public sourceIndex: number;
public noDataDisplayMessageText: string;
public hidePageSize = false;
private setCellButtonAction: boolean;
private cellContentCache: Array<any> = [];
@ -172,7 +172,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
private utils: UtilsService,
private translate: TranslateService,
private domSanitizer: DomSanitizer,
private datePipe: DatePipe) {
private datePipe: DatePipe,
private cd: ChangeDetectorRef) {
super(store);
}
@ -196,13 +197,13 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
}
);
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.timeseriesWidgetContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.ctx.detectChanges();
this.cd.markForCheck();
}
});
this.widgetResize$.observe(this.timeseriesWidgetContainerRef.nativeElement);
this.widgetResize$.observe(this.elementRef.nativeElement);
}
}