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

Merge pull request #5856 from vvlladd28/feature/persistent-page-link

Browse Source 
[3.3.3] UI: Added persistent page link for entities pages
This commit is contained in:
Igor Kulikov 2022-01-12 19:03:41 +02:00 committed by GitHub
commit 8423ff3f5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 112 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts
View File

@ -60,6 +60,7 @@ export class AlarmTableConfig extends EntityTableConfig<AlarmInfo, TimePageLink>
this.loadDataOnInit = false;
this.tableTitle = '';
this.useTimePageLink = true;
this.pageMode = false;
this.defaultTimewindowInterval = historyInterval(DAY * 30);
this.detailsPanelEnabled = false;
this.selectionEnabled = false;

4
ui-ngx/src/app/modules/home/components/audit-log/audit-log-table-config.ts
View File

@ -52,11 +52,13 @@ export class AuditLogTableConfig extends EntityTableConfig<AuditLog, TimePageLin
public entityId: EntityId = null,
public userId: UserId = null,
public customerId: CustomerId = null,
updateOnInit = true) {
updateOnInit = true,
pageMode = false) {
super();
this.loadDataOnInit = updateOnInit;
this.tableTitle = '';
this.useTimePageLink = true;
this.pageMode = pageMode;
this.detailsPanelEnabled = false;
this.selectionEnabled = false;
this.searchEnabled = true;

8
ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.ts
View File

@ -29,6 +29,7 @@ import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { Authority } from '@shared/models/authority.enum';
import { getCurrentAuthUser } from '@core/auth/auth.selectors';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'tb-audit-log-table',
@ -104,7 +105,8 @@ export class AuditLogTableComponent implements OnInit {
private translate: TranslateService,
private datePipe: DatePipe,
private dialog: MatDialog,
private store: Store<AppState>) {
private store: Store<AppState>,
private route: ActivatedRoute) {
}
ngOnInit() {
@ -117,6 +119,7 @@ export class AuditLogTableComponent implements OnInit {
}
updateOnInit = true;
}
const pageMode = !!this.route.snapshot.data.isPage;
this.auditLogTableConfig = new AuditLogTableConfig(
this.auditLogService,
this.translate,
@ -126,7 +129,8 @@ export class AuditLogTableComponent implements OnInit {
this.entityIdValue,
this.userIdValue,
this.customerIdValue,
updateOnInit
updateOnInit,
pageMode
);
}

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

@ -31,19 +31,20 @@ import {
import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { MAX_SAFE_PAGE_SIZE, PageLink, TimePageLink } from '@shared/models/page/page-link';
import { MAX_SAFE_PAGE_SIZE, PageLink, PageQueryParam, TimePageLink } from '@shared/models/page/page-link';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatSort, SortDirection } from '@angular/material/sort';
import { EntitiesDataSource } from '@home/models/datasource/entity-datasource';
import { catchError, debounceTime, distinctUntilChanged, map, tap } from 'rxjs/operators';
import { catchError, debounceTime, distinctUntilChanged, map, skip, tap } from 'rxjs/operators';
import { Direction, SortOrder } from '@shared/models/page/sort-order';
import { forkJoin, fromEvent, merge, Observable, of, Subscription } from 'rxjs';
import { TranslateService } from '@ngx-translate/core';
import { BaseData, HasId } from '@shared/models/base-data';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, QueryParamsHandling, Router } from '@angular/router';
import {
CellActionDescriptor, CellActionDescriptorType,
CellActionDescriptor,
CellActionDescriptorType,
EntityActionTableColumn,
EntityColumn,
EntityTableColumn,
@ -58,7 +59,7 @@ import { AddEntityDialogData, EntityAction } from '@home/models/entity/entity-co
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';
import { isDefined, isEmptyStr, isUndefined } from '@core/utils';
import { HasUUID } from '@shared/models/id/has-uuid';
import { ResizeObserver } from '@juggle/resize-observer';
import { hidePageSizePixelValue } from '@shared/models/constants';
@ -100,6 +101,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
hidePageSize = false;
pageSizeOptions;
pageLink: PageLink;
pageMode = true;
textSearchMode = false;
timewindow: Timewindow;
dataSource: EntitiesDataSource<BaseData<HasId>>;
@ -116,7 +118,6 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
private sortSubscription: Subscription;
private updateDataSubscription: Subscription;
private viewInited = false;
@ -129,6 +130,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
private dialogService: DialogService,
private domSanitizer: DomSanitizer,
private cd: ChangeDetectorRef,
private router: Router,
private componentFactoryResolver: ComponentFactoryResolver,
private elementRef: ElementRef) {
super(store);
@ -212,16 +214,19 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
this.columnsUpdated();
const routerQueryParams: PageQueryParam = this.route.snapshot.queryParams;
let sortOrder: SortOrder = null;
if (this.entitiesTableConfig.defaultSortOrder) {
if (this.entitiesTableConfig.defaultSortOrder || routerQueryParams.hasOwnProperty('direction') || routerQueryParams.hasOwnProperty('property')) {
sortOrder = {
property: this.entitiesTableConfig.defaultSortOrder.property,
direction: this.entitiesTableConfig.defaultSortOrder.direction
property: routerQueryParams?.property || this.entitiesTableConfig.defaultSortOrder.property,
direction: routerQueryParams?.direction || this.entitiesTableConfig.defaultSortOrder.direction
};
}
this.displayPagination = this.entitiesTableConfig.displayPagination;
this.defaultPageSize = this.entitiesTableConfig.defaultPageSize;
this.pageMode = this.entitiesTableConfig.pageMode;
this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3];
if (this.entitiesTableConfig.useTimePageLink) {
@ -233,6 +238,16 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
this.pageLink = new PageLink(10, 0, null, sortOrder);
}
this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : MAX_SAFE_PAGE_SIZE;
if (routerQueryParams.hasOwnProperty('page')) {
this.pageLink.page = Number(routerQueryParams.page);
}
if (routerQueryParams.hasOwnProperty('pageSize')) {
this.pageLink.pageSize = Number(routerQueryParams.pageSize);
}
if (routerQueryParams.hasOwnProperty('textSearch') && !isEmptyStr(routerQueryParams.textSearch)) {
this.textSearchMode = true;
this.pageLink.textSearch = decodeURI(routerQueryParams.textSearch);
}
this.dataSource = this.entitiesTableConfig.dataSource(this.dataLoaded.bind(this));
if (this.entitiesTableConfig.onLoadAction) {
this.entitiesTableConfig.onLoadAction(this.route);
@ -254,36 +269,73 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
debounceTime(150),
distinctUntilChanged(),
tap(() => {
const queryParams: PageQueryParam = {
textSearch: encodeURI(this.pageLink.textSearch) || null
};
if (this.displayPagination) {
this.paginator.pageIndex = 0;
queryParams.page = null;
}
this.updateData();
this.updatedRouterParamsAndData(queryParams);
})
)
.subscribe();
this.route.queryParams.pipe(skip(1)).subscribe((params: PageQueryParam) => {
this.paginator.pageIndex = Number(params.page) || 0;
this.paginator.pageSize = Number(params.pageSize) || this.defaultPageSize;
this.sort.active = params.property || this.entitiesTableConfig.defaultSortOrder.property;
this.sort.direction = (params.direction || this.entitiesTableConfig.defaultSortOrder.direction).toLowerCase() as SortDirection;
if (params.hasOwnProperty('textSearch') && !isEmptyStr(params.textSearch)) {
this.textSearchMode = true;
this.pageLink.textSearch = decodeURI(params.textSearch);
} else {
this.textSearchMode = false;
this.pageLink.textSearch = null;
}
this.updateData();
});
this.updatePaginationSubscriptions();
this.viewInited = true;
}
private updatePaginationSubscriptions() {
if (this.sortSubscription) {
this.sortSubscription.unsubscribe();
this.sortSubscription = null;
}
if (this.updateDataSubscription) {
this.updateDataSubscription.unsubscribe();
this.updateDataSubscription = null;
}
let paginatorSubscription$: Observable<object>;
const sortSubscription$: Observable<object> = this.sort.sortChange.asObservable().pipe(
map((data) => {
const direction = data.direction.toUpperCase();
const queryParams: PageQueryParam = {
direction: (this.entitiesTableConfig?.defaultSortOrder?.direction === direction ? null : direction) as Direction,
property: this.entitiesTableConfig?.defaultSortOrder?.property === data.active ? null : data.active
};
if (this.displayPagination) {
queryParams.page = null;
this.paginator.pageIndex = 0;
}
return queryParams;
})
);
if (this.displayPagination) {
this.sortSubscription = this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
paginatorSubscription$ = this.paginator.page.asObservable().pipe(
map((data) => {
return {
page: data.pageIndex === 0 ? null : data.pageIndex,
pageSize: data.pageSize === this.defaultPageSize ? null : data.pageSize
};
})
);
}
this.updateDataSubscription = ((this.displayPagination ? merge(this.sort.sortChange, this.paginator.page)
: this.sort.sortChange) as Observable<any>)
.pipe(
tap(() => this.updateData())
)
.subscribe();
this.updateDataSubscription = ((this.displayPagination ? merge(sortSubscription$, paginatorSubscription$)
: sortSubscription$) as Observable<PageQueryParam>).pipe(
tap((queryParams) => {
this.updatedRouterParamsAndData(queryParams);
})
).subscribe();
}
addEnabled() {
@ -467,10 +519,14 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
exitFilterMode() {
this.textSearchMode = false;
this.pageLink.textSearch = null;
const queryParams: PageQueryParam = {
textSearch: null
};
if (this.displayPagination) {
this.paginator.pageIndex = 0;
queryParams.page = null;
}
this.updateData();
this.updatedRouterParamsAndData(queryParams);
}
resetSortAndFilter(update: boolean = true, preserveTimewindow: boolean = false) {
@ -485,7 +541,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
this.sort.active = sortable.id;
this.sort.direction = this.entitiesTableConfig.defaultSortOrder.direction === Direction.ASC ? 'asc' : 'desc';
if (update) {
this.updateData();
this.updatedRouterParamsAndData({}, 'preserve');
}
}
@ -603,4 +659,15 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
return entity.id.id;
}
protected updatedRouterParamsAndData(queryParams: object, queryParamsHandling: QueryParamsHandling = 'merge') {
if (this.pageMode) {
this.router.navigate([], {
relativeTo: this.route,
queryParams,
queryParamsHandling
});
} else {
this.updateData();
}
}
}

1
ui-ngx/src/app/modules/home/components/event/event-table-config.ts
View File

@ -92,6 +92,7 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
this.searchEnabled = false;
this.addEnabled = false;
this.entitiesDeleteEnabled = false;
this.pageMode = false;
this.headerComponent = EventTableHeaderComponent;

1
ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
View File

@ -160,6 +160,7 @@ export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = P
addDialogStyle = {};
defaultSortOrder: SortOrder = {property: 'createdTime', direction: Direction.DESC};
displayPagination = true;
pageMode = true;
defaultPageSize = 10;
columns: Array<EntityColumn<L>> = [];
cellActionDescriptors: Array<CellActionDescriptor<L>> = [];

1
ui-ngx/src/app/modules/home/models/entity/entity-table-component.models.ts
View File

@ -50,6 +50,7 @@ export interface IEntitiesTableComponent {
displayPagination: boolean;
pageSizeOptions: number[];
pageLink: PageLink;
pageMode: boolean;
textSearchMode: boolean;
timewindow: Timewindow;
dataSource: EntitiesDataSource<BaseData<HasId>>;

3
ui-ngx/src/app/modules/home/pages/audit-log/audit-log-routing.module.ts
View File

@ -29,7 +29,8 @@ const routes: Routes = [
breadcrumb: {
label: 'audit-log.audit-logs',
icon: 'track_changes'
}
},
isPage: true
}
}
];

6
ui-ngx/src/app/shared/models/page/page-link.ts
View File

@ -23,6 +23,12 @@ export const MAX_SAFE_PAGE_SIZE = 2147483647;
export type PageLinkSearchFunction<T> = (entity: T, textSearch: string, searchProperty?: string) => boolean;
export interface PageQueryParam extends Partial<SortOrder>{
textSearch?: string;
pageSize?: number;
page?: number;
}
export function defaultPageLinkSearchFunction(searchProperty?: string): PageLinkSearchFunction<any> {
return (entity, textSearch) => defaultPageLinkSearch(entity, textSearch, searchProperty);
}