44239: more pagination fixes

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>

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.updatePage({
+      page: 1,
+      pageSize: this.config.pageSize,
+      sortField: this.sortConfig.field,
+      direction: this.sortConfig.direction
+    });
+  }
 
-    this.sub = this.route
-      .queryParams
-      .subscribe((params) => {
+  updatePage(data) {
     this.topLevelCommunities = this.cds.findAll({
-          currentPage: params.page,
-          elementsPerPage: params.pageSize,
-          sort: { field: params.sortField, direction: params.sortDirection }
-        });
+      currentPage: data.page,
+      elementsPerPage: data.pageSize,
+      sort: { field: data.sortField, direction: data.sortDirection }
     });
   }
-
-  ngOnDestroy() {
-    this.sub.unsubscribe();
-  }
 }

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) {
-    // 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;
-      this.router.navigate([], {
-        queryParams: {
-          pageId: this.id,
-          page: filteredPage,
-          pageSize: filteredPageSize,
+    const originalPageInfo = {
+      id: this.id,
+      page: page,
+      pageSize: pageSize,
       sortDirection: sortDirection,
       sortField: sortField
-        }
+    };
+    // tslint:disable-next-line:triple-equals
+    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: 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
   }
+
 }