[DSC-389] pagination added.

src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html

@@ -31,7 +31,7 @@
       [sortConfig]="(currentSort$ |async)"
       [type]="startsWithType"
       [startsWithOptions]="startsWithOptions"
-      [enableArrows]="false"
+      [showPaginator]="true"
       (prev)="goPrev()"
       (next)="goNext()">
     </ds-browse-by>

src/app/shared/browse-by/browse-by.component.html

@@ -2,41 +2,19 @@
   <h3 [ngClass]="{'sr-only': parentname }" >{{title | translate}}</h3>
   <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
   <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
-    <div *ngIf="!enableArrows">
       <ds-viewable-collection
       [config]="paginationConfig"
       [sortConfig]="sortConfig"
-        [objects]="objects">
+      [showPaginator]="showPaginator"
+      [objects]="objects"
+      (prev)="goPrev()"
+      (next)="goNext()">
       </ds-viewable-collection>
   </div>
-    <div *ngIf="enableArrows">
-      <div class="row">
-        <div class="col-12">
-          <div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right">
-            <button class="btn btn-secondary" id="paginationControls" [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" ngbDropdownToggle><i class="fas fa-cog" aria-hidden="true"></i></button>
-            <div id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" ngbDropdownMenu>
-              <h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
-              <button class="dropdown-item page-size-change" *ngFor="let item of paginationConfig?.pageSizeOptions" (click)="doPageSizeChange(item)"><i [ngClass]="{'invisible': item != paginationConfig?.pageSize}" class="fas fa-check" aria-hidden="true"></i> {{item}} </button>
-              <h6 class="dropdown-header">{{ 'pagination.sort-direction' | translate}}</h6>
-              <button class="dropdown-item sort-direction-change" *ngFor="let direction of (sortDirections | dsKeys)" (click)="doSortDirectionChange(direction.value)"><i [ngClass]="{'invisible': direction.value !== sortConfig?.direction}" class="fas fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}} </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <ul class="list-unstyled">
-        <li *ngFor="let object of objects?.payload?.page" class="mt-4 mb-4">
-          <ds-listable-object-component-loader [object]="object" [viewMode]="viewMode"></ds-listable-object-component-loader>
-        </li>
-      </ul>
-      <div>
-        <button id="nav-prev" type="button" class="btn btn-outline-primary float-left" (click)="goPrev()" [disabled]="objects?.payload?.currentPage <= 1"><i class="fas fa-angle-left"></i> {{'browse.previous.button' |translate}}</button>
-        <button id="nav-next" type="button" class="btn btn-outline-primary float-right" (click)="goNext()" [disabled]="objects?.payload?.currentPage >= objects?.payload?.totalPages"><i class="fas fa-angle-right"></i> {{'browse.next.button' |translate}}</button>
-      </div>
-    </div>
-  </div>
   <ds-loading *ngIf="!objects || objects?.isLoading" message="{{'loading.browse-by' | translate}}"></ds-loading>
   <ds-error *ngIf="objects?.hasFailed" message="{{'error.browse-by' | translate}}"></ds-error>
   <div *ngIf="!objects?.isLoading && objects?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
     {{'browse.empty' | translate}}
   </div>
 </ng-container>
+

src/app/shared/browse-by/browse-by.component.spec.ts

@@ -129,9 +129,9 @@ describe('BrowseByComponent', () => {
     expect(fixture.debugElement.query(By.css('ds-viewable-collection'))).toBeDefined();
   });
 
-  describe('when enableArrows is true and objects are defined', () => {
+  describe('when showPaginator is true and objects are defined', () => {
     beforeEach(() => {
-      comp.enableArrows = true;
+      comp.showPaginator = true;
       comp.objects$ = mockItemsRD$;
 
       comp.paginationConfig = paginationConfig;
@@ -188,7 +188,7 @@ describe('BrowseByComponent', () => {
     });
   });
 
-  describe('when enableArrows is true and browseEntries are provided', () => {
+  describe('when showPaginator is true and browseEntries are provided', () => {
     let browseEntries;
 
     beforeEach(() => {
@@ -209,7 +209,7 @@ describe('BrowseByComponent', () => {
         }),
       ];
 
-      comp.enableArrows = true;
+      comp.showPaginator = true;
       comp.objects$ = createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), browseEntries));
       comp.paginationConfig = paginationConfig;
       comp.sortConfig = Object.assign(new SortOptions('dc.title', SortDirection.ASC));

src/app/shared/browse-by/browse-by.component.ts

@@ -67,30 +67,30 @@ export class BrowseByComponent implements OnInit {
   /**
    * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
    */
-  @Input() enableArrows = false;
+  @Input() showPaginator = true;
 
   /**
-   * If enableArrows is set to true, should it hide the options gear?
+   * If showPaginator is set to true, should it hide the options gear?
    */
   @Input() hideGear = false;
 
   /**
-   * If enableArrows is set to true, emit when the previous button is clicked
+   * If showPaginator is set to true, emit when the previous button is clicked
    */
   @Output() prev = new EventEmitter<boolean>();
 
   /**
-   * If enableArrows is set to true, emit when the next button is clicked
+   * If showPaginator is set to true, emit when the next button is clicked
    */
   @Output() next = new EventEmitter<boolean>();
 
   /**
-   * If enableArrows is set to true, emit when the page size is changed
+   * If showPaginator is set to true, emit when the page size is changed
    */
   @Output() pageSizeChange = new EventEmitter<number>();
 
   /**
-   * If enableArrows is set to true, emit when the sort direction is changed
+   * If showPaginator is set to true, emit when the sort direction is changed
    */
   @Output() sortDirectionChange = new EventEmitter<SortDirection>();
 

src/app/shared/object-collection/object-collection.component.html

@@ -6,6 +6,7 @@
                 [linkType]="linkType"
                 [context]="context"
                 [hidePaginationDetail]="hidePaginationDetail"
+                [showPaginator]="showPaginator"
                 (paginationChange)="onPaginationChange($event)"
                 (pageChange)="onPageChange($event)"
                 (pageSizeChange)="onPageSizeChange($event)"
@@ -19,6 +20,8 @@
                 [importConfig]="importConfig"
                 (importObject)="importObject.emit($event)"
                 (contentChange)="contentChange.emit()"
+                (prev)="goPrev()"
+                (next)="goNext()"
                 *ngIf="(currentMode$ | async) === viewModeEnum.ListElement">
 </ds-object-list>
 
@@ -29,6 +32,7 @@
                 [linkType]="linkType"
                 [context]="context"
                 [hidePaginationDetail]="hidePaginationDetail"
+                [showPaginator]="showPaginator"
                 (paginationChange)="onPaginationChange($event)"
                 (pageChange)="onPageChange($event)"
                 (pageSizeChange)="onPageSizeChange($event)"
@@ -44,6 +48,7 @@
                   [linkType]="linkType"
                   [context]="context"
                   [hidePaginationDetail]="hidePaginationDetail"
+                  [showPaginator]="showPaginator"
                   *ngIf="(currentMode$ | async) === viewModeEnum.DetailedListElement">
 </ds-object-detail>
 

src/app/shared/object-collection/object-collection.component.ts

@@ -88,6 +88,11 @@ export class ObjectCollectionComponent implements OnInit {
    */
   @Input() hidePaginationDetail = false;
 
+  /**
+   * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
+   */
+  @Input() showPaginator = true;
+
   /**
    * the page info of the list
    */
@@ -122,6 +127,16 @@ export class ObjectCollectionComponent implements OnInit {
    */
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
 
+  /**
+   * If showPaginator is set to true, emit when the previous button is clicked
+   */
+  @Output() prev = new EventEmitter<boolean>();
+
+  /**
+   * If showPaginator is set to true, emit when the next button is clicked
+   */
+  @Output() next = new EventEmitter<boolean>();
+
   /**
    * Emits the current view mode
    */
@@ -192,4 +207,18 @@ export class ObjectCollectionComponent implements OnInit {
     this.paginationChange.emit(event);
   }
 
+  /**
+   * Go to the previous page
+   */
+  goPrev() {
+      this.prev.emit(true);
+  }
+
+ /**
+  * Go to the next page
+  */
+  goNext() {
+      this.next.emit(true);
+  }
+
 }

src/app/shared/object-detail/object-detail.component.html

@@ -3,14 +3,19 @@
   [pageInfoState]="objects?.payload"
   [collectionSize]="objects?.payload?.totalElements"
   [sortOptions]="sortConfig"
+  [objects]="objects"
   [hideGear]="hideGear"
   [hidePaginationDetail]="hidePaginationDetail"
   [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
+  [showPaginator]="showPaginator"
   (pageChange)="onPageChange($event)"
   (pageSizeChange)="onPageSizeChange($event)"
   (sortDirectionChange)="onSortDirectionChange($event)"
   (sortFieldChange)="onSortFieldChange($event)"
-  (paginationChange)="onPaginationChange($event)">
+  (paginationChange)="onPaginationChange($event)"
+  (prev)="goPrev()"
+  (next)="goNext()"
+  >
     <div class="row mt-2" *ngIf="objects?.hasSucceeded" @fadeIn>
       <div class="col"
            *ngFor="let object of objects?.payload?.page">

src/app/shared/object-detail/object-detail.component.ts

@@ -66,6 +66,21 @@ export class ObjectDetailComponent {
    */
   @Input() context: Context;
 
+  /**
+   * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
+   */
+  @Input() showPaginator = true;
+
+  /**
+   * If showPaginator is set to true, emit when the previous button is clicked
+   */
+  @Output() prev = new EventEmitter<boolean>();
+
+  /**
+   * If showPaginator is set to true, emit when the next button is clicked
+   */
+  @Output() next = new EventEmitter<boolean>();
+
   /**
    * The list of objects to paginate
    */
@@ -168,4 +183,18 @@ export class ObjectDetailComponent {
     this.paginationChange.emit(event);
   }
 
+  /**
+   * Go to the previous page
+   */
+  goPrev() {
+      this.prev.emit(true);
+  }
+
+ /**
+  * Go to the next page
+  */
+  goNext() {
+      this.next.emit(true);
+  }
+
 }

src/app/shared/object-grid/object-grid.component.html

@@ -4,13 +4,18 @@
   [collectionSize]="objects?.payload?.totalElements"
   [sortOptions]="sortConfig"
   [hideGear]="hideGear"
+  [objects]="objects"
   [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
   [hidePaginationDetail]="hidePaginationDetail"
+  [showPaginator]="showPaginator"
   (pageChange)="onPageChange($event)"
   (pageSizeChange)="onPageSizeChange($event)"
   (sortDirectionChange)="onSortDirectionChange($event)"
   (sortFieldChange)="onSortFieldChange($event)"
-  (paginationChange)="onPaginationChange($event)">
+  (paginationChange)="onPaginationChange($event)"
+  (prev)="goPrev()"
+  (next)="goNext()"
+  >
     <div class="card-columns row" *ngIf="objects?.hasSucceeded">
       <div class="card-column col col-sm-6 col-lg-4" *ngFor="let column of (columns$ | async)" @fadeIn>
         <div class="card-element" *ngFor="let object of column">
@@ -22,3 +27,4 @@
   <ds-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-loading>
 </ds-pagination>
 
+

src/app/shared/object-grid/object-grid.component.ts

@@ -49,6 +49,11 @@ export class ObjectGridComponent implements OnInit {
    */
   @Input() sortConfig: SortOptions;
 
+  /**
+   * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
+   */
+  @Input() showPaginator = true;
+
   /**
    * The whether or not the gear is hidden
    */
@@ -134,6 +139,17 @@ export class ObjectGridComponent implements OnInit {
    * Event's payload equals to the newly selected sort field.
    */
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
+
+  /**
+   * If showPaginator is set to true, emit when the previous button is clicked
+   */
+  @Output() prev = new EventEmitter<boolean>();
+
+  /**
+   * If showPaginator is set to true, emit when the next button is clicked
+   */
+  @Output() next = new EventEmitter<boolean>();
+
   data: any = {};
   columns$: Observable<ListableObject[]>;
 
@@ -225,4 +241,18 @@ export class ObjectGridComponent implements OnInit {
     this.paginationChange.emit(event);
   }
 
+  /**
+   * Go to the previous page
+   */
+  goPrev() {
+      this.prev.emit(true);
+  }
+
+ /**
+  * Go to the next page
+  */
+  goNext() {
+      this.next.emit(true);
+  }
+
 }

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

@@ -2,15 +2,20 @@
         [paginationOptions]="config"
         [pageInfoState]="objects?.payload"
         [collectionSize]="objects?.payload?.totalElements"
+        [objects]="objects"
         [sortOptions]="sortConfig"
         [hideGear]="hideGear"
         [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
         [hidePaginationDetail]="hidePaginationDetail"
+        [showPaginator]="showPaginator"
         (pageChange)="onPageChange($event)"
         (pageSizeChange)="onPageSizeChange($event)"
         (sortDirectionChange)="onSortDirectionChange($event)"
         (sortFieldChange)="onSortFieldChange($event)"
-        (paginationChange)="onPaginationChange($event)">
+        (paginationChange)="onPaginationChange($event)"
+        (prev)="goPrev()"
+        (next)="goNext()"
+        >
     <ul *ngIf="objects?.hasSucceeded" class="list-unstyled" [ngClass]="{'ml-4': selectable}">
         <li *ngFor="let object of objects?.payload?.page; let i = index; let last = last" class="mt-4 mb-4 d-flex" [class.border-bottom]="hasBorder && !last">
           <ds-selectable-list-item-control *ngIf="selectable" [index]="i"

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

@@ -76,11 +76,26 @@ export class ObjectListComponent {
    */
   @Input() importConfig: { importLabel: string };
 
+  /**
+   * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
+   */
+  @Input() showPaginator = true;
+
   /**
    * Emit when one of the listed object has changed.
    */
   @Output() contentChange = new EventEmitter<any>();
 
+  /**
+   * If showPaginator is set to true, emit when the previous button is clicked
+   */
+  @Output() prev = new EventEmitter<boolean>();
+
+  /**
+   * If showPaginator is set to true, emit when the next button is clicked
+   */
+  @Output() next = new EventEmitter<boolean>();
+
   /**
    * The current listable objects
    */
@@ -192,4 +207,18 @@ export class ObjectListComponent {
   onPaginationChange(event) {
     this.paginationChange.emit(event);
   }
+
+  /**
+   * Go to the previous page
+   */
+  goPrev() {
+      this.prev.emit(true);
+  }
+
+ /**
+  * Go to the next page
+  */
+  goNext() {
+      this.next.emit(true);
+  }
 }

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

@@ -1,7 +1,7 @@
 <div *ngIf="currentPageState == undefined || currentPageState == (currentPage$|async)" [id]="'p-' + id">
   <div *ngIf="(!hidePaginationDetail && collectionSize > 0) || !hideGear" class="pagination-masked clearfix top">
     <div class="row">
-      <div *ngIf="!hidePaginationDetail && collectionSize > 0" class="col-auto pagination-info">
+      <div *ngIf="!hidePaginationDetail && collectionSize > 0 && showPaginator" class="col-auto pagination-info">
           <span class="align-middle hidden-xs-down">{{ 'pagination.showing.label' | translate }}</span>
           <span class="align-middle">{{ 'pagination.showing.detail' | translate:(getShowingDetails(collectionSize)|async)}}</span>
       </div>
@@ -21,6 +21,7 @@
   <ng-content></ng-content>
 
   <div *ngIf="shouldShowBottomPager | async" class="pagination justify-content-center clearfix bottom">
+    <div *ngIf="showPaginator">
       <ngb-pagination [boundaryLinks]="paginationOptions.boundaryLinks"
                       [collectionSize]="collectionSize"
                       [disabled]="paginationOptions.disabled"
@@ -30,6 +31,20 @@
                       (pageChange)="doPageChange($event)"
                       [pageSize]="(pageSize$ |async)"
                       [rotate]="paginationOptions.rotate"
-                    [size]="(isXs)?'sm':paginationOptions.size"></ngb-pagination>
+                      [size]="(isXs)?'sm':paginationOptions.size">
+      </ngb-pagination>
+    </div>
+    
+    <div *ngIf="!showPaginator">     
+      <ul class="list-unstyled">
+        <li *ngFor="let object of objects?.payload?.page" class="mt-4 mb-4">
+          <ds-listable-object-component-loader [object]="object" [viewMode]="viewMode"></ds-listable-object-component-loader>
+        </li>
+      </ul>
+      <div>
+        <button id="nav-prev" type="button" class="btn btn-outline-primary float-left" (click)="goPrev()" [disabled]="objects?.payload?.currentPage <= 1"><i class="fas fa-angle-left"></i> {{'browse.previous.button' |translate}}</button>
+        <button id="nav-next" type="button" class="btn btn-outline-primary float-right" (click)="goNext()" [disabled]="objects?.payload?.currentPage >= objects?.payload?.totalPages"><i class="fas fa-angle-right"></i> {{'browse.next.button' |translate}}</button>       
+      </div>
+    </div>
   </div>
 </div>

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

@@ -20,6 +20,10 @@ import { hasValue } from '../empty.util';
 import { PageInfo } from '../../core/shared/page-info.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
+import { RemoteData } from 'src/app/core/data/remote-data';
+import { PaginatedList } from 'src/app/core/data/paginated-list.model';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+import { ViewMode } from 'src/app/core/shared/view-mode.model';
 
 /**
  * The default pagination controls component.
@@ -33,6 +37,11 @@ import { map } from 'rxjs/operators';
   encapsulation: ViewEncapsulation.Emulated
 })
 export class PaginationComponent implements OnDestroy, OnInit {
+  /**
+   * ViewMode that should be passed to {@link ListableObjectComponentLoaderComponent}.
+   */
+  viewMode: ViewMode = ViewMode.ListElement;
+
   /**
    * Number of items in collection.
    */
@@ -53,6 +62,26 @@ export class PaginationComponent implements OnDestroy, OnInit {
    */
   @Input() sortOptions: SortOptions;
 
+  /**
+   * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
+   */
+  @Input() showPaginator = true;
+
+  /**
+   * The current pagination configuration
+   */
+   @Input() config?: PaginationComponentOptions;
+
+  /**
+   * The list of listable objects to render in this component
+   */
+  @Input() objects: RemoteData<PaginatedList<ListableObject>>;
+
+  /**
+   * The current sorting configuration
+   */
+  @Input() sortConfig: SortOptions;
+
   /**
    * An event fired when the page is changed.
    * Event's payload equals to the newly selected page.
@@ -163,6 +192,15 @@ export class PaginationComponent implements OnDestroy, OnInit {
    */
   private subs: Subscription[] = [];
 
+  /**
+   * If showPaginator is set to true, emit when the previous button is clicked
+   */
+  @Output() prev = new EventEmitter<boolean>();
+
+  /**
+   * If showPaginator is set to true, emit when the next button is clicked
+   */
+  @Output() next = new EventEmitter<boolean>();
   /**
    * Method provided by Angular. Invoked after the constructor.
    */
@@ -347,4 +385,19 @@ export class PaginationComponent implements OnDestroy, OnInit {
       map((hasMultiplePages) => hasMultiplePages || !this.hidePagerWhenSinglePage)
     );
   }
+
+  /**
+   * Go to the previous page
+   */
+   goPrev() {
+    this.prev.emit(true);
+  }
+
+  /**
+   * Go to the next page
+   */
+  goNext() {
+    this.next.emit(true);
+  }
+
 }