From e632e9d84b4d54fc8f76ab4dc7419764a7f6d770 Mon Sep 17 00:00:00 2001
From: Lotte Hofstede <lotte_hofstede@hotmail.com>
Date: Mon, 18 Sep 2017 16:53:50 +0200
Subject: [PATCH] 44239: more pagination fixes
---
.../top-level-community-list.component.html | 2 +-
.../top-level-community-list.component.ts | 32 +++++------
.../shared/pagination/pagination.component.ts | 56 ++++++++++++-------
3 files changed, 52 insertions(+), 38 deletions(-)
diff --git a/src/app/home/top-level-community-list/top-level-community-list.component.html b/src/app/home/top-level-community-list/top-level-community-list.component.html
index 93b6d3bfaf..a5450b6cce 100644
--- a/src/app/home/top-level-community-list/top-level-community-list.component.html
+++ b/src/app/home/top-level-community-list/top-level-community-list.component.html
@@ -2,5 +2,5 @@
<h2>{{'home.top-level-communities.head' | translate}}</h2>
<p class="lead">{{'home.top-level-communities.help' | translate}}</p>
<ds-object-list [config]="config" [sortConfig]="sortConfig"
- [objects]="topLevelCommunities" [hideGear]="false"></ds-object-list>
+ [objects]="topLevelCommunities" [hideGear]="false" (paginationChange)="updatePage()"></ds-object-list>
</div>
diff --git a/src/app/home/top-level-community-list/top-level-community-list.component.ts b/src/app/home/top-level-community-list/top-level-community-list.component.ts
index 42815d0fda..2362d7ddd7 100644
--- a/src/app/home/top-level-community-list/top-level-community-list.component.ts
+++ b/src/app/home/top-level-community-list/top-level-community-list.component.ts
@@ -13,16 +13,12 @@ import { ActivatedRoute } from '@angular/router';
templateUrl: './top-level-community-list.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class TopLevelCommunityListComponent implements OnInit {
+export class TopLevelCommunityListComponent {
topLevelCommunities: RemoteData<Community[]>;
config: PaginationComponentOptions;
sortConfig: SortOptions;
- private sub;
- constructor(
- private cds: CommunityDataService,
- private route: ActivatedRoute
- ) {
+ constructor(private cds: CommunityDataService) {
this.config = new PaginationComponentOptions();
this.config.id = 'top-level-pagination';
this.config.pageSizeOptions = [4];
@@ -31,19 +27,19 @@ export class TopLevelCommunityListComponent implements OnInit {
}
ngOnInit(): void {
-
- this.sub = this.route
- .queryParams
- .subscribe((params) => {
- this.topLevelCommunities = this.cds.findAll({
- currentPage: params.page,
- elementsPerPage: params.pageSize,
- sort: { field: params.sortField, direction: params.sortDirection }
- });
- });
+ this.updatePage({
+ page: 1,
+ pageSize: this.config.pageSize,
+ sortField: this.sortConfig.field,
+ direction: this.sortConfig.direction
+ });
}
- ngOnDestroy() {
- this.sub.unsubscribe();
+ updatePage(data) {
+ this.topLevelCommunities = this.cds.findAll({
+ currentPage: data.page,
+ elementsPerPage: data.pageSize,
+ sort: { field: data.sortField, direction: data.sortDirection }
+ });
}
}
diff --git a/src/app/shared/pagination/pagination.component.ts b/src/app/shared/pagination/pagination.component.ts
index 8f0d97f7be..80cf8b10ae 100644
--- a/src/app/shared/pagination/pagination.component.ts
+++ b/src/app/shared/pagination/pagination.component.ts
@@ -325,27 +325,27 @@ export class PaginationComponent implements OnDestroy, OnInit {
* The page size to validate
*/
private validateParams(page: any, pageSize: any, sortDirection: any, sortField: any) {
+ const originalPageInfo = {
+ id: this.id,
+ page: page,
+ pageSize: pageSize,
+ sortDirection: sortDirection,
+ sortField: sortField
+ };
// tslint:disable-next-line:triple-equals
- const newPage = validatePage();
- const newSize = validateSize();
-
- this.currentPage = page
- } else {
- this.currentPage = this.paginationOptions.currentPage;
- }
-
- let filteredPageSize = this.pageSizeOptions.find((x) => x == pageSize);
- if (!isNumeric(page) || !filteredPageSize) {
- const filteredPage = isNumeric(page) ? page : this.currentPage;
- filteredPageSize = (filteredPageSize) ? filteredPageSize : this.pageSize;
+ const filteredPageInfo = {
+ id: this.id,
+ page: this.validatePage(page),
+ pageSize: this.validatePageSize(pageSize),
+ sortDirection: sortDirection,
+ sortField: sortField
+ };
+
+ // let filteredPageSize = this.pageSizeOptions.find((x) => x === pageSize);
+ if (JSON.stringify(originalPageInfo) !== JSON.stringify(filteredPageInfo)) {
+ // filteredPageSize = (filteredPageSize) ? filteredPageSize : this.pageSize;
this.router.navigate([], {
- queryParams: {
- pageId: this.id,
- page: filteredPage,
- pageSize: filteredPageSize,
- sortDirection: sortDirection,
- sortField: sortField
- }
+ queryParams: filteredPageInfo
});
} else {
let hasChanged = false;
@@ -386,6 +386,23 @@ export class PaginationComponent implements OnDestroy, OnInit {
}
}
+ private validatePage(page: any): string {
+ let result = this.currentPage
+ if (isNumeric(page)) {
+ result = page;
+ }
+ return result + '';
+ }
+
+ private validatePageSize(pageSize: any): string {
+ const filteredPageSize = this.pageSizeOptions.find((x) => x === pageSize);
+ let result = this.pageSize
+ if (filteredPageSize) {
+ result = pageSize;
+ }
+ return result + '';
+ }
+
/**
* Ensure options passed contains the required properties.
*
@@ -409,4 +426,5 @@ export class PaginationComponent implements OnDestroy, OnInit {
get shouldShowBottomPager(): boolean {
return this.hasMultiplePages || !this.hidePagerWhenSinglePage
}
+
}
--
GitLab