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

UI: On tables hide page size option on mobile view

Browse Source
This commit is contained in:
ArtemDzhereleiko 2021-12-01 11:32:32 +02:00
parent 77b9a8c1af
commit 05408d357e
12 changed files with 133 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -196,6 +196,7 @@
[pageIndex]="pageLink.page"
[pageSize]="pageLink.pageSize"
[pageSizeOptions]="[10, 20, 30]"
[hidePageSize]="hidePageSize"
showFirstLastButtons></mat-paginator>
<ngx-hm-carousel fxFlex *ngIf="mode === 'widget' && widgetsList.length > 0"
#carousel

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

@ -38,7 +38,7 @@ import { TranslateService } from '@ngx-translate/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogService } from '@core/services/dialog.service';
import { Direction, SortOrder } from '@shared/models/page/sort-order';
import { fromEvent, merge } from 'rxjs';
import { fromEvent, merge, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
import { EntityId } from '@shared/models/id/entity-id';
import {
@ -84,6 +84,8 @@ import {
} from '@home/components/attribute/add-widget-to-dashboard-dialog.component';
import { deepClone } from '@core/utils';
import { Filters } from '@shared/models/query/query.models';
import { MediaBreakpoints } from '@shared/models/constants';
import { BreakpointObserver } from '@angular/cdk/layout';
@Component({
@ -171,6 +173,9 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
private breakpointObserverSubscription$: Subscription;
public hidePageSize = true;
constructor(protected store: Store<AppState>,
private attributeService: AttributeService,
private telemetryWsService: TelemetryWebsocketService,
@ -184,7 +189,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
private dashboardUtils: DashboardUtilsService,
private widgetService: WidgetService,
private zone: NgZone,
private cd: ChangeDetectorRef) {
private cd: ChangeDetectorRef,
private breakpointObserver: BreakpointObserver) {
super(store);
this.dirtyValue = !this.activeValue;
const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC };
@ -193,6 +199,19 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
}
ngOnInit() {
this.breakpointObserverSubscription$ = this.breakpointObserver
.observe(MediaBreakpoints['gt-xs']).subscribe(
() => {
this.hidePageSize = !this.breakpointObserver.isMatched(MediaBreakpoints['gt-xs']);
this.cd.detectChanges();
}
);
}
ngOnDestroy() {
if (this.breakpointObserverSubscription$) {
this.breakpointObserverSubscription$.unsubscribe();
}
}
attributeScopeChanged(attributeScope: TelemetryType) {

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

@ -266,6 +266,7 @@
[pageIndex]="pageLink.page"
[pageSize]="pageLink.pageSize"
[pageSizeOptions]="pageSizeOptions"
[hidePageSize]="hidePageSize"
showFirstLastButtons></mat-paginator>
</div>
</div>

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

@ -64,6 +64,8 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
import { isDefined, isUndefined } from '@core/utils';
import { HasUUID } from '@shared/models/id/has-uuid';
import { MediaBreakpoints } from '@shared/models/constants';
import { BreakpointObserver } from '@angular/cdk/layout';
@Component({
selector: 'tb-entities-table',
@ -120,6 +122,9 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
private updateDataSubscription: Subscription;
private viewInited = false;
private breakpointObserverSubscription$: Subscription;
public hidePageSize = true;
constructor(protected store: Store<AppState>,
public route: ActivatedRoute,
public translate: TranslateService,
@ -127,7 +132,8 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
private dialogService: DialogService,
private domSanitizer: DomSanitizer,
private cd: ChangeDetectorRef,
private componentFactoryResolver: ComponentFactoryResolver) {
private componentFactoryResolver: ComponentFactoryResolver,
private breakpointObserver: BreakpointObserver) {
super(store);
}
@ -137,6 +143,19 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
} else {
this.init(this.route.snapshot.data.entitiesTableConfig);
}
this.breakpointObserverSubscription$ = this.breakpointObserver
.observe(MediaBreakpoints['gt-xs']).subscribe(
() => {
this.hidePageSize = !this.breakpointObserver.isMatched(MediaBreakpoints['gt-xs']);
this.cd.detectChanges();
}
);
}
ngOnDestroy() {
if (this.breakpointObserverSubscription$) {
this.breakpointObserverSubscription$.unsubscribe();
}
}
ngOnChanges(changes: SimpleChanges): void {

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

@ -165,6 +165,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>

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

@ -14,7 +14,16 @@
/// limitations under the License.
///
import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
Input,
OnInit,
ViewChild
} from '@angular/core';
import { PageComponent } from '@shared/components/page.component';
import { PageLink } from '@shared/models/page/page-link';
import { MatPaginator } from '@angular/material/paginator';
@ -26,7 +35,7 @@ import { MatDialog } from '@angular/material/dialog';
import { DialogService } from '@core/services/dialog.service';
import { EntityRelationService } from '@core/http/entity-relation.service';
import { Direction, SortOrder } from '@shared/models/page/sort-order';
import { forkJoin, fromEvent, merge, Observable } from 'rxjs';
import { forkJoin, fromEvent, merge, Observable, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
import {
EntityRelation,
@ -38,6 +47,8 @@ import {
import { EntityId } from '@shared/models/id/entity-id';
import { RelationsDatasource } from '../../models/datasource/relation-datasource';
import { RelationDialogComponent, RelationDialogData } from '@home/components/relation/relation-dialog.component';
import { MediaBreakpoints } from '@shared/models/constants';
import { BreakpointObserver } from '@angular/cdk/layout';
@Component({
selector: 'tb-relation-table',
@ -65,6 +76,9 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
viewsInited = false;
private breakpointObserverSubscription$: Subscription;
public hidePageSize = true;
@Input()
set active(active: boolean) {
if (this.activeValue !== active) {
@ -100,7 +114,9 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
private entityRelationService: EntityRelationService,
public translate: TranslateService,
public dialog: MatDialog,
private dialogService: DialogService) {
private dialogService: DialogService,
private cd: ChangeDetectorRef,
private breakpointObserver: BreakpointObserver) {
super(store);
this.dirtyValue = !this.activeValue;
const sortOrder: SortOrder = { property: 'type', direction: Direction.ASC };
@ -111,6 +127,19 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
}
ngOnInit() {
this.breakpointObserverSubscription$ = this.breakpointObserver
.observe(MediaBreakpoints['gt-xs']).subscribe(
() => {
this.hidePageSize = !this.breakpointObserver.isMatched(MediaBreakpoints['gt-xs']);
this.cd.detectChanges();
}
);
}
ngOnDestroy() {
if (this.breakpointObserverSubscription$) {
this.breakpointObserverSubscription$.unsubscribe();
}
}
updateColumns() {

3
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 class="tb-table-widget tb-absolute-fill">
<div #alarmWidgetContainer 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">
@ -147,6 +147,7 @@
[pageIndex]="pageLink.page"
[pageSize]="pageLink.pageSize"
[pageSizeOptions]="pageSizeOptions"
[hidePageSize]="hidePageSize"
showFirstLastButtons></mat-paginator>
</div>
</div>

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

@ -123,6 +123,7 @@ import {
} from '@home/components/widget/lib/alarm-filter-panel.component';
import { entityFields } from '@shared/models/entity.models';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ResizeObserver } from '@juggle/resize-observer';
interface AlarmsTableWidgetSettings extends TableWidgetSettings {
alarmsTitle: string;
@ -152,6 +153,7 @@ 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;
@ -168,6 +170,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
public displayedColumns: string[] = [];
public alarmsDatasource: AlarmsDatasource;
public noDataDisplayMessageText: string;
public hidePageSize = false;
private setCellButtonAction: boolean;
private cellContentCache: Array<any> = [];
@ -177,6 +180,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
private settings: AlarmsTableWidgetSettings;
private widgetConfig: WidgetConfig;
private subscription: IWidgetSubscription;
private widgetResize$: ResizeObserver;
private alarmsTitlePattern: string;
@ -257,6 +261,14 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
this.widgetTimewindowChanged$ = this.ctx.defaultSubscription.widgetTimewindowChanged$.subscribe(
() => this.pageLink.page = 0
);
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.ctx.$container[0].offsetWidth < 450;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.ctx.detectChanges();
}
});
this.widgetResize$.observe(this.alarmWidgetContainerRef.nativeElement);
}
}
@ -265,6 +277,9 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
this.widgetTimewindowChanged$.unsubscribe();
this.widgetTimewindowChanged$ = null;
}
if (this.widgetResize$) {
this.widgetResize$.disconnect();
}
}
ngAfterViewInit(): void {

3
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 class="tb-table-widget tb-absolute-fill">
<div #entitiesWidgetContainer 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">
@ -106,6 +106,7 @@
[pageIndex]="pageLink.page"
[pageSize]="pageLink.pageSize"
[pageSizeOptions]="pageSizeOptions"
[hidePageSize]="hidePageSize"
showFirstLastButtons></mat-paginator>
</div>
</div>

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

@ -107,6 +107,7 @@ import { sortItems } from '@shared/models/page/page-link';
import { entityFields } from '@shared/models/entity.models';
import { DatePipe } from '@angular/common';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ResizeObserver } from '@juggle/resize-observer';
interface EntitiesTableWidgetSettings extends TableWidgetSettings {
entitiesTitle: string;
@ -129,6 +130,7 @@ 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;
@ -144,6 +146,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
public displayedColumns: string[] = [];
public entityDatasource: EntityDatasource;
public noDataDisplayMessageText: string;
public hidePageSize = false;
private setCellButtonAction: boolean;
private cellContentCache: Array<any> = [];
@ -153,6 +156,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
private settings: EntitiesTableWidgetSettings;
private widgetConfig: WidgetConfig;
private subscription: IWidgetSubscription;
private widgetResize$: ResizeObserver;
private entitiesTitlePattern: string;
@ -211,6 +215,22 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
this.initializeConfig();
this.updateDatasources();
this.ctx.updateWidgetParams();
if (this.displayPagination) {
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.ctx.$container[0].offsetWidth < 450;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.ctx.detectChanges();
}
});
this.widgetResize$.observe(this.entitiesWidgetContainerRef.nativeElement);
}
}
ngOnDestroy(): void {
if (this.widgetResize$) {
this.widgetResize$.disconnect();
}
}
ngAfterViewInit(): void {

3
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 class="tb-table-widget tb-absolute-fill">
<div #timeseriesWidgetContainer 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">
@ -112,6 +112,7 @@
[pageIndex]="source.pageLink.page"
[pageSize]="source.pageLink.pageSize"
[pageSizeOptions]="pageSizeOptions"
[hidePageSize]="hidePageSize"
showFirstLastButtons></mat-paginator>
</ng-template>
</mat-tab>

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

@ -71,6 +71,7 @@ import { SubscriptionEntityInfo } from '@core/api/widget-api.models';
import { DatePipe } from '@angular/common';
import { parseData } from '@home/components/widget/lib/maps/common-maps-utils';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ResizeObserver } from '@juggle/resize-observer';
export interface TimeseriesTableWidgetSettings extends TableWidgetSettings {
showTimestamp: boolean;
@ -115,6 +116,7 @@ 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>;
@ -128,6 +130,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
public sources: TimeseriesTableSource[];
public sourceIndex: number;
public noDataDisplayMessageText: string;
public hidePageSize = false;
private setCellButtonAction: boolean;
private cellContentCache: Array<any> = [];
@ -150,6 +153,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
private subscriptions: Subscription[] = [];
private widgetTimewindowChanged$: Subscription;
private widgetResize$: ResizeObserver;
private searchAction: WidgetAction = {
name: 'action.search',
@ -190,6 +194,14 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
});
}
);
this.widgetResize$ = new ResizeObserver(() => {
const showHidePageSize = this.ctx.$container[0].offsetWidth < 450;
if (showHidePageSize !== this.hidePageSize) {
this.hidePageSize = showHidePageSize;
this.ctx.detectChanges();
}
});
this.widgetResize$.observe(this.timeseriesWidgetContainerRef.nativeElement);
}
}
@ -198,6 +210,9 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
this.widgetTimewindowChanged$.unsubscribe();
this.widgetTimewindowChanged$ = null;
}
if (this.widgetResize$) {
this.widgetResize$.disconnect();
}
}
ngAfterViewInit(): void {