117803: Allow changing page size of Bitstream list

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html

@@ -33,12 +33,34 @@
             {{'item.edit.bitstreams.bundle.name' | translate:{ name: bundleName } }}
           </th>
           <td class="text-center">
-            <button [routerLink]="[itemPageRoute, 'bitstreams', 'new']"
+
-                    [queryParams]="{bundle: bundle.id}"
+            <div class="btn-group">
-                    class="btn btn-outline-success btn-sm"
+              <button [routerLink]="[itemPageRoute, 'bitstreams', 'new']"
-                    title="{{'item.edit.bitstreams.bundle.edit.buttons.upload' | translate}}">
+                      [queryParams]="{bundle: bundle.id}"
-              <i class="fas fa-upload fa-fw"></i>
+                      class="btn btn-outline-success btn-sm"
-            </button>
+                      title="{{'item.edit.bitstreams.bundle.edit.buttons.upload' | translate}}">
+                <i class="fas fa-upload fa-fw"></i>
+              </button>
+              <div ngbDropdown #paginationControls="ngbDropdown" class="btn btn-outline-secondary btn-sm p-0 pagination-control-container" placement="bottom-right">
+                <button class="btn pagination-control" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true" aria-expanded="false">
+                  <i class="fas fa-cog" aria-hidden="true"></i>
+                </button>
+
+                <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu" ngbDropdownMenu>
+                  <li role="menuitem">
+                    <span class="dropdown-header" id="pagination-control_results-per-page" role="heading">{{ 'pagination.results-per-page' | translate}}</span>
+                    <ul aria-labelledby="pagination-control_results-per-page" class="list-unstyled" role="listbox">
+                      <li *ngFor="let size of pageSizeOptions" role="option" [attr.aria-selected]="size === (pageSize$ | async)">
+                        <button (click)="doPageSizeChange(size)" class="dropdown-item">
+                          <i [ngClass]="{'invisible': size !== (pageSize$ | async) }" class="fas fa-check" aria-hidden="true"></i> {{size}}
+                        </button>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
           </td>
         </tr>
 

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.scss

@@ -18,3 +18,12 @@
 .bitstream-name {
   font-weight: normal;
 }
+
+.pagination-control-container {
+  display: flex;
+}
+
+.pagination-control {
+  padding: 0 0.1rem;
+  vertical-align: center;
+}

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts

@@ -26,6 +26,8 @@ import { getBitstreamDownloadRoute } from '../../../../app-routing-paths';
 import { FieldChangeType } from '../../../../core/data/object-updates/field-change-type.model';
 import { FieldUpdate } from '../../../../core/data/object-updates/field-update.model';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
+import { SortDirection } from '../../../../core/cache/models/sort-options.model';
+import { PaginationComponent } from '../../../../shared/pagination/pagination.component';
 
 /**
  * Interface storing all the information necessary to create a row in the bitstream edit table
@@ -79,6 +81,8 @@ export class ItemEditBitstreamBundleComponent implements OnInit {
    */
   @ViewChild('bundleView', {static: true}) bundleView;
 
+  @ViewChild(PaginationComponent) paginationComponent: PaginationComponent;
+
   /**
    * The bundle to display bitstreams for
    */
@@ -142,6 +146,16 @@ export class ItemEditBitstreamBundleComponent implements OnInit {
    */
   currentPaginationOptions$: BehaviorSubject<PaginationComponentOptions>;
 
+  /**
+   * The available page size options
+   */
+  pageSizeOptions: number[];
+
+  /**
+   * The currently selected page size
+   */
+  pageSize$: BehaviorSubject<number>;
+
   /**
    * The self url of the bundle, also used when retrieving fieldUpdates
    */
@@ -182,11 +196,15 @@ export class ItemEditBitstreamBundleComponent implements OnInit {
       pageSize: 10
     });
 
+    this.pageSizeOptions = this.paginationOptions.pageSizeOptions;
+
     this.currentPaginationOptions$ = new BehaviorSubject(this.paginationOptions);
+    this.pageSize$ = new BehaviorSubject(this.paginationOptions.pageSize);
 
     this.paginationService.getCurrentPagination(this.paginationOptions.id, this.paginationOptions)
       .subscribe((pagination) => {
         this.currentPaginationOptions$.next(pagination);
+        this.pageSize$.next(pagination.pageSize);
     });
   }
 
@@ -286,4 +304,9 @@ export class ItemEditBitstreamBundleComponent implements OnInit {
     // '/\s+/g' matches all occurrences of any amount of whitespace characters
     return str.replace(/\s+/g, '');
   }
+
+  public doPageSizeChange(pageSize: number) {
+    this.paginationComponent.doPageSizeChange(pageSize);
+  }
+
 }