Resolve conflict occurred when two or more pagination components are present in the same page

This commit is contained in:
Giuseppe Digilio
2019-12-23 15:10:08 +01:00
parent 4b67dbf10f
commit ce004c2e58

View File

@@ -225,10 +225,14 @@ export class PaginationComponent implements OnDestroy, OnInit {
} }
/** /**
* @param cdRef
* ChangeDetectorRef is a singleton service provided by Angular.
* @param route * @param route
* Route is a singleton service provided by Angular. * Route is a singleton service provided by Angular.
* @param router * @param router
* Router is a singleton service provided by Angular. * Router is a singleton service provided by Angular.
* @param hostWindowService
* the HostWindowService singleton.
*/ */
constructor(private cdRef: ChangeDetectorRef, constructor(private cdRef: ChangeDetectorRef,
private route: ActivatedRoute, private route: ActivatedRoute,
@@ -243,7 +247,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.updateRoute({ page: page.toString() }); this.updateRoute({ pageId: this.id, page: page.toString() });
} }
/** /**
@@ -253,7 +257,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
* The page size being navigated to. * The page size being navigated to.
*/ */
public doPageSizeChange(pageSize: number) { public doPageSizeChange(pageSize: number) {
this.updateRoute({ page: 1, pageSize: pageSize }); this.updateRoute({ pageId: this.id, page: 1, pageSize: pageSize });
} }
/** /**
@@ -263,7 +267,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
* The sort direction being navigated to. * The sort direction being navigated to.
*/ */
public doSortDirectionChange(sortDirection: SortDirection) { public doSortDirectionChange(sortDirection: SortDirection) {
this.updateRoute({ page: 1, sortDirection: sortDirection }); this.updateRoute({ pageId: this.id, page: 1, sortDirection: sortDirection });
} }
/** /**
@@ -273,7 +277,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
* The sort field being navigated to. * The sort field being navigated to.
*/ */
public doSortFieldChange(field: string) { public doSortFieldChange(field: string) {
this.updateRoute({ page: 1, sortField: field }); this.updateRoute({ pageId: this.id, page: 1, sortField: field });
} }
/** /**
@@ -413,27 +417,30 @@ export class PaginationComponent implements OnDestroy, OnInit {
* Method to update all pagination variables to the current query parameters * Method to update all pagination variables to the current query parameters
*/ */
private setFields() { private setFields() {
// (+) converts string to a number // set fields only when page id is the one configured for this pagination instance
const page = this.currentQueryParams.page; if (this.currentQueryParams.pageId === this.id) {
if (this.currentPage !== +page) { // (+) converts string to a number
this.setPage(+page); const page = this.currentQueryParams.page;
} if (this.currentPage !== +page) {
this.setPage(+page);
}
const pageSize = this.currentQueryParams.pageSize; const pageSize = this.currentQueryParams.pageSize;
if (this.pageSize !== +pageSize) { if (this.pageSize !== +pageSize) {
this.setPageSize(+pageSize); this.setPageSize(+pageSize);
} }
const sortDirection = this.currentQueryParams.sortDirection; const sortDirection = this.currentQueryParams.sortDirection;
if (this.sortDirection !== sortDirection) { if (this.sortDirection !== sortDirection) {
this.setSortDirection(sortDirection); this.setSortDirection(sortDirection);
} }
const sortField = this.currentQueryParams.sortField; const sortField = this.currentQueryParams.sortField;
if (this.sortField !== sortField) { if (this.sortField !== sortField) {
this.setSortField(sortField); this.setSortField(sortField);
}
this.cdRef.detectChanges();
} }
this.cdRef.detectChanges();
} }
/** /**