41914: implemented pagination sort direction/field

resources/i18n/en.json

@@ -36,6 +36,7 @@
   },
   "pagination": {
     "results-per-page": "Results Per Page",
+    "sort-direction": "Sort Options",
     "showing": {
       "label": "Now showing items ",
       "detail": "{{ range }} of {{ total }}"

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

@@ -46,7 +46,11 @@ export abstract class DataService<TNormalized extends CacheableObject, TDomain>
     }
 
     if (hasValue(options.sort)) {
-      args.push(`sort=${options.sort.field},${options.sort.direction}`);
+      let direction = 'asc';
+      if (options.sort.direction === 1) {
+        direction = 'desc';
+      }
+      args.push(`sort=${options.sort.field},${direction}`);
     }
 
     if (isNotEmpty(args)) {

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

@@ -1,7 +1,9 @@
 <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 [config]="config" [sortConfig]="sortConfig" [objects]="topLevelCommunities"
                   (pageChange)="onPageChange($event)"
-                  (pageSizeChange)="onPageSizeChange($event)"></ds-object-list>
+                  (pageSizeChange)="onPageSizeChange($event)"
+                  (sortDirectionChange)="onSortDirectionChange($event)"
+                  (sortFieldChange)="onSortDirectionChange($event)"></ds-object-list>
 </div>

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

@@ -13,6 +13,7 @@ import { SortOptions } from "../../core/cache/models/sort-options.model";
 export class TopLevelCommunityListComponent implements OnInit {
   topLevelCommunities: RemoteData<Item[]>;
   config : PaginationComponentOptions;
+  sortConfig : SortOptions;
 
   constructor(
     private cds: ItemDataService
@@ -29,6 +30,8 @@ export class TopLevelCommunityListComponent implements OnInit {
     this.config = new PaginationComponentOptions();
     this.config.id = "top-level-pagination"
     this.config.pageSizeOptions = [ 5, 10, 20, 40, 60, 80, 100 ];
+
+    this.sortConfig =  new SortOptions();
   }
 
   onPageChange(currentPage): void {
@@ -41,7 +44,17 @@ export class TopLevelCommunityListComponent implements OnInit {
     this.updateResults();
   }
 
+  onSortDirectionChange(sortDirection): void {
+    this.sortConfig.direction = sortDirection;
+    this.updateResults();
+  }
+
+  onSortFieldChange(field): void {
+    this.sortConfig.field = field;
+    this.updateResults();
+  }
+
   updateResults() {
-    this.topLevelCommunities = this.cds.findAll({ currentPage: this.config.currentPage, elementsPerPage: this.config.pageSize });
+    this.topLevelCommunities = this.cds.findAll({ currentPage: this.config.currentPage, elementsPerPage: this.config.pageSize, sort: this.sortConfig });
   }
 }

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

@@ -1,7 +1,10 @@
 <ds-pagination [paginationOptions]="config"
                [collectionSize]="(pageInfo | async)?.totalElements"
+               [sortOptions]="sortConfig"
                (pageChange)="onPageChange($event)"
-               (pageSizeChange)="onPageSizeChange($event)">
+               (pageSizeChange)="onPageSizeChange($event)"
+               (sortDirectionChange)="onSortDirectionChange($event)"
+               (sortFieldChange)="onSortDirectionChange($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

@@ -8,6 +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";
 
 
 @Component({
@@ -21,10 +22,13 @@ export class ObjectListComponent implements OnInit {
 
     @Input() objects: RemoteData<DSpaceObject[]>;
     @Input() config : PaginationComponentOptions;
+    @Input() sortConfig : SortOptions;
     pageInfo : Observable<PageInfo>;
 
     @Output() pageChange = new EventEmitter();
     @Output() pageSizeChange = new EventEmitter();
+    @Output() sortDirectionChange = new EventEmitter();
+    @Output() sortFieldChange = new EventEmitter();
     data: any = {};
 
     constructor() {
@@ -45,4 +49,13 @@ export class ObjectListComponent implements OnInit {
     onPageSizeChange(event) {
         this.pageSizeChange.emit(event);
     }
+
+    onSortDirectionChange(event) {
+        this.sortDirectionChange.emit(event);
+    }
+
+    onSortFieldChange(event) {
+        this.sortFieldChange.emit(event);
+    }
+
 }

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

@@ -9,7 +9,9 @@
         <button class="btn btn-outline-primary" id="paginationControls" (click)="$event.stopPropagation(); (paginationControls.isOpen())?paginationControls.close():paginationControls.open();"><i class="fa fa-cog" aria-hidden="true"></i></button>
         <div class="dropdown-menu dropdown-menu-right" id="paginationControlsDropdownMenu" aria-labelledby="paginationControls">
           <h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
-          <button class="dropdown-item" style="padding-left: 20px" *ngFor="let item of pageSizeOptions " (click)="setPageSize(item)"><i class="fa fa-check {{(item != paginationOptions.pageSize) ? 'invisible' : ''}}" aria-hidden="true"></i> {{item}} </button>
+          <button class="dropdown-item" style="padding-left: 20px" *ngFor="let item of pageSizeOptions" (click)="setPageSize(item)"><i class="fa fa-check {{(item != paginationOptions.pageSize) ? 'invisible' : ''}}" aria-hidden="true"></i> {{item}} </button>
+          <h6 class="dropdown-header">{{ 'pagination.sort-direction' | translate}}</h6>
+          <button class="dropdown-item" style="padding-left: 20px" *ngFor="let direction of (sortDirections | dsKeys)" (click)="setSortDirection(direction.key)"><i class="fa fa-check {{(direction.key != sortOptions.direction) ? 'invisible' : ''}}" aria-hidden="true"></i> {{direction.value}} </button>
         </div>
       </div>
     </div>

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

@@ -1,12 +1,12 @@
 import {
-  ChangeDetectionStrategy,
+    ChangeDetectionStrategy,
-  Component,
+    Component,
-  EventEmitter,
+    EventEmitter,
-  Input,
+    Input,
-  OnDestroy,
+    OnDestroy,
-  OnInit,
+    OnInit,
-  Output,
+    Output,
-  ViewEncapsulation
+    ViewEncapsulation
 } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router';
 import { isNumeric } from "rxjs/util/isNumeric";
@@ -18,230 +18,321 @@ import { DEFAULT_TEMPLATE, DEFAULT_STYLES } from 'ng2-pagination/dist/template';
 import { HostWindowService } from "../host-window.service";
 import { HostWindowState } from "../host-window.reducer";
 import { PaginationComponentOptions } from './pagination-component-options.model';
+import { SortDirection, SortOptions } from "../../core/cache/models/sort-options.model";
 
 /**
  * The default pagination controls component.
  */
 @Component({
-  exportAs: 'paginationComponent',
+    exportAs: 'paginationComponent',
-  selector: 'ds-pagination',
+    selector: 'ds-pagination',
-  templateUrl: 'pagination.component.html',
+    templateUrl: 'pagination.component.html',
-  changeDetection: ChangeDetectionStrategy.Default,
+    changeDetection: ChangeDetectionStrategy.Default,
-  encapsulation: ViewEncapsulation.Emulated
+    encapsulation: ViewEncapsulation.Emulated
 })
 export class PaginationComponent implements OnDestroy, OnInit {
 
-  /**
+    /**
-   * Number of items in collection.
+     * Number of items in collection.
-   */
+     */
-  @Input() collectionSize: number;
+    @Input() collectionSize: number;
 
-  /**
+    /**
-   * Configuration for the NgbPagination component.
+     * Configuration for the NgbPagination component.
-   */
+     */
-  @Input() paginationOptions: PaginationComponentOptions;
+    @Input() paginationOptions: PaginationComponentOptions;
 
-  /**
+    /**
-   * An event fired when the page is changed.
+     * Sort configuration for this component.
-   * Event's payload equals to the newly selected page.
+     */
-   */
+    @Input() sortOptions: SortOptions;
-  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
 
-  /**
+    /**
-   * An event fired when the page size is changed.
+     * An event fired when the page is changed.
-   * Event's payload equals to the newly selected page size.
+     * Event's payload equals to the newly selected page.
-   */
+     */
-  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+    @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
 
-  /**
+    /**
-   * Current page.
+     * An event fired when the page wsize is changed.
-   */
+     * Event's payload equals to the newly selected page size.
-  public currentPage = 1;
+     */
-  
+    @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
-  /**
-   * Current URL query parameters
-   */
-  public currentQueryParams = {};
 
-  /**
+    /**
-   * An observable of HostWindowState type
+     * An event fired when the sort direction is changed.
-   */
+     * Event's payload equals to the newly selected sort direction.
-  public hostWindow: Observable<HostWindowState>;
+     */
+    @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();
 
-  /**
+    /**
-   * ID for the pagination instance. Only useful if you wish to
+     * An event fired when the sort field is changed.
-   * have more than once instance at a time in a given component.
+     * Event's payload equals to the newly selected sort field.
-   */
+     */
-  private id: string;
+    @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
 
-  /**
+    /**
-   * A boolean that indicate if is an extra small devices viewport.
+     * Current page.
-   */
+     */
-  public isXs: boolean;
+    public currentPage = 1;
 
-  /**
+    /**
-   * Number of items per page.
+     * Current URL query parameters
-   */
+     */
-  public pageSize: number = 10;
+    public currentQueryParams = {};
 
-  /**
+    /**
-   * A number array that represents options for a context pagination limit.
+     * An observable of HostWindowState type
-   */
+     */
-  private pageSizeOptions: Array<number>;
+    public hostWindow: Observable<HostWindowState>;
 
-  /**
+    /**
-   * Local variable, which can be used in the template to access the paginate controls ngbDropdown methods and properties
+     * ID for the pagination instance. Only useful if you wish to
-   */
+     * have more than once instance at a time in a given component.
-  public paginationControls;
+     */
+    private id: string;
 
-  /**
+    /**
-   * Subscriber to observable.
+     * A boolean that indicate if is an extra small devices viewport.
-   */
+     */
-  private routeSubscription: any;
+    public isXs: boolean;
 
-  /**
+    /**
-   * An object that represents pagination details of the current viewed page
+     * Number of items per page.
-   */
+     */
-  public showingDetail: any = {
+    public pageSize: number = 10;
-    range: null,
-    total: null
-  };
 
-  /**
+    /**
-   * Subscriber to observable.
+     * Declare SortDirection enumeration to use it in the template
-   */
+     */
-  private stateSubscription: any;
+    public sortDirections = SortDirection
 
-  /**
+    /**
-   * Method provided by Angular. Invoked after the constructor.
+     * A number array that represents options for a context pagination limit.
-   */
+     */
-  ngOnInit() {
+    private pageSizeOptions: Array<number>;
-    this.stateSubscription = this.hostWindowService.isXs()
-      .subscribe((status: boolean) => {
-        this.isXs = status;
-      });
-    this.checkConfig(this.paginationOptions);
-    this.id = this.paginationOptions.id || null;
-    this.currentPage = this.paginationOptions.currentPage;
-    this.pageSize = this.paginationOptions.pageSize;
-    this.pageSizeOptions = this.paginationOptions.pageSizeOptions;
 
-    this.routeSubscription = this.route.queryParams
+    /**
-      .map(queryParams => queryParams)
+     * Direction in which to sort: ascending or descending
-      .subscribe(queryParams => {
+     */
-        this.currentQueryParams = queryParams;
+    public sortDirection: SortDirection = SortDirection.Ascending;
-        if(this.id == queryParams['pageId']
+
-           && (this.paginationOptions.currentPage != queryParams['page']
+    /**
-           || this.paginationOptions.pageSize != queryParams['pageSize'])
+     * Name of the field that's used to sort by
-          ) {
+     */
-          this.validateParams(queryParams['page'], queryParams['pageSize']);
+    public sortField: string = "id";
+
+    /**
+     * Local variable, which can be used in the template to access the paginate controls ngbDropdown methods and properties
+     */
+    public paginationControls;
+
+    /**
+     *
+     */
+
+    /**
+     * Subscriber to observable.
+     */
+    private routeSubscription: any;
+
+    /**
+     * An object that represents pagination details of the current viewed page
+     */
+    public showingDetail: any = {
+        range: null,
+        total: null
+    };
+
+    /**
+     * Subscriber to observable.
+     */
+    private stateSubscription: any;
+
+    /**
+     * Method provided by Angular. Invoked after the constructor.
+     */
+    ngOnInit() {
+        this.stateSubscription = this.hostWindowService.isXs()
+            .subscribe((status: boolean) => {
+                this.isXs = status;
+            });
+        this.checkConfig(this.paginationOptions);
+        this.id = this.paginationOptions.id || null;
+        this.currentPage = this.paginationOptions.currentPage;
+        this.pageSize = this.paginationOptions.pageSize;
+        this.pageSizeOptions = this.paginationOptions.pageSizeOptions;
+        this.sortDirection = this.sortOptions.direction;
+        this.sortField = this.sortOptions.field;
+        this.routeSubscription = this.route.queryParams
+            .map(queryParams => queryParams)
+            .subscribe(queryParams => {
+                this.currentQueryParams = queryParams;
+                if (this.id == queryParams['pageId']
+                    && (this.paginationOptions.currentPage != queryParams['page']
+                    || this.paginationOptions.pageSize != queryParams['pageSize']
+                    || this.sortOptions.direction != queryParams['sortDirection']
+                    || this.sortOptions.field != queryParams['sortField'] )
+                ) {
+                    this.validateParams(queryParams['page'], queryParams['pageSize'], queryParams['sortDirection'], queryParams['sortField']);
+                }
+            });
+        this.setShowingDetail();
+    }
+
+    /**
+     * Method provided by Angular. Invoked when the instance is destroyed.
+     */
+    ngOnDestroy() {
+        this.stateSubscription.unsubscribe();
+        this.routeSubscription.unsubscribe();
+    }
+
+    /**
+     * @param route
+     *    Route is a singleton service provided by Angular.
+     * @param router
+     *    Router is a singleton service provided by Angular.
+     */
+    constructor(private route: ActivatedRoute,
+                private router: Router,
+                public hostWindowService: HostWindowService) {
+    }
+
+    /**
+     * Method to set set new page and update route parameters
+     *
+     * @param page
+     *    The page being navigated to.
+     */
+    public doPageChange(page: number) {
+        this.currentPage = page;
+        this.updateRoute();
+        this.setShowingDetail();
+        this.pageChange.emit(page);
+    }
+
+    /**
+     * Method to set set new page size and update route parameters
+     *
+     * @param pageSize
+     *    The new page size.
+     */
+    public setPageSize(pageSize: number) {
+        this.pageSize = pageSize;
+        this.updateRoute();
+        this.setShowingDetail();
+        this.pageSizeChange.emit(pageSize);
+    }
+
+    /**
+     * Method to set set new sort direction and update route parameters
+     *
+     * @param sortDirection
+     *    The new sort direction.
+     */
+    public setSortDirection(sortDirection: SortDirection) {
+        this.sortDirection = sortDirection;
+        this.updateRoute();
+        this.setShowingDetail();
+        this.sortDirectionChange.emit(sortDirection);
+    }
+
+    /**
+     * Method to set set new sort field and update route parameters
+     *
+     * @param sortField
+     *    The new sort field.
+     */
+    public setSortField(field: string) {
+        this.sortField = field;
+        this.updateRoute();
+        this.setShowingDetail();
+        this.sortFieldChange.emit(field);
+    }
+
+    /**
+     * Method to update the route parameters
+     */
+    private updateRoute() {
+        this.router.navigate([], {
+            queryParams: Object.assign({}, this.currentQueryParams, {
+                pageId: this.id,
+                page: this.currentPage,
+                pageSize: this.pageSize,
+                sortDirection: this.sortDirection,
+                sortField: this.sortField
+            })
+        });
+    }
+
+    /**
+     * Method to set pagination details of the current viewed page.
+     */
+    private setShowingDetail() {
+        let firstItem;
+        let lastItem;
+        let lastPage = Math.round(this.collectionSize / this.pageSize);
+
+        firstItem = this.pageSize * (this.currentPage - 1) + 1;
+        if (this.currentPage != lastPage) {
+            lastItem = this.pageSize * this.currentPage;
+        } else {
+            lastItem = this.collectionSize;
+        }
+        this.showingDetail = {
+            range: firstItem + ' - ' + lastItem,
+            total: this.collectionSize
         }
-      });
-    this.setShowingDetail();
-  }
-
-  /**
-   * Method provided by Angular. Invoked when the instance is destroyed.
-   */
-  ngOnDestroy() {
-    this.stateSubscription.unsubscribe();
-    this.routeSubscription.unsubscribe();
-  }
-
-  /**
-   * @param route
-   *    Route is a singleton service provided by Angular.
-   * @param router
-   *    Router is a singleton service provided by Angular.
-   */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    public hostWindowService: HostWindowService
-  ){
-  }
-
-  /**
-   * Method to set set new page and update route parameters
-   *
-   * @param page
-   *    The page being navigated to.
-   */
-  public doPageChange(page: number) {
-    this.router.navigate([], { queryParams: Object.assign({}, this.currentQueryParams, { pageId: this.id, page: page, pageSize: this.pageSize }) });
-    this.currentPage = page;
-    this.setShowingDetail();
-    this.pageChange.emit(page);
-  }
-
-  /**
-   * Method to set set new page size and update route parameters
-   *
-   * @param pageSize
-   *    The new page size.
-   */
-  public setPageSize(pageSize: number) {
-    this.router.navigate([], { queryParams: Object.assign({}, this.currentQueryParams, { pageId: this.id, page: this.currentPage, pageSize: pageSize }) });
-    this.pageSize = pageSize;
-    this.setShowingDetail();
-    this.pageSizeChange.emit(pageSize);
-  }
-
-  /**
-   * Method to set pagination details of the current viewed page.
-   */
-  private setShowingDetail() {
-    let firstItem;
-    let lastItem;
-    let lastPage = Math.round(this.collectionSize / this.pageSize);
-
-    firstItem = this.pageSize * (this.currentPage - 1) + 1;
-    if (this.currentPage != lastPage) {
-      lastItem = this.pageSize * this.currentPage;
-    } else {
-      lastItem = this.collectionSize;
     }
-    this.showingDetail = {
-      range: firstItem + ' - ' + lastItem,
-      total: this.collectionSize
-    }
-  }
 
-  /**
+    /**
-   * Validate query params
+     * Validate query params
-   *
+     *
-   * @param page
+     * @param page
-   *    The page number to validate
+     *    The page number to validate
-   * @param pageSize
+     * @param pageSize
-   *    The page size to validate
+     *    The page size to validate
-   */
+     */
-  private validateParams(page: any, pageSize: any) {
+    private validateParams(page: any, pageSize: any, sortDirection: any, sortField: any) {
-    let filteredPageSize = this.pageSizeOptions.find(x => x == pageSize);
+        let filteredPageSize = this.pageSizeOptions.find(x => x == pageSize);
-    if (!isNumeric(page) || !filteredPageSize) {
+        if (!isNumeric(page) || !filteredPageSize) {
-      let filteredPage = isNumeric(page) ? page : this.currentPage;
+            let filteredPage = isNumeric(page) ? page : this.currentPage;
-      filteredPageSize = (filteredPageSize) ? filteredPageSize : this.pageSize;
+            filteredPageSize = (filteredPageSize) ? filteredPageSize : this.pageSize;
-      this.router.navigate([{ pageId: this.id, page: filteredPage, pageSize: filteredPageSize }]);
+            this.router.navigate([{
-    } else {
+                pageId: this.id,
-      // (+) converts string to a number
+                page: filteredPage,
-      this.currentPage = +page;
+                pageSize: filteredPageSize,
-      this.pageSize = +pageSize;
+                sortDirection: sortDirection,
-      this.pageChange.emit(this.currentPage);
+                sortField: sortField
-      this.pageSizeChange.emit(this.pageSize);
+            }]);
+        } else {
+            // (+) converts string to a number
+            this.currentPage = +page;
+            this.pageSize = +pageSize;
+            this.sortDirection = +sortDirection;
+            this.sortField = sortField;
+            this.pageChange.emit(this.currentPage);
+            this.pageSizeChange.emit(this.pageSize);
+            this.sortDirectionChange.emit(this.sortDirection);
+            this.sortFieldChange.emit(this.sortField);
+        }
     }
-  }
 
-  /**
+    /**
-   * Ensure options passed contains the required properties.
+     * Ensure options passed contains the required properties.
-   *
+     *
-   * @param paginateOptions
+     * @param paginateOptions
-   *    The paginate options object.
+     *    The paginate options object.
-   */
+     */
-  private checkConfig(paginateOptions: any) {
+    private checkConfig(paginateOptions: any) {
-    let required = ['id', 'currentPage', 'pageSize', 'pageSizeOptions'];
+        let required = ['id', 'currentPage', 'pageSize', 'pageSizeOptions'];
-    let missing = required.filter(function (prop) { return !(prop in paginateOptions); });
+        let missing = required.filter(function (prop) {
-    if (0 < missing.length) {
+            return !(prop in paginateOptions);
-      throw new Error("Paginate: Argument is missing the following required properties: " + missing.join(', '));
+        });
+        if (0 < missing.length) {
+            throw new Error("Paginate: Argument is missing the following required properties: " + missing.join(', '));
+        }
     }
-  }
 }
 

src/app/shared/shared.module.ts

@@ -15,6 +15,7 @@ import { SafeUrlPipe } from "./utils/safe-url-pipe";
 import { HostWindowService } from "./host-window.service";
 import { NativeWindowFactory, NativeWindowService } from "./window.service";
 import { TRUNCATE_PIPES } from "ng2-truncate";
+import { EnumKeysPipe } from "./utils/enum-keys-pipe";
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -30,7 +31,8 @@ const MODULES = [
 const PIPES = [
     FileSizePipe,
     SafeUrlPipe,
-    TRUNCATE_PIPES
+    TRUNCATE_PIPES,
+    EnumKeysPipe
   // put pipes here
 ];