select number records returned

components/case/documents.js

@@ -45,10 +45,11 @@ const DocumentDetails = (props) => {
 
     var documentDetailsArr = documentDetailsObj || [];
 
-    const DocumentView = (documentDetailsArr) => {
-        //console.log(documentDetailsArr);
+    const [selectedOption, setSelectedOption] = useState(10);
 
+    const DocumentView = (documentDetailsArr) => {
         documentDetailsArr = documentDetailsArr.value;
+
         return (
             <>
                 <p>
@@ -60,13 +61,36 @@ const DocumentDetails = (props) => {
                         ? t("case:documents-count-label-2")
                         : t("case:documents-count-label-2a")}
                 </p>
+                <div id="recordCountSelect" className="govuk-grid-row">
+                    <div className="govuk-form-group">
+                        <label className="govuk-label-s " htmlFor="sort">
+                            Show
+                            <select
+                                onChange={(e) => {
+                                    setSelectedOption(e.target.value);
+                                }}
+                                value={selectedOption}
+                                className="govuk-select"
+                                id="showNumberOfRecords"
+                                name="showNumberOfRecords"
+                            >
+                                <option value="5">5</option>
+                                <option value="10">10</option>
+                                <option value="20">20</option>
+                                <option value="30">30</option>
+                                <option value="50">50</option>
+                            </select>{" "}
+                            records
+                        </label>
+                    </div>
+                </div>
                 <dl className="documentList govuk-summary-list govuk-!-margin-bottom-9 results">
                     <div className="govuk-summary-list__row results-headings">
                         <dd className="govuk-summary-list__key govuk-!-font-size-16 ">
                             {t("case:documents-name-label")}
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
-                            {t("case:documents-doc-type-label")}
+                            {/* {t("case:documents-doc-type-label")} */}
                             <button
                                 type="button"
                                 onClick={() =>
@@ -85,7 +109,7 @@ const DocumentDetails = (props) => {
                             </button>
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
-                            {t("case:documents-date-published-label")}
+                            {/* {t("case:documents-date-published-label")} */}
                             <button
                                 type="button"
                                 onClick={() => sortDataBy("createdon")}
@@ -225,6 +249,7 @@ const DocumentDetails = (props) => {
                     )}
                 </dl>
                 <PaginationControl
+                    showNoOfRecords={selectedOption}
                     currentPage={currentPage}
                     searchResultsObj={documentDetailsObj}
                     spinnerState={spinnerState}
@@ -237,6 +262,11 @@ const DocumentDetails = (props) => {
     };
 
     useEffect(() => {
+        if (selectedOption) {
+            setShowSpinnerState(true);
+            getDocumentResults(1, orderByState, fieldSortState);
+        }
+
         const docDetailsObj = async () => {
             let docObj = await getSearchDocumentDetails(incidentid)
                 .then((data) => {
@@ -279,14 +309,15 @@ const DocumentDetails = (props) => {
             return Promise.all(historyArr);
         };
         const searchDocumentResultsObj = docDetailsObj();
-    }, [incidentid, setDocumentHistory, setDocumentDetails]);
+    }, [incidentid, setDocumentHistory, setDocumentDetails, selectedOption]);
 
-    const getDocumentResults = (incidentid, pageNumber, orderBy, fieldSort) => {
+    const getDocumentResults = (pageNumber, orderBy, fieldSort) => {
         getSearchDocumentDetailsPaged(
-            incidentid,
+            props.incidentid,
             pageNumber,
             orderBy,
-            fieldSort
+            fieldSort,
+            selectedOption
         )
             .then((data) => data)
             .then((data) => {
@@ -395,18 +426,18 @@ const DocumentDetails = (props) => {
             : setDocumentSearchState(true);
     };
 
-    // const sortDataBy = (whichField) => {
-    //     setOrderbyState(whichField);
-    //     setfieldSortState("asc");
+    const sortDataBy = (whichField) => {
+        setOrderbyState(whichField);
+        setfieldSortState("asc");
 
-    //     getSearchPageResults(1, whichField, fieldSortState);
-    //     whichField == orderByState
-    //         ? fieldSortState == "desc"
-    //             ? setfieldSortState("asc")
-    //             : setfieldSortState("desc")
-    //         : setfieldSortState("asc");
-    //     setShowSpinnerState(true);
-    // };
+        getDocumentResults(1, whichField, fieldSortState);
+        whichField == orderByState
+            ? fieldSortState == "desc"
+                ? setfieldSortState("asc")
+                : setfieldSortState("desc")
+            : setfieldSortState("asc");
+        setShowSpinnerState(true);
+    };
 
     return (
         <>