Make the size of a browse result page configurable.

config/config.example.yml

@@ -168,6 +168,10 @@ browseBy:
   fiveYearLimit: 30
   # The absolute lowest year to display in the dropdown (only used when no lowest date can be found for all items)
   defaultLowerLimit: 1900
+  # The number of entries in a paginated browse results list.
+  # Rounded to the nearest size in the list of selectable sizes on the
+  # settings menu.
+  pageSize: 20
 
 # Item Config
 item:

src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts

@@ -23,6 +23,8 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
 import { FindListOptions } from '../../core/data/find-list-options.model';
+import { APP_CONFIG } from 'src/config/app-config.interface';
+import { environment } from 'src/environments/environment';
 
 describe('BrowseByDatePageComponent', () => {
   let comp: BrowseByDatePageComponent;
@@ -83,7 +85,8 @@ describe('BrowseByDatePageComponent', () => {
         { provide: DSpaceObjectDataService, useValue: mockDsoService },
         { provide: Router, useValue: new RouterMock() },
         { provide: PaginationService, useValue: paginationService },
-        { provide: ChangeDetectorRef, useValue: mockCdRef }
+        { provide: ChangeDetectorRef, useValue: mockCdRef },
+        { provide: APP_CONFIG, useValue: environment }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject } from '@angular/core';
 import {
   BrowseByMetadataPageComponent,
   browseParamsToOptions
@@ -19,6 +19,7 @@ import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { isValidDate } from '../../shared/date.util';
+import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface';
 
 @Component({
   selector: 'ds-browse-by-date-page',
@@ -43,8 +44,9 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
                      protected dsoService: DSpaceObjectDataService,
                      protected router: Router,
                      protected paginationService: PaginationService,
-                     protected cdRef: ChangeDetectorRef) {
-    super(route, browseService, dsoService, paginationService, router);
+                     protected cdRef: ChangeDetectorRef,
+                     @Inject(APP_CONFIG) protected appConfig: AppConfig) {
+    super(route, browseService, dsoService, paginationService, router, appConfig);
   }
 
   ngOnInit(): void {

src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts

@@ -25,6 +25,8 @@ import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.util
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
+import { APP_CONFIG } from '../../../config/app-config.interface';
+import { environment } from '../../../environments/environment';
 
 describe('BrowseByMetadataPageComponent', () => {
   let comp: BrowseByMetadataPageComponent;
@@ -97,7 +99,8 @@ describe('BrowseByMetadataPageComponent', () => {
         { provide: BrowseService, useValue: mockBrowseService },
         { provide: DSpaceObjectDataService, useValue: mockDsoService },
         { provide: PaginationService, useValue: paginationService },
-        { provide: Router, useValue: new RouterMock() }
+        { provide: Router, useValue: new RouterMock() },
+        { provide: APP_CONFIG, useValue: environment }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

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

@@ -1,5 +1,6 @@
 import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
@@ -26,9 +27,10 @@ export const BBM_PAGINATION_ID = 'bbm';
   templateUrl: './browse-by-metadata-page.component.html'
 })
 /**
- * Component for browsing (items) by metadata definition
- * A metadata definition (a.k.a. browse id) is a short term used to describe one or multiple metadata fields.
- * An example would be 'author' for 'dc.contributor.*'
+ * Component for browsing (items) by metadata definition.
+ * A metadata definition (a.k.a. browse id) is a short term used to describe one
+ * or multiple metadata fields.  An example would be 'author' for
+ * 'dc.contributor.*'
  */
 @rendersBrowseBy(BrowseByDataType.Metadata)
 export class BrowseByMetadataPageComponent implements OnInit {
@@ -51,11 +53,7 @@ export class BrowseByMetadataPageComponent implements OnInit {
   /**
    * The pagination config used to display the values
    */
-  paginationConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-    id: BBM_PAGINATION_ID,
-    currentPage: 1,
-    pageSize: 20
-  });
+  paginationConfig: PaginationComponentOptions;
 
   /**
    * The pagination observable
@@ -115,8 +113,14 @@ export class BrowseByMetadataPageComponent implements OnInit {
                      protected browseService: BrowseService,
                      protected dsoService: DSpaceObjectDataService,
                      protected paginationService: PaginationService,
-                     protected router: Router) {
-  }
+                     protected router: Router,
+                     @Inject(APP_CONFIG) protected appConfig: AppConfig) {
+    this.paginationConfig = Object.assign(new PaginationComponentOptions(), {
+        id: BBM_PAGINATION_ID,
+        currentPage: 1,
+        pageSize: this.appConfig.browseBy.pageSize,
+        });
+    }
 
   ngOnInit(): void {
     const sortConfig = new SortOptions('default', SortDirection.ASC);

src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts

@@ -23,6 +23,8 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
 import { FindListOptions } from '../../core/data/find-list-options.model';
+import { APP_CONFIG } from 'src/config/app-config.interface';
+import { environment } from 'src/environments/environment';
 
 describe('BrowseByTitlePageComponent', () => {
   let comp: BrowseByTitlePageComponent;
@@ -77,7 +79,8 @@ describe('BrowseByTitlePageComponent', () => {
         { provide: BrowseService, useValue: mockBrowseService },
         { provide: DSpaceObjectDataService, useValue: mockDsoService },
         { provide: PaginationService, useValue: paginationService },
-        { provide: Router, useValue: new RouterMock() }
+        { provide: Router, useValue: new RouterMock() },
+        { provide: APP_CONFIG, useValue: environment }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts

@@ -1,5 +1,5 @@
 import { combineLatest as observableCombineLatest } from 'rxjs';
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { hasValue } from '../../shared/empty.util';
 import {
@@ -14,6 +14,7 @@ import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface';
 
 @Component({
   selector: 'ds-browse-by-title-page',
@@ -30,8 +31,9 @@ export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
                      protected browseService: BrowseService,
                      protected dsoService: DSpaceObjectDataService,
                      protected paginationService: PaginationService,
-                     protected router: Router) {
-    super(route, browseService, dsoService, paginationService, router);
+                     protected router: Router,
+                     @Inject(APP_CONFIG) protected appConfig: AppConfig) {
+    super(route, browseService, dsoService, paginationService, router, appConfig);
   }
 
   ngOnInit(): void {

src/config/browse-by-config.interface.ts

@@ -1,21 +1,32 @@
 import { Config } from './config.interface';
 
 /**
- * Config that determines how the dropdown list of years are created for browse-by-date components
+ * Config that determines how the dropdown list of years are created for
+ * browse-by-date components.
  */
 export interface BrowseByConfig extends Config {
   /**
-   * The max amount of years to display using jumps of one year (current year - oneYearLimit)
+   * The max amount of years to display using jumps of one year
+   * (current year - oneYearLimit)
    */
   oneYearLimit: number;
 
   /**
-   * Limit for years to display using jumps of five years (current year - fiveYearLimit)
+   * Limit for years to display using jumps of five years
+   * (current year - fiveYearLimit)
    */
   fiveYearLimit: number;
 
   /**
-   * The absolute lowest year to display in the dropdown when no lowest date can be found for all items
+   * The absolute lowest year to display in the dropdown when no lowest date can
+   * be found for all items.
    */
   defaultLowerLimit: number;
+
+  /**
+   * Number of entries in the viewport of a paginated browse-by list.
+   * Rounded to the nearest size in the list of selectable sizes on the settings
+   * menu.  See pageSizeOptions in 'pagination-component-options.model.ts'.
+   */
+   pageSize: number;
 }

src/config/default-app-config.ts

@@ -205,7 +205,11 @@ export class DefaultAppConfig implements AppConfig {
     // Limit for years to display using jumps of five years (current year - fiveYearLimit)
     fiveYearLimit: 30,
     // The absolute lowest year to display in the dropdown (only used when no lowest date can be found for all items)
-    defaultLowerLimit: 1900
+    defaultLowerLimit: 1900,
+    // The number of entries in a paginated browse results list.
+    // Rounded to the nearest size in the list of selectable sizes on the
+    // settings menu.  See pageSizeOptions in 'pagination-component-options.model.ts'.
+    pageSize: 20
   };
 
   // Item Config

src/environments/environment.test.ts

@@ -199,6 +199,10 @@ export const environment: BuildConfig = {
     fiveYearLimit: 30,
     // The absolute lowest year to display in the dropdown (only used when no lowest date can be found for all items)
     defaultLowerLimit: 1900,
+    // The number of entries in a paginated browse results list.
+    // Rounded to the nearest size in the list of selectable sizes on the
+    // settings menu.  See pageSizeOptions in 'pagination-component-options.model.ts'.
+    pageSize: 20,
   },
   item: {
     edit: {