[CST-9636] Provide possibility to paginate a full list of elements

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

@@ -16,6 +16,28 @@
         (prev)="goPrev()"
         (next)="goNext()">
     <ul *ngIf="objects?.hasSucceeded" class="list-unstyled" [ngClass]="{'ml-4': selectable}">
+        <ng-container *ngIf="listToPaginate">
+          <li *ngFor='let object of objects?.payload?.page | paginate: { itemsPerPage: config.pageSize,
+                        currentPage: config.currentPage, totalItems: objects?.payload?.page.length }; let i = index; let last = last ' class="mt-4 mb-4 d-flex" [class.border-bottom]="hasBorder && !last" [attr.data-test]="'list-object' | dsBrowserOnly">
+            <ds-selectable-list-item-control *ngIf="selectable" [index]="i"
+                                             [object]="object"
+                                             [selectionConfig]="selectionConfig"
+                                             (deselectObject)="deselectObject.emit($event)"
+                                             (selectObject)="selectObject.emit($event)"></ds-selectable-list-item-control>
+            <ds-importable-list-item-control *ngIf="importable" [object]="object"
+                                             [importConfig]="importConfig"
+                                             (importObject)="importObject.emit($event)"></ds-importable-list-item-control>
+            <ds-listable-object-component-loader [context]="context"
+                                                 [linkType]="linkType"
+                                                 [listID]="selectionConfig?.listId"
+                                                 [index]="i"
+                                                 [object]="object"
+                                                 [showThumbnails]="showThumbnails"
+                                                 [viewMode]="viewMode"
+                                                 (contentChange)="contentChange.emit($event)"></ds-listable-object-component-loader>
+          </li>
+        </ng-container>
+        <ng-container *ngIf="!listToPaginate">
           <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" [attr.data-test]="'list-object' | dsBrowserOnly">
             <ds-selectable-list-item-control *ngIf="selectable" [index]="i"
                                              [object]="object"
@@ -34,5 +56,6 @@
                                                  [viewMode]="viewMode"
                                                  (contentChange)="contentChange.emit($event)"></ds-listable-object-component-loader>
           </li>
+        </ng-container>
     </ul>
 </ds-pagination>

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

@@ -76,6 +76,11 @@ export class ObjectListComponent {
    */
   @Input() importConfig: { buttonLabel: string };
 
+  /**
+   * If true the object list provided needs to be paginated using the `paginate` pipe
+   */
+  @Input() listToPaginate = false;
+
   /**
    * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
    */

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

@@ -44,6 +44,11 @@ export class ThemedObjectListComponent extends ThemedComponent<ObjectListCompone
    */
   @Input() hidePagerWhenSinglePage: boolean;
 
+  /**
+   * If true the object list provided needs to be paginated using the `paginate` pipe
+   */
+  @Input() listToPaginate: boolean;
+
   @Input() selectable: boolean;
 
   @Input() selectionConfig: { repeatable: boolean, listId: string };
@@ -160,6 +165,7 @@ w  /**
     'hidePaginationDetail',
     'importable',
     'importConfig',
+    'listToPaginate',
     'showPaginator',
     'showThumbnails',
     'contentChange',

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

@@ -39,12 +39,12 @@
     <div *ngIf="!showPaginator" class="d-flex justify-content-between">
         <button id="nav-prev" type="button" class="btn btn-outline-primary float-left"
                 (click)="goPrev()"
-                [disabled]="objects?.payload?.currentPage <= 1">
+                [disabled]="(objects?.payload?.currentPage <= 1) && (paginationOptions?.currentPage <= 1)">
           <i class="fas fa-angle-left"></i> {{'pagination.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">
+              [disabled]="(objects?.payload?.currentPage >= objects?.payload?.totalPages) || (paginationOptions?.currentPage >= objects?.payload?.totalPages)">
           <span [ngbTooltip]="objects?.payload?.currentPage >= objects?.payload?.totalPages ? ('pagination.next.button.disabled.tooltip' |translate) : null">
             <i class="fas fa-angle-right"></i> {{'pagination.next.button' |translate}}
           </span>

src/app/shared/shared.module.ts

@@ -272,6 +272,7 @@ import {
   ThemedItemPageTitleFieldComponent
 } from '../item-page/simple/field-components/specific-field/title/themed-item-page-field.component';
 import { BitstreamListItemComponent } from './object-list/bitstream-list-item/bitstream-list-item.component';
+import { NgxPaginationModule } from 'ngx-pagination';
 
 const MODULES = [
   CommonModule,
@@ -286,7 +287,8 @@ const MODULES = [
   RouterModule,
   DragDropModule,
   GoogleRecaptchaModule,
-  MenuModule
+  MenuModule,
+  NgxPaginationModule
 ];
 
 const ROOT_MODULES = [