44024: collection page pagination fix

src/app/collection-page/collection-page.component.html

@@ -32,13 +32,10 @@
     </ds-comcol-page-content>
   </div>
   <br>
-  <div *ngIf="itemData.hasSucceeded | async">
+  <div *ngIf="(itemData.hasSucceeded | async)">
     <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
-    <ds-object-list [config]="config" [sortConfig]="sortConfig"
+    <ds-object-list [config]="paginationConfig" [sortConfig]="sortConfig"
                     [objects]="itemData" [hideGear]="false"
-                    (pageChange)="onPageChange($event)"
-                    (pageSizeChange)="onPageSizeChange($event)"
-                    (sortDirectionChange)="onSortDirectionChange($event)"
-                    (sortFieldChange)="onSortDirectionChange($event)"></ds-object-list>
+                    (paginationChange)="updatePage($event)"></ds-object-list>
   </div>
 </div>

src/app/collection-page/collection-page.component.ts

@@ -14,75 +14,81 @@ import { ItemDataService } from '../core/data/item-data.service';
 import { Item } from '../core/shared/item.model';
 import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
-import { hasValue, isUndefined } from '../shared/empty.util';
+import { hasValue, isNotEmpty, isUndefined } from '../shared/empty.util';
 import { PageInfo } from '../core/shared/page-info.model';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'ds-collection-page',
   styleUrls: ['./collection-page.component.scss'],
   templateUrl: './collection-page.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CollectionPageComponent implements OnInit, OnDestroy {
   collectionData: RemoteData<Collection>;
   itemData: RemoteData<Item[]>;
   logoData: RemoteData<Bitstream>;
-  config: PaginationComponentOptions;
+  paginationConfig: PaginationComponentOptions;
   sortConfig: SortOptions;
   private subs: Subscription[] = [];
   private collectionId: string;
-  private pageInfoState: PageInfo;
-
-  constructor(
-    private collectionDataService: CollectionDataService,
-    private itemDataService: ItemDataService,
-    private ref: ChangeDetectorRef,
-    private route: ActivatedRoute
-  ) {
 
+  constructor(private collectionDataService: CollectionDataService,
+              private itemDataService: ItemDataService,
+              private route: ActivatedRoute) {
+    this.paginationConfig = new PaginationComponentOptions();
+    this.paginationConfig.id = 'collection-page-pagination';
+    this.paginationConfig.pageSizeOptions = [4];
+    this.paginationConfig.pageSize = 4;
+    this.paginationConfig.currentPage = 1;
+    this.sortConfig = new SortOptions();
   }
 
   ngOnInit(): void {
-    this.subs.push(this.route.params.map((params: Params) => params.id)
-      .subscribe((id: string) => {
-        this.collectionId = id;
-        this.collectionData = this.collectionDataService.findById(this.collectionId);
-        this.subs.push(this.collectionData.payload.subscribe((collection) => this.logoData = collection.logo));
+    this.subs.push(
+      Observable.combineLatest(
+        this.route.params,
+        this.route.queryParams,
+        (params, queryParams,) => {
+          return Object.assign({}, params, queryParams);
+        })
+        .subscribe((params) => {
+          this.collectionId = params.id;
+          this.collectionData = this.collectionDataService.findById(this.collectionId);
+          this.subs.push(this.collectionData.payload.subscribe((collection) => this.logoData = collection.logo));
 
-        this.config = new PaginationComponentOptions();
-        this.config.id = 'collection-browse';
-        this.config.pageSizeOptions = [4];
-        this.config.pageSize = 4;
-        this.sortConfig = new SortOptions();
+          const page = +params.page || this.paginationConfig.currentPage;
+          const pageSize = +params.pageSize || this.paginationConfig.pageSize;
+          const sortDirection = +params.page || this.sortConfig.direction;
+          const pagination = Object.assign({},
+            this.paginationConfig,
+            { currentPage: page, pageSize: pageSize }
+          );
+          const sort = Object.assign({},
+            this.sortConfig,
+            { direction: sortDirection, field: params.sortField }
+          );
+          this.updatePage({
+            pagination: pagination,
+            sort: sort
+          });
+        }));
 
-        this.updateResults();
-      }));
+  }
 
+  updatePage(searchOptions) {
+    this.itemData = this.itemDataService.findAll({
+      scopeID: this.collectionId,
+      currentPage: searchOptions.pagination.currentPage,
+      elementsPerPage: searchOptions.pagination.pageSize,
+      sort: searchOptions.sort
+    });
   }
 
   ngOnDestroy(): void {
     this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
   }
 
-  onPaginationChange(field: string): void {
-    this.sortConfig = new SortOptions(field, this.sortConfig.direction);
-    this.updateResults();
-  }
-
-  updateResults() {
-    this.itemData = null;
-    this.ref.markForCheck();
-    this.itemData = this.itemDataService.findAll({
-      scopeID: this.collectionId,
-      currentPage: this.config.currentPage,
-      elementsPerPage: this.config.pageSize,
-      sort: this.sortConfig
-    });
-    this.subs.push(this.itemData.pageInfo.subscribe((pageInfo) => {
-      if (isUndefined(this.pageInfoState) || this.pageInfoState !== pageInfo) {
-        this.pageInfoState = pageInfo;
-        this.ref.detectChanges();
-      }
-    }));
+  isNotEmpty(object: any) {
+    return isNotEmpty(object);
   }
 }

src/app/home/top-level-community-list/top-level-community-list.component.ts

@@ -11,8 +11,8 @@ import { ActivatedRoute } from '@angular/router';
   selector: 'ds-top-level-community-list',
   styleUrls: ['./top-level-community-list.component.scss'],
   templateUrl: './top-level-community-list.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
 })
+
 export class TopLevelCommunityListComponent {
   topLevelCommunities: RemoteData<Community[]>;
   config: PaginationComponentOptions;
@@ -23,10 +23,11 @@ export class TopLevelCommunityListComponent {
     this.config.id = 'top-level-pagination';
     this.config.pageSizeOptions = [4];
     this.config.pageSize = 4;
+    this.config.currentPage = 1;
     this.sortConfig = new SortOptions();
 
     this.updatePage({
-      page: 1,
+      page: this.config.currentPage,
       pageSize: this.config.pageSize,
       sortField: this.sortConfig.field,
       direction: this.sortConfig.direction

src/app/shared/search-form/search-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { Router } from '@angular/router';
 import { isNotEmpty, hasValue, isEmpty } from '../empty.util';
@@ -15,13 +15,14 @@ import { Observable } from 'rxjs/Observable';
   styleUrls: ['./search-form.component.scss'],
   templateUrl: './search-form.component.html',
 })
-export class SearchFormComponent implements OnInit {
+export class SearchFormComponent implements OnInit, OnDestroy {
   @Input() query: string;
   selectedId = '';
   // Optional existing search parameters
   @Input() currentParams: {};
   @Input() scopes: Observable<DSpaceObject[]>;
   scopeOptions: string[] = [];
+  sub;
 
   @Input()
   set scope(dso: DSpaceObject) {
@@ -32,6 +33,7 @@ export class SearchFormComponent implements OnInit {
 
   ngOnInit(): void {
     if (this.scopes) {
+      this.sub =
       this.scopes
         .filter((scopes: DSpaceObject[]) => isEmpty(scopes))
         .subscribe((scopes: DSpaceObject[]) => {
@@ -50,7 +52,6 @@ export class SearchFormComponent implements OnInit {
   }
 
   updateSearch(data: any) {
-
     this.router.navigate(['/search'], {
       queryParams: Object.assign({}, this.currentParams,
         {
@@ -73,4 +74,10 @@ export class SearchFormComponent implements OnInit {
     }
     return id1 === id2;
   }
+
+  ngOnDestroy(): void {
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
+  }
 }