41914: implemented sort for pagination

src/app/core/cache/models/sort-options.model.ts

@@ -4,6 +4,8 @@ export enum SortDirection {
 }
 
 export class SortOptions {
-  field: string = "id";
+
-  direction: SortDirection = SortDirection.Ascending
+  constructor (public field: string = "name", public direction : SortDirection = SortDirection.Ascending) {
+
+  }
 }

src/app/core/data/data.service.ts

@@ -37,8 +37,9 @@ export abstract class DataService<TNormalized extends CacheableObject, TDomain>
       args.push(`scope=${options.scopeID}`);
     }
 
-    if (hasValue(options.currentPage)) {
+    if (hasValue(options.currentPage) && typeof options.currentPage === "number") {
-      args.push(`page=${options.currentPage}`);
+      /* TODO: this is a temporary fix for the pagination start index (0 or 1) discrepancy between the rest and the frontend respectively */
+      args.push(`page=${options.currentPage - 1}`);
     }
 
     if (hasValue(options.elementsPerPage)) {

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

@@ -1,9 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } 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 { PaginationComponentOptions } from "../../shared/pagination/pagination-component-options.model";
-import { SortOptions } from "../../core/cache/models/sort-options.model";
+import { SortOptions, SortDirection } from "../../core/cache/models/sort-options.model";
 
 @Component({
   selector: 'ds-top-level-community-list',
@@ -16,7 +16,8 @@ export class TopLevelCommunityListComponent implements OnInit {
   sortConfig : SortOptions;
 
   constructor(
-    private cds: ItemDataService
+    private cds: ItemDataService,
+    private ref: ChangeDetectorRef
   ) {
     this.universalInit();
   }
@@ -26,35 +27,37 @@ export class TopLevelCommunityListComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.topLevelCommunities = this.cds.findAll();
     this.config = new PaginationComponentOptions();
-    this.config.id = "top-level-pagination"
+    this.config.id = "top-level-pagination";
     this.config.pageSizeOptions = [ 5, 10, 20, 40, 60, 80, 100 ];
-
+    this.config.pageSize = 4;
     this.sortConfig =  new SortOptions();
+
+    this.updateResults();
   }
 
-  onPageChange(currentPage): void {
+  onPageChange(currentPage: number): void {
     this.config.currentPage = currentPage;
     this.updateResults();
   }
 
-  onPageSizeChange(elementsPerPage): void {
+  onPageSizeChange(elementsPerPage: number): void {
     this.config.pageSize = elementsPerPage;
     this.updateResults();
   }
 
-  onSortDirectionChange(sortDirection): void {
+  onSortDirectionChange(sortDirection: SortDirection): void {
-    this.sortConfig.direction = sortDirection;
+    this.sortConfig = new SortOptions(this.sortConfig.field, sortDirection);
     this.updateResults();
   }
 
-  onSortFieldChange(field): void {
+  onSortFieldChange(field: string): void {
-    this.sortConfig.field = field;
+    this.sortConfig = new SortOptions(field, this.sortConfig.direction);
     this.updateResults();
   }
 
   updateResults() {
     this.topLevelCommunities = this.cds.findAll({ currentPage: this.config.currentPage, elementsPerPage: this.config.pageSize, sort: this.sortConfig });
+    this.ref.detectChanges();
   }
 }

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

@@ -1,6 +1,8 @@
 <ds-pagination [paginationOptions]="config"
                [collectionSize]="(pageInfo | async)?.totalElements"
                [sortOptions]="sortConfig"
+               [hideGear]="hideGear"
+               [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
                (pageChange)="onPageChange($event)"
                (pageSizeChange)="onPageSizeChange($event)"
                (sortDirectionChange)="onSortDirectionChange($event)"

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

@@ -8,7 +8,7 @@ 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";
-import { SortOptions } from "../core/cache/models/sort-options.model";
+import { SortOptions, SortDirection } from "../core/cache/models/sort-options.model";
 
 
 @Component({
@@ -23,12 +23,33 @@ export class ObjectListComponent implements OnInit {
     @Input() objects: RemoteData<DSpaceObject[]>;
     @Input() config : PaginationComponentOptions;
     @Input() sortConfig : SortOptions;
+    @Input() hideGear : boolean = false;
+    @Input() hidePagerWhenSinglePage : boolean = true;
     pageInfo : Observable<PageInfo>;
 
-    @Output() pageChange = new EventEmitter();
+    /**
-    @Output() pageSizeChange = new EventEmitter();
+     * An event fired when the page is changed.
-    @Output() sortDirectionChange = new EventEmitter();
+     * Event's payload equals to the newly selected page.
-    @Output() sortFieldChange = new EventEmitter();
+     */
+    @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+    /**
+     * An event fired when the page wsize is changed.
+     * Event's payload equals to the newly selected page size.
+     */
+    @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+
+    /**
+     * An event fired when the sort direction is changed.
+     * Event's payload equals to the newly selected sort direction.
+     */
+    @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();
+
+    /**
+     * An event fired when the sort field is changed.
+     * Event's payload equals to the newly selected sort field.
+     */
+    @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
     data: any = {};
 
     constructor() {

src/app/shared/pagination/pagination.component.html

@@ -1,4 +1,4 @@
-<div class="pagination-masked clearfix top">
+<div class="pagination-masked clearfix top {{hideGear ? 'invisible' : ''}}">
   <div class="row">
     <div class="col pagination-info">
       <span class="align-middle hidden-xs-down">{{ 'pagination.showing.label' | translate }}</span>
@@ -20,7 +20,7 @@
 
 <ng-content></ng-content>
 
-<div class="pagination justify-content-center clearfix bottom">
+<div class="pagination justify-content-center clearfix bottom {{(hidePagerWhenSinglePage && pageSize >= collectionSize) ? 'invisible' : ''}}">
   <ngb-pagination [boundaryLinks]="paginationOptions.boundaryLinks"
                   [collectionSize]="collectionSize"
                   [disabled]="paginationOptions.disabled"

src/app/shared/pagination/pagination.component.ts

@@ -71,6 +71,17 @@ export class PaginationComponent implements OnDestroy, OnInit {
      */
     @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
 
+
+    /**
+     * Option for hiding the gear
+     */
+    @Input() public hideGear: boolean = false;
+
+    /**
+     * Option for hiding the pager when there is less than 2 pages
+     */
+    @Input() public hidePagerWhenSinglePage: boolean = true;
+
     /**
      * Current page.
      */
@@ -127,9 +138,6 @@ export class PaginationComponent implements OnDestroy, OnInit {
      */
     public paginationControls;
 
-    /**
-     *
-     */
 
     /**
      * Subscriber to observable.