41914: Finished pagination feature for object list

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

@@ -1,13 +1,7 @@
 <div *ngIf="topLevelCommunities.hasSucceeded | async">
   <h2>{{'home.top-level-communities.head' | translate}}</h2>
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
-  <ds-object-list [config]="config" [objects]="topLevelCommunities"></ds-object-list>
-  <!--<ul>-->
-    <!--<li *ngFor="let community of (topLevelCommunities.payload | async)">-->
-      <!--<p>-->
-        <!--<span class="lead"><a [routerLink]="['/communities', community.id]">{{community.name}}</a></span><br>-->
-        <!--<span class="text-muted">{{community.shortDescription}}</span>-->
-      <!--</p>-->
-    <!--</li>-->
-  <!--</ul>-->
+  <ds-object-list [config]="config" [objects]="topLevelCommunities"
+                  (pageChange)="onPageChange($event)"
+                  (pageSizeChange)="onPageSizeChange($event)"></ds-object-list>
 </div>

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

@@ -2,7 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { RemoteData } from "../../core/data/remote-data";
 import { ItemDataService } from "../../core/data/item-data.service";
 import { Item } from "../../core/shared/item.model";
-import { PaginationOptions } from "../../core/cache/models/pagination-options.model";
+import { PaginationComponentOptions } from "../../shared/pagination/pagination-component-options.model";
+import { SortOptions } from "../../core/cache/models/sort-options.model";
 
 @Component({
   selector: 'ds-top-level-community-list',
@@ -11,7 +12,7 @@ import { PaginationOptions } from "../../core/cache/models/pagination-options.mo
 })
 export class TopLevelCommunityListComponent implements OnInit {
   topLevelCommunities: RemoteData<Item[]>;
-  config : PaginationOptions;
+  config : PaginationComponentOptions;
 
   constructor(
     private cds: ItemDataService
@@ -25,8 +26,22 @@ export class TopLevelCommunityListComponent implements OnInit {
 
   ngOnInit(): void {
     this.topLevelCommunities = this.cds.findAll();
-    this.config = new PaginationOptions();
+    this.config = new PaginationComponentOptions();
     this.config.id = "top-level-pagination"
     this.config.pageSizeOptions = [ 5, 10, 20, 40, 60, 80, 100 ];
   }
+
+  onPageChange(currentPage): void {
+    this.config.currentPage = currentPage;
+    this.updateResults();
+  }
+
+  onPageSizeChange(elementsPerPage): void {
+    this.config.pageSize = elementsPerPage;
+    this.updateResults();
+  }
+
+  updateResults() {
+    this.topLevelCommunities = this.cds.findAll({ currentPage: this.config.currentPage, elementsPerPage: this.config.pageSize });
+  }
 }

src/app/object-list/object-list.component.html

@@ -1,7 +1,7 @@
 <ds-pagination [paginationOptions]="config"
                [collectionSize]="(pageInfo | async)?.totalElements"
-               (pageChange)="config.currentPage = pageChange($event)"
-               (pageSizeChange)="config.pageSize = pageSize($event)">
+               (pageChange)="onPageChange($event)"
+               (pageSizeChange)="onPageSizeChange($event)">
     <ul *ngIf="objects.hasSucceeded | async">
         <li *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
             <ds-object-list-element [object]="object"></ds-object-list-element>

src/app/object-list/object-list.component.ts

@@ -1,12 +1,13 @@
 import {
     Component, Input, ViewEncapsulation, ChangeDetectionStrategy,
-    OnInit
+    OnInit, Output
 } from '@angular/core';
 import { RemoteData } from "../core/data/remote-data";
 import { DSpaceObject } from "../core/shared/dspace-object.model";
-import { PaginationOptions } from "../core/cache/models/pagination-options.model";
 import { PageInfo } from "../core/shared/page-info.model";
 import { Observable } from "rxjs";
+import { PaginationComponentOptions } from "../shared/pagination/pagination-component-options.model";
+import { EventEmitter } from "@angular/common/src/facade/async";
 
 
 @Component({
@@ -19,8 +20,11 @@ import { Observable } from "rxjs";
 export class ObjectListComponent implements OnInit {
 
     @Input() objects: RemoteData<DSpaceObject[]>;
-    @Input() config : PaginationOptions;
+    @Input() config : PaginationComponentOptions;
     pageInfo : Observable<PageInfo>;
+
+    @Output() pageChange = new EventEmitter();
+    @Output() pageSizeChange = new EventEmitter();
     data: any = {};
 
     constructor() {
@@ -34,4 +38,11 @@ export class ObjectListComponent implements OnInit {
         this.pageInfo = this.objects.pageInfo;
     }
 
+    onPageChange(event) {
+        this.pageChange.emit(event);
+    }
+
+    onPageSizeChange(event) {
+        this.pageSizeChange.emit(event);
+    }
 }