Merged PR 802: pagination count fix on change page size

pagination count fix on change page size

Related work items: #7427

.env.local

@@ -4,7 +4,7 @@ ACCESS_TOKEN_ENDPOINT = https://login.microsoftonline.com/
 //ESNR Tenant
 TENANT = a8d860de-d5e1-45af-8376-d93f02e6b502
 //WGO Tenant
-//TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
+TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
 GRANT_TYPE = "client_credentials"
 
 HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459cc3715832136d84f68818d3a96399467b52143e273d4f3bf4ae190848891535421cd6c
@@ -20,19 +20,19 @@ NEXT_PUBLIC_HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459
 
 
 //Test Oauth ESNR
-CLIENT_ID = 6619ad85-c908-490d-811b-de8c93c0f2aa
+//CLIENT_ID = 6619ad85-c908-490d-811b-de8c93c0f2aa
-CLIENT_SECRET = qKo7Q~5QvLEplbwnBbint_I5lXqx_-kDm8Vj-
+//CLIENT_SECRET = qKo7Q~5QvLEplbwnBbint_I5lXqx_-kDm8Vj-
-RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
+//RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
-RELAYURI = "test-pedw-ns.servicebus.windows.net"
+//RELAYURI = "test-pedw-ns.servicebus.windows.net"
-RELAYPATH = "test-pedw-hc"
+//RELAYPATH = "test-pedw-hc"
 
 
 //Preprod Oauth WGO
-//CLIENT_ID = ab6c4678-b31a-4eb3-b429-e039120e488a
+CLIENT_ID = ab6c4678-b31a-4eb3-b429-e039120e488a
-//CLIENT_SECRET = Ioo7Q~RJfhWsE45wPsuHm1CzRk1SppnNN3lZF
+CLIENT_SECRET = Ioo7Q~RJfhWsE45wPsuHm1CzRk1SppnNN3lZF
-//RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/
+RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/
-//RELAYURI = "pp-pedw-ns.servicebus.windows.net"
+RELAYURI = "pp-pedw-ns.servicebus.windows.net"
-//RELAYPATH = "pp-pedw-hc"
+RELAYPATH = "pp-pedw-hc"
 
 
 

components/case/documents.js

@@ -9,6 +9,7 @@ import PaginationControl from "./pagination";
 import LoadingOverlay from "react-loading-overlay";
 import CryptoJS from "crypto-js";
 
+import { setCurrentPage } from "../../store/currentView/action";
 import {
     getBasicSearch,
     getBasicSearchDetails,
@@ -38,6 +39,7 @@ const DocumentDetails = (props) => {
         documentHistoryObj,
         setDocumentDetails,
         setDocumentHistory,
+        setCurrentPage,
     } = props;
 
     const router = useRouter();
@@ -65,10 +67,11 @@ const DocumentDetails = (props) => {
                     <div id="recordCountSelect" className="govuk-grid-row">
                         <div className="govuk-form-group">
                             <label className="govuk-label-s " htmlFor="sort">
-                                Show
+                                {t("search:searchresults-show-records-label-a")}
                                 <select
                                     onChange={(e) => {
                                         setSelectedOption(e.target.value);
+                                        setCurrentPage(1);
                                     }}
                                     value={selectedOption}
                                     className="govuk-select"
@@ -81,7 +84,7 @@ const DocumentDetails = (props) => {
                                     <option value="30">30</option>
                                     <option value="50">50</option>
                                 </select>{" "}
-                                records
+                                {t("search:searchresults-show-records-label-b")}
                             </label>
                         </div>
                     </div>
@@ -489,6 +492,9 @@ const mapDispatchToProps = (dispatch) => {
         setDocumentHistory: (historyObj) => {
             dispatch(setDocumentHistory(historyObj));
         },
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
+        },
     };
 };
 

components/case/pagination.js

@@ -1,6 +1,9 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { useState } from "react";
+import { connect } from "react-redux";
+import { setCurrentPage } from "../../store/currentView/action";
 
 const PaginationControl = (props) => {
     const {
@@ -12,6 +15,7 @@ const PaginationControl = (props) => {
         currentPage,
         spinnerState,
         getDocumentResults,
+        setCurrentPage,
     } = props;
     let { t } = useTranslation();
 
@@ -32,13 +36,14 @@ const PaginationControl = (props) => {
     const paginationNumbers = (currentPage, pageCount) => {
         //console.log(currentPage);
         let delta;
-        if (pageCount <= showNoOfRecords) {
+        if (pageCount <= 7) {
             // delta === 7: [1 2 3 4 5 6 7]
-            delta = 4;
+            delta = 7;
         } else {
             // delta === 2: [1 ... 4 5 6 ... 10]
             // delta === 4: [1 2 3 4 5 ... 10]
-            delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
+            //delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
+            delta = currentPage > 4 && currentPage < pageCount - 3 ? 2 : 4;
         }
 
         const range = {
@@ -78,7 +83,7 @@ const PaginationControl = (props) => {
 
     return (
         <>
-            {pagesCount > 1 ? (
+            {pagesCount > 1 && (
                 <div className="govuk-!-margin-bottom-7 ">
                     <div className="govuk-grid-row paginationWrapper">
                         <div className="govuk-grid-column-one-quarter paginationPrevious">
@@ -87,8 +92,13 @@ const PaginationControl = (props) => {
                                     className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
                                     onClick={() => {
                                         spinnerState(),
+                                            setCurrentPage(
+                                                props.currentView.currentPage -
+                                                    1
+                                            ),
                                             getDocumentResults(
-                                                currentPage - 1,
+                                                props.currentView.currentPage -
+                                                    1,
                                                 orderBy,
                                                 fieldSort
                                             );
@@ -104,7 +114,7 @@ const PaginationControl = (props) => {
                         </div>
                         <div className="govuk-grid-column-one-half paginationContainer">
                             {paginationArray.map((e, i) =>
-                                currentPage == i + 1 ? (
+                                props.currentView.currentPage == i + 1 ? (
                                     <span
                                         key={i}
                                         className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
@@ -124,11 +134,12 @@ const PaginationControl = (props) => {
                                         key={i}
                                         onClick={() => {
                                             spinnerState();
-                                            getDocumentResults(
+                                            setCurrentPage(e),
-                                                i + 1,
+                                                getDocumentResults(
-                                                orderBy,
+                                                    e,
-                                                fieldSort
+                                                    orderBy,
-                                            );
+                                                    fieldSort
+                                                );
                                         }}
                                     >
                                         {e}
@@ -137,13 +148,24 @@ const PaginationControl = (props) => {
                             )}
                         </div>
                         <div className="govuk-grid-column-one-quarter paginationNext">
-                            {currentPage != pagesCount ? (
+                            {/* {"current page state: " +
+                                props.currentView.currentPage}{" "}
+                            <br />
+                            {"current page: " + currentPage} <br />
+                            {"total pages: " + pagesCount}
+                            <br /> */}
+                            {props.currentView.currentPage < pagesCount ? (
                                 <span
                                     className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
                                     onClick={() => {
                                         spinnerState(),
+                                            setCurrentPage(
+                                                props.currentView.currentPage +
+                                                    1
+                                            ),
                                             getDocumentResults(
-                                                currentPage + 1,
+                                                props.currentView.currentPage +
+                                                    1,
                                                 orderBy,
                                                 fieldSort
                                             );
@@ -164,11 +186,23 @@ const PaginationControl = (props) => {
                         {t("common:of-label")} {pagesCount}
                     </div>
                 </div>
-            ) : (
-                ""
             )}
         </>
     );
 };
 
-export default PaginationControl;
+const mapStateToProps = (state) => {
+    return {
+        currentView: state.currentView,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
+        },
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PaginationControl);

components/search/dnssearchresults.js

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import { setCurrentReference } from "../../store/currentView/action";
 import { connect } from "react-redux";
 import jsonpath from "jsonpath";
 import _ from "lodash";
@@ -20,6 +19,11 @@ import {
     setSearchDetails,
 } from "../../store/searchOutput/action";
 import { getSearchDetailsPaged } from "../utils";
+import {
+    currentViewActionTypes,
+    setCurrentReference,
+    setCurrentPage,
+} from "../../store/currentView/action";
 
 const DNSSearchResults = (props) => {
     const {
@@ -30,6 +34,7 @@ const DNSSearchResults = (props) => {
         setSearchResults,
         setSearchDetails,
         advancedSearch,
+        setCurrentPage,
     } = props;
     let { t } = useTranslation();
 
@@ -367,6 +372,8 @@ const DNSSearchResults = (props) => {
                     </ul>
                 </div>
             </div>
+
+            {searchResultsObj["@odata.count"]}
             {searchResultsObj["@odata.count"] > 5 && (
                 <div id="recordCountSelect" className="govuk-grid-row">
                     <div className="govuk-form-group">
@@ -375,6 +382,7 @@ const DNSSearchResults = (props) => {
                             <select
                                 onChange={(e) => {
                                     setSelectedOption(e.target.value);
+                                    setCurrentPage(1);
                                 }}
                                 value={selectedOption}
                                 className="govuk-select"
@@ -421,6 +429,9 @@ const mapDispatchToProps = (dispatch) => {
         setSearchDetails: (searchDetailsObj) => {
             dispatch(setSearchDetails(searchDetailsObj));
         },
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
+        },
     };
 };
 

components/search/pagination.js

@@ -1,6 +1,9 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { useState } from "react";
+import { connect } from "react-redux";
+import { setCurrentPage } from "../../store/currentView/action";
 
 const PaginationControl = (props) => {
     const {
@@ -12,6 +15,7 @@ const PaginationControl = (props) => {
         currentPage,
         spinnerState,
         getSearchPageResults,
+        setCurrentPage,
     } = props;
     let { t } = useTranslation();
 
@@ -32,13 +36,14 @@ const PaginationControl = (props) => {
     const paginationNumbers = (currentPage, pageCount) => {
         let delta;
 
-        if (pageCount <= showNoOfRecords) {
+        if (pageCount <= 7) {
             // delta === 7: [1 2 3 4 5 6 7]
-            delta = 4;
+            delta = 7;
         } else {
             // delta === 2: [1 ... 4 5 6 ... 10]
             // delta === 4: [1 2 3 4 5 ... 10]
-            delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
+            //delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
+            delta = currentPage > 4 && currentPage < pageCount - 3 ? 2 : 4;
         }
 
         const range = {
@@ -76,6 +81,7 @@ const PaginationControl = (props) => {
 
     const paginationArray = paginationNumbers(currentPage, pagesCount);
 
+    console.log(props);
     return (
         <>
             {" "}
@@ -83,13 +89,18 @@ const PaginationControl = (props) => {
                 <div className="govuk-!-margin-bottom-7 ">
                     <div className="govuk-grid-row paginationWrapper">
                         <div className="govuk-grid-column-one-quarter paginationPrevious">
-                            {currentPage != 1 ? (
+                            {props.currentView.currentPage != 1 ? (
                                 <span
                                     className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
                                     onClick={() => {
                                         spinnerState(),
+                                            setCurrentPage(
+                                                props.currentView.currentPage -
+                                                    1
+                                            ),
                                             getSearchPageResults(
-                                                currentPage - 1,
+                                                props.currentView.currentPage -
+                                                    1,
                                                 orderBy,
                                                 fieldSort
                                             );
@@ -105,7 +116,7 @@ const PaginationControl = (props) => {
                         </div>
                         <div className="govuk-grid-column-one-half paginationContainer">
                             {paginationArray.map((e, i) =>
-                                currentPage == i + 1 ? (
+                                props.currentView.currentPage == e ? (
                                     <span
                                         key={i}
                                         className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
@@ -125,8 +136,9 @@ const PaginationControl = (props) => {
                                         key={i}
                                         onClick={() => {
                                             spinnerState(),
+                                                setCurrentPage(e),
                                                 getSearchPageResults(
-                                                    i + 1,
+                                                    e,
                                                     orderBy,
                                                     fieldSort
                                                 );
@@ -138,13 +150,25 @@ const PaginationControl = (props) => {
                             )}
                         </div>
                         <div className="govuk-grid-column-one-quarter paginationNext">
-                            {currentPage != pagesCount ? (
+                            {/* {"current page state: " +
+                                props.currentView.currentPage}{" "}
+                            <br />
+                            {"current page: " + currentPage} <br />
+                            {"total pages: " + pagesCount}
+                            <br />
+                            {/* {thisCurrentPage != currentPage &&
+                                setThisCurrentPage(currentPage)} */}{" "}
+                            {props.currentView.currentPage < pagesCount ? (
                                 <span
                                     className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
                                     onClick={() => {
                                         spinnerState(),
+                                            setCurrentPage(
+                                                props.currenView.currentPage + 1
+                                            ),
                                             getSearchPageResults(
-                                                currentPage + 1,
+                                                props.currentView.currentPage +
+                                                    1,
                                                 orderBy,
                                                 fieldSort
                                             );
@@ -170,4 +194,18 @@ const PaginationControl = (props) => {
     );
 };
 
-export default PaginationControl;
+const mapStateToProps = (state) => {
+    return {
+        currentView: state.currentView,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
+        },
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PaginationControl);

components/search/searchresults.js

@@ -4,6 +4,7 @@ import useTranslation from "next-translate/useTranslation";
 import {
     currentViewActionTypes,
     setCurrentReference,
+    setCurrentPage,
 } from "../../store/currentView/action";
 import { connect } from "react-redux";
 import jsonpath from "jsonpath";
@@ -58,6 +59,7 @@ const SearchResults = (props) => {
         setWatchedCases,
         setWatchedCasesDetails,
         isLinkedCase,
+        setCurrentPage,
     } = props;
     let { t } = useTranslation();
 
@@ -647,6 +649,7 @@ const SearchResults = (props) => {
                                     <select
                                         onChange={(e) => {
                                             setSelectedOption(e.target.value);
+                                            setCurrentPage(1);
                                         }}
                                         value={selectedOption}
                                         className="govuk-select"
@@ -705,6 +708,9 @@ const mapDispatchToProps = (dispatch) => {
         setWatchedCasesDetails: (watchedCasesDetails) => {
             dispatch(setWatchedCasesDetails(watchedCasesDetails));
         },
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
+        },
     };
 };
 

store/currentView/action.js

@@ -6,6 +6,7 @@ export const currentViewActionTypes = {
     SETREPRESENTATIONSUBMIT: "SETREPRESENTATIONSUBMIT",
     SETREPRESENTATIONSUBMITCONFIRMATION: "SETREPRESENTATIONSUBMITCONFIRMATION",
     SETCURRENTLINKEDCASES: "SETCURRENTLINKEDCASES",
+    SETCURRENTPAGE: "SETCURRENTPAGE",
 };
 
 export const getCurrentViewObj = () => (dispatch) => {
@@ -64,3 +65,10 @@ export const setCurrentLinkedCases = (linkedCaseReferences) => (dispatch) => {
         linkedCaseReferences: linkedCaseReferences,
     });
 };
+
+export const setCurrentPage = (currentPage) => (dispatch) => {
+    return dispatch({
+        type: currentViewActionTypes.SETCURRENTPAGE,
+        currentPage: currentPage,
+    });
+};

store/currentView/reducer.js

@@ -7,6 +7,7 @@ const currentViewInitialState = {
     representationSubmit: null,
     representationSubmitConfirmation: {},
     linkedCaseReferences: {},
+    currentPage: 1,
 };
 
 export default function reducer(state = currentViewInitialState, action) {
@@ -38,6 +39,11 @@ export default function reducer(state = currentViewInitialState, action) {
                 representationSubmitConfirmation:
                     action.representationSubmitConfirmation,
             };
+        case currentViewActionTypes.SETCURRENTPAGE:
+            return {
+                ...state,
+                currentPage: action.currentPage,
+            };
         default:
             return state;
     }