From 466fce076dedb17070819dc3079a09a5c86c7f8c Mon Sep 17 00:00:00 2001
From: Daniel Mensinger <d.mensinger@tup.com>
Date: Fri, 1 Mar 2024 22:45:46 +0100
Subject: [PATCH] Add a dropdown for selecting the page size on the workbench
 (#1002)

---
 .../main/resources/properties/de.properties   |  2 ++
 .../main/resources/properties/en.properties   |  2 ++
 .../js/components/workbench/SearchResults.js  | 24 +++++++++++++++++++
 .../js/stores/workbench/SearchParamsStore.js  | 10 ++++++++
 .../public/js/utils/SearchConstants.js        |  3 ++-
 5 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/webapp/src/main/resources/properties/de.properties b/webapp/src/main/resources/properties/de.properties
index def0a38053..e80c8176d8 100644
--- a/webapp/src/main/resources/properties/de.properties
+++ b/webapp/src/main/resources/properties/de.properties
@@ -226,6 +226,8 @@ search.viewMode.REDUCED=Reduziert
 search.viewMode.STANDARD=Standard
 search.viewMode.COMPACT=Kompakt
 
+search.unitsPerPage=Texte pro Seite: {pageSize}
+
 # Label used in the header loggedInUser dropdown to show user's profile
 header.loggedInUser.profile=Mein Profil
 
diff --git a/webapp/src/main/resources/properties/en.properties b/webapp/src/main/resources/properties/en.properties
index 9ac9b79856..2afeb54c5d 100644
--- a/webapp/src/main/resources/properties/en.properties
+++ b/webapp/src/main/resources/properties/en.properties
@@ -235,6 +235,8 @@ search.viewMode.REDUCED=Reduced
 search.viewMode.STANDARD=Standard
 search.viewMode.COMPACT=Compact
 
+search.unitsPerPage=Page size: {pageSize}
+
 # Label used in the header loggedInUser dropdown to show user's profile
 header.loggedInUser.profile=My Profile
 
diff --git a/webapp/src/main/resources/public/js/components/workbench/SearchResults.js b/webapp/src/main/resources/public/js/components/workbench/SearchResults.js
index 21e671a76f..98969f7cc9 100644
--- a/webapp/src/main/resources/public/js/components/workbench/SearchResults.js
+++ b/webapp/src/main/resources/public/js/components/workbench/SearchResults.js
@@ -63,6 +63,9 @@ let SearchResults = createReactClass({
             /** @type {Number} Indicates the current page number of the search results. */
             "currentPageNumber": searchParamsStoreState.currentPageNumber,
 
+            /** @type {Number} The number of items on each page. */
+            "pageSize": searchParamsStoreState.pageSize,
+
             /** @type {Number}  The index of the currently active textunit. */
             "activeTextUnitIndex": 0,
 
@@ -353,6 +356,7 @@ let SearchResults = createReactClass({
             "searchHadNoResults": resultsStoreState.searchHadNoResults,
             "noMoreResults": resultsStoreState.noMoreResults,
             "currentPageNumber": paramsStoreState.currentPageNumber,
+            "pageSize": paramsStoreState.pageSize,
             "mustShowToolbar": mustShowToolbar,
             "activeTextUnitIndex": this.getActiveTextUnitIndex(),
             "isErrorOccurred": resultsStoreState.isErrorOccurred,
@@ -565,6 +569,22 @@ let SearchResults = createReactClass({
         let nextPageButtonDisabled = isSearching || noMoreResults;
         let previousPageButtonDisabled = isSearching || isFirstPage;
 
+        let pageSizes = [];
+        for (let i of [10, 25, 50, 100]) {
+            pageSizes.push(
+                <MenuItem
+                    key={i}
+                    eventKey={i}
+                    active={i == this.state.pageSize}
+                    onSelect={(s, _) => WorkbenchActions.searchParamsChanged({changedParam: SearchConstants.PAGE_SIZE_CHANGED, pageSize: s})}
+                >
+                    {i}
+                </MenuItem>
+            );
+        }
+
+        const title = <FormattedMessage values={{"pageSize": this.state.pageSize}} id="search.unitsPerPage" />;
+
         if (this.state.mustShowToolbar) {
             ui = (
                 <div>
@@ -598,6 +618,10 @@ let SearchResults = createReactClass({
                             </AltContainer>
 
                             <TextUnitSelectorCheckBox numberOfSelectedTextUnits={numberOfSelectedTextUnits} disabled={selectorCheckBoxDisabled}/>
+
+                            <DropdownButton id="text-units-per-page" title={title}>
+                                {pageSizes}
+                            </DropdownButton>
                             <Button bsSize="small" disabled={previousPageButtonDisabled}
                                     onClick={this.onFetchPreviousPageClicked}><span
                                 className="glyphicon glyphicon-chevron-left"></span></Button>
diff --git a/webapp/src/main/resources/public/js/stores/workbench/SearchParamsStore.js b/webapp/src/main/resources/public/js/stores/workbench/SearchParamsStore.js
index 981c63829b..5d275f987d 100644
--- a/webapp/src/main/resources/public/js/stores/workbench/SearchParamsStore.js
+++ b/webapp/src/main/resources/public/js/stores/workbench/SearchParamsStore.js
@@ -167,6 +167,11 @@ class SearchParamsStore {
                 this.decrementPageNumber();
                 break;
 
+            case SearchConstants.PAGE_SIZE_CHANGED:
+
+                this.changePageSize(paramData.pageSize);
+                break;
+
             default:
                 console.error("SearchParamsStore::Unknown param type");
                 break;
@@ -367,6 +372,11 @@ class SearchParamsStore {
         this.setCurrentPageNumber(this.currentPageNumber + 1);
     }
 
+    changePageSize(pageSize) {
+        this.pageSize = pageSize;
+        this.setCurrentPageNumber(1);
+    }
+
     setCurrentPageNumber(pageNumber) {
         if (pageNumber >= 1) {
             this.currentPageNumber = pageNumber;
diff --git a/webapp/src/main/resources/public/js/utils/SearchConstants.js b/webapp/src/main/resources/public/js/utils/SearchConstants.js
index 1e8ebc22de..c79dbfe10d 100644
--- a/webapp/src/main/resources/public/js/utils/SearchConstants.js
+++ b/webapp/src/main/resources/public/js/utils/SearchConstants.js
@@ -9,7 +9,8 @@ let SearchConstants = keymirror({
     "UPDATE_ALL_LOCATION_UPDATE": null,
     "UPDATE_ALL_LOCATION_NONE": null,
     "NEXT_PAGE_REQUESTED" : null,
-    "PREVIOUS_PAGE_REQUESTED" : null
+    "PREVIOUS_PAGE_REQUESTED" : null,
+    "PAGE_SIZE_CHANGED": null,
 });
 
 export default SearchConstants;