Remove matrix URL notation in PaginationComponent

This commit is contained in:
Giuseppe Digilio
2017-06-12 16:35:14 +02:00
parent d4b7f5f9ce
commit e3778afd45
3 changed files with 14 additions and 12 deletions

View File

@@ -247,12 +247,12 @@ describe('Pagination component', () => {
changePage(testFixture, 3); changePage(testFixture, 3);
tick(); tick();
expect(routerStub.navigate).toHaveBeenCalledWith([{pageId: 'test', page: 3, pageSize: 10}]); expect(routerStub.navigate).toHaveBeenCalledWith([], { queryParams: { pageId: 'test', page: 3, pageSize: 10 } });
expect(paginationComponent.currentPage).toEqual(3); expect(paginationComponent.currentPage).toEqual(3);
changePageSize(testFixture, '20'); changePageSize(testFixture, '20');
tick(); tick();
expect(routerStub.navigate).toHaveBeenCalledWith([{pageId: 'test', page: 3, pageSize: 20}]); expect(routerStub.navigate).toHaveBeenCalledWith([], { queryParams: { pageId: 'test', page: 3, pageSize: 20 } });
expect(paginationComponent.pageSize).toEqual(20); expect(paginationComponent.pageSize).toEqual(20);
})); }));

View File

@@ -57,6 +57,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
* Current page. * Current page.
*/ */
public currentPage = 1; public currentPage = 1;
public currentQueryParams = {};
/** /**
* An observable of HostWindowState type * An observable of HostWindowState type
@@ -121,14 +122,15 @@ export class PaginationComponent implements OnDestroy, OnInit {
this.pageSize = this.paginationOptions.pageSize; this.pageSize = this.paginationOptions.pageSize;
this.pageSizeOptions = this.paginationOptions.pageSizeOptions; this.pageSizeOptions = this.paginationOptions.pageSizeOptions;
this.routeSubscription = this.route.params this.routeSubscription = this.route.queryParams
.map(params => params) .map(queryParams => queryParams)
.subscribe(params => { .subscribe(queryParams => {
if(this.id == params['pageId'] this.currentQueryParams = queryParams;
&& (this.paginationOptions.currentPage != params['page'] if(this.id == queryParams['pageId']
|| this.paginationOptions.pageSize != params['pageSize']) && (this.paginationOptions.currentPage != queryParams['page']
|| this.paginationOptions.pageSize != queryParams['pageSize'])
) { ) {
this.validateParams(params['page'], params['pageSize']); this.validateParams(queryParams['page'], queryParams['pageSize']);
} }
}); });
this.setShowingDetail(); this.setShowingDetail();
@@ -162,7 +164,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
* The page being navigated to. * The page being navigated to.
*/ */
public doPageChange(page: number) { public doPageChange(page: number) {
this.router.navigate([{ pageId: this.id, page: page, pageSize: this.pageSize }]); this.router.navigate([], { queryParams: Object.assign({}, this.currentQueryParams, { pageId: this.id, page: page, pageSize: this.pageSize }) });
this.currentPage = page; this.currentPage = page;
this.setShowingDetail(); this.setShowingDetail();
this.pageChange.emit(page); this.pageChange.emit(page);
@@ -175,7 +177,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
* The new page size. * The new page size.
*/ */
public setPageSize(pageSize: number) { public setPageSize(pageSize: number) {
this.router.navigate([{ pageId: this.id, page: this.currentPage, pageSize: pageSize }]); this.router.navigate([], { queryParams: Object.assign({}, this.currentQueryParams, { pageId: this.id, page: this.currentPage, pageSize: pageSize }) });
this.pageSize = pageSize; this.pageSize = pageSize;
this.setShowingDetail(); this.setShowingDetail();
this.pageSizeChange.emit(pageSize); this.pageSizeChange.emit(pageSize);

View File

@@ -4,7 +4,6 @@ import { BehaviorSubject } from "rxjs";
export class RouterStub { export class RouterStub {
//noinspection TypeScriptUnresolvedFunction //noinspection TypeScriptUnresolvedFunction
navigate = jasmine.createSpy('navigate'); navigate = jasmine.createSpy('navigate');
//navigate1: jasmine.createSpy('navigate');
} }
export class ActivatedRouteStub { export class ActivatedRouteStub {
@@ -12,6 +11,7 @@ export class ActivatedRouteStub {
// ActivatedRoute.params is Observable // ActivatedRoute.params is Observable
private subject = new BehaviorSubject(this.testParams); private subject = new BehaviorSubject(this.testParams);
params = this.subject.asObservable(); params = this.subject.asObservable();
queryParams = this.subject.asObservable();
constructor(params?: Params) { constructor(params?: Params) {
if (params) { if (params) {