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

UI: Added persistent page link models and subscribe to router query params

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2022-01-12 11:01:29 +02:00
parent 6670453846
commit e4579d21d7
2 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,12 +31,12 @@ import {
import { PageComponent } from '@shared/components/page.component'; import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; 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 { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator'; 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 { 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 { Direction, SortOrder } from '@shared/models/page/sort-order';
import { forkJoin, fromEvent, merge, Observable, of, Subscription } from 'rxjs'; import { forkJoin, fromEvent, merge, Observable, of, Subscription } from 'rxjs';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
@ -194,7 +194,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
this.columnsUpdated(); this.columnsUpdated();
const routerQueryParams = this.route.snapshot.queryParams; const routerQueryParams: PageQueryParam = this.route.snapshot.queryParams;
let sortOrder: SortOrder = null; let sortOrder: SortOrder = null;
if (this.entitiesTableConfig.defaultSortOrder || routerQueryParams.hasOwnProperty('direction') || routerQueryParams.hasOwnProperty('property')) { if (this.entitiesTableConfig.defaultSortOrder || routerQueryParams.hasOwnProperty('direction') || routerQueryParams.hasOwnProperty('property')) {
@ -219,10 +219,10 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
} }
this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : MAX_SAFE_PAGE_SIZE; this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : MAX_SAFE_PAGE_SIZE;
if (routerQueryParams.hasOwnProperty('page')) { if (routerQueryParams.hasOwnProperty('page')) {
this.pageLink.page = routerQueryParams.page; this.pageLink.page = Number(routerQueryParams.page);
} }
if (routerQueryParams.hasOwnProperty('pageSize')) { if (routerQueryParams.hasOwnProperty('pageSize')) {
this.pageLink.pageSize = routerQueryParams.pageSize; this.pageLink.pageSize = Number(routerQueryParams.pageSize);
} }
if (routerQueryParams.hasOwnProperty('textSearch') && !isEmptyStr(routerQueryParams.textSearch)) { if (routerQueryParams.hasOwnProperty('textSearch') && !isEmptyStr(routerQueryParams.textSearch)) {
this.textSearchMode = true; this.textSearchMode = true;
@ -249,19 +249,33 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
debounceTime(150), debounceTime(150),
distinctUntilChanged(), distinctUntilChanged(),
tap(() => { tap(() => {
const queryParams: any = { const queryParams: PageQueryParam = {
textSearch: encodeURI(this.pageLink.textSearch) || null textSearch: encodeURI(this.pageLink.textSearch) || null
}; };
if (this.displayPagination) { if (this.displayPagination) {
this.paginator.pageIndex = 0; this.paginator.pageIndex = 0;
queryParams.page = null; queryParams.page = null;
} }
this.updatedRouterQueryParams(queryParams); this.updatedRouterParamsAndData(queryParams);
this.updateData();
}) })
) )
.subscribe(); .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.updatePaginationSubscriptions();
this.viewInited = true; this.viewInited = true;
} }
@ -275,8 +289,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
const sortSubscription$: Observable<object> = this.sort.sortChange.asObservable().pipe( const sortSubscription$: Observable<object> = this.sort.sortChange.asObservable().pipe(
map((data) => { map((data) => {
const direction = data.direction.toUpperCase(); const direction = data.direction.toUpperCase();
const queryParams: any = { const queryParams: PageQueryParam = {
direction: this.entitiesTableConfig?.defaultSortOrder?.direction === direction ? null : direction, direction: (this.entitiesTableConfig?.defaultSortOrder?.direction === direction ? null : direction) as Direction,
property: this.entitiesTableConfig?.defaultSortOrder?.property === data.active ? null : data.active property: this.entitiesTableConfig?.defaultSortOrder?.property === data.active ? null : data.active
}; };
if (this.displayPagination) { if (this.displayPagination) {
@ -297,10 +311,9 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
); );
} }
this.updateDataSubscription = ((this.displayPagination ? merge(sortSubscription$, paginatorSubscription$) this.updateDataSubscription = ((this.displayPagination ? merge(sortSubscription$, paginatorSubscription$)
: sortSubscription$) as Observable<any>).pipe( : sortSubscription$) as Observable<PageQueryParam>).pipe(
tap((queryParams) => { tap((queryParams) => {
this.updatedRouterQueryParams(queryParams); this.updatedRouterParamsAndData(queryParams);
this.updateData();
}) })
).subscribe(); ).subscribe();
} }
@ -486,15 +499,14 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
exitFilterMode() { exitFilterMode() {
this.textSearchMode = false; this.textSearchMode = false;
this.pageLink.textSearch = null; this.pageLink.textSearch = null;
const queryParams: any = { const queryParams: PageQueryParam = {
textSearch: null textSearch: null
}; };
if (this.displayPagination) { if (this.displayPagination) {
this.paginator.pageIndex = 0; this.paginator.pageIndex = 0;
queryParams.page = null; queryParams.page = null;
} }
this.updatedRouterQueryParams(queryParams); this.updatedRouterParamsAndData(queryParams);
this.updateData();
} }
resetSortAndFilter(update: boolean = true, preserveTimewindow: boolean = false) { resetSortAndFilter(update: boolean = true, preserveTimewindow: boolean = false) {
@ -508,9 +520,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
const sortable = this.sort.sortables.get(this.entitiesTableConfig.defaultSortOrder.property); const sortable = this.sort.sortables.get(this.entitiesTableConfig.defaultSortOrder.property);
this.sort.active = sortable.id; this.sort.active = sortable.id;
this.sort.direction = this.entitiesTableConfig.defaultSortOrder.direction === Direction.ASC ? 'asc' : 'desc'; this.sort.direction = this.entitiesTableConfig.defaultSortOrder.direction === Direction.ASC ? 'asc' : 'desc';
this.updatedRouterQueryParams({}, 'preserve');
if (update) { if (update) {
this.updateData(); this.updatedRouterParamsAndData({}, 'preserve');
} }
} }
@ -628,13 +639,15 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
return entity.id.id; return entity.id.id;
} }
protected updatedRouterQueryParams(queryParams: object, queryParamsHandling: QueryParamsHandling = 'merge') { protected updatedRouterParamsAndData(queryParams: object, queryParamsHandling: QueryParamsHandling = 'merge') {
if (this.persistentPageLinkMode) { if (this.persistentPageLinkMode) {
this.router.navigate([], { this.router.navigate([], {
relativeTo: this.route, relativeTo: this.route,
queryParams, queryParams,
queryParamsHandling queryParamsHandling
}); });
} else {
this.updateData();
} }
} }
} }

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 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> { export function defaultPageLinkSearchFunction(searchProperty?: string): PageLinkSearchFunction<any> {
return (entity, textSearch) => defaultPageLinkSearch(entity, textSearch, searchProperty); return (entity, textSearch) => defaultPageLinkSearch(entity, textSearch, searchProperty);
} }