Merged PR 785: select number records returned

select number records returned

Related work items: #7407

.env.local

@@ -28,11 +28,11 @@ 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"
 
 
 

actions/index.js

@@ -90,6 +90,20 @@ export const azureHeadersPaged = (access_token) => {
         },
     };
 };
+export const azureHeadersPagedCustom = (access_token, showNumberOfRecords) => {
+    return {
+        headers: {
+            "OData-MaxVersion": "4.0",
+            "OData-Version": "4.0",
+            "Accept": "application/json;odata.metadata=none",
+            "Prefer":
+                'odata.include-annotations="*",return=representation, odata.maxpagesize=' +
+                showNumberOfRecords,
+            "Content-Type": "application/json",
+            "Authorization": "Bearer " + access_token,
+        },
+    };
+};
 
 export const hashAPIPath = (queryPath) => {
     var hashlink = CryptoJS.HmacSHA256(
@@ -135,7 +149,8 @@ export const getBasicSearchPaged = (
     searchString,
     pageNumber,
     orderBy,
-    fieldSort
+    fieldSort,
+    showNumberOfRecords
 ) => {
     //console.log(queryUrl);
     return axios
@@ -147,7 +162,9 @@ export const getBasicSearchPaged = (
                 "&orderby=" +
                 orderBy +
                 "&fieldSort=" +
-                fieldSort
+                fieldSort +
+                "&showNumberOfRecords=" +
+                showNumberOfRecords
         )
         .then((res) => {
             return res.data;
@@ -205,7 +222,8 @@ export const getAdvancedSearchPaged = (
     searchString,
     pageNumber,
     orderBy,
-    fieldSort
+    fieldSort,
+    showNumberOfRecords
 ) => {
     return axios
         .get(
@@ -216,7 +234,9 @@ export const getAdvancedSearchPaged = (
                 "&orderby=" +
                 orderBy +
                 "&fieldSort=" +
-                fieldSort
+                fieldSort +
+                "&showNumberOfRecords=" +
+                showNumberOfRecords
         )
         .then((res) => res.data)
         .catch((error) => {
@@ -291,7 +311,8 @@ export const getSearchDocumentDetailsPaged = (
     incidentID,
     pageNumber,
     orderBy,
-    fieldSort
+    fieldSort,
+    showNumberOfRecords
 ) => {
     return axios
         .get(
@@ -302,7 +323,9 @@ export const getSearchDocumentDetailsPaged = (
                 "&orderby=" +
                 orderBy +
                 "&fieldSort=" +
-                fieldSort
+                fieldSort +
+                "&showNumberOfRecords=" +
+                showNumberOfRecords
         )
         .then((res) => res.data)
         .catch((error) => {

components/case/documents.js

@@ -45,10 +45,11 @@ const DocumentDetails = (props) => {
 
     var documentDetailsArr = documentDetailsObj || [];
 
-    const DocumentView = (documentDetailsArr) => {
+    const [selectedOption, setSelectedOption] = useState(10);
-        //console.log(documentDetailsArr);
 
+    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) => {
+    const sortDataBy = (whichField) => {
-    //     setOrderbyState(whichField);
+        setOrderbyState(whichField);
-    //     setfieldSortState("asc");
+        setfieldSortState("asc");
 
-    //     getSearchPageResults(1, whichField, fieldSortState);
+        getDocumentResults(1, whichField, fieldSortState);
-    //     whichField == orderByState
+        whichField == orderByState
-    //         ? fieldSortState == "desc"
+            ? fieldSortState == "desc"
-    //             ? setfieldSortState("asc")
+                ? setfieldSortState("asc")
-    //             : setfieldSortState("desc")
+                : setfieldSortState("desc")
-    //         : setfieldSortState("asc");
+            : setfieldSortState("asc");
-    //     setShowSpinnerState(true);
+        setShowSpinnerState(true);
-    // };
+    };
 
     return (
         <>

components/case/pagination.js

@@ -4,6 +4,7 @@ import useTranslation from "next-translate/useTranslation";
 
 const PaginationControl = (props) => {
     const {
+        showNoOfRecords,
         orderBy,
         fieldSort,
         searchString,
@@ -17,7 +18,9 @@ const PaginationControl = (props) => {
     const router = useRouter();
     const { locale } = router;
 
-    const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10);
+    const pagesCount = Math.ceil(
+        searchResultsObj["@odata.count"] / showNoOfRecords
+    );
 
     const getRange = (start, end) => {
         //console.log(start, end);
@@ -29,9 +32,9 @@ const PaginationControl = (props) => {
     const paginationNumbers = (currentPage, pageCount) => {
         //console.log(currentPage);
         let delta;
-        if (pageCount <= 10) {
+        if (pageCount <= showNoOfRecords) {
             // delta === 7: [1 2 3 4 5 6 7]
-            delta = 10;
+            delta = showNoOfRecords;
         } else {
             // delta === 2: [1 ... 4 5 6 ... 10]
             // delta === 4: [1 2 3 4 5 ... 10]

components/footer.js

@@ -154,7 +154,7 @@ export default function Footer(props) {
                                                 "common:footer-contact-us-link"
                                             )}
                                             className="govuk-footer__link"
-                                            id="aAccess"
+                                            id="aContactUs"
                                         >
                                             {t(
                                                 "common:footer-contact-us-link-label"
@@ -176,7 +176,7 @@ export default function Footer(props) {
                                         >
                                             <a
                                                 className="govuk-footer__link"
-                                                id="aAccess"
+                                                id="aAccessibility"
                                             >
                                                 {t(
                                                     "common:footer-accessibility-link-label"

components/search/dnssearchresults.js

@@ -7,7 +7,7 @@ import jsonpath from "jsonpath";
 import _ from "lodash";
 import transLookup from "../../data/lookuptranslations.json";
 import PaginationControl from "./pagination";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import LoadingOverlay from "react-loading-overlay";
 import {
     getBasicDNSSearchPaged,
@@ -48,6 +48,7 @@ const DNSSearchResults = (props) => {
 
     const [orderByState, setOrderbyState] = useState("createdon");
     const [fieldSortState, setfieldSortState] = useState("asc");
+    const [selectedOption, setSelectedOption] = useState(10);
 
     const ResultsView = (resultsArr) => {
         return (
@@ -273,6 +274,7 @@ const DNSSearchResults = (props) => {
                         )}
                     </dl>
                     <PaginationControl
+                        showNoOfRecords={selectedOption}
                         currentPage={currentPage}
                         searchResultsObj={searchResultsObj}
                         orderBy={orderByState}
@@ -335,6 +337,12 @@ const DNSSearchResults = (props) => {
         setShowSpinnerState(true);
     };
 
+    useEffect(() => {
+        if (selectedOption) {
+            setShowSpinnerState(true);
+            getSearchPageResults(1, orderByState, fieldSortState);
+        }
+    }, [selectedOption]);
     return (
         <>
             <div className="govuk-grid-row">
@@ -354,6 +362,29 @@ const DNSSearchResults = (props) => {
                     </ul>
                 </div>
             </div>
+            <div id="recordCountSelect" className="govuk-grid-row">
+                <div className="govuk-form-group">
+                    <label className="govuk-label-s " htmlFor="sort">
+                        {t("search:searchresults-show-records-label-a")}
+                        <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>{" "}
+                        {t("search:searchresults-show-records-label-b")}
+                    </label>
+                </div>
+            </div>
             {resultsArr.length > 0 ? (
                 ResultsView(resultsArr)
             ) : (

components/search/pagination.js

@@ -4,6 +4,7 @@ import useTranslation from "next-translate/useTranslation";
 
 const PaginationControl = (props) => {
     const {
+        showNoOfRecords,
         orderBy,
         fieldSort,
         searchString,
@@ -17,7 +18,9 @@ const PaginationControl = (props) => {
     const router = useRouter();
     const { locale } = router;
 
-    const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10);
+    const pagesCount = Math.ceil(
+        searchResultsObj["@odata.count"] / showNoOfRecords
+    );
 
     const getRange = (start, end) => {
         //console.log(start, end);
@@ -29,9 +32,9 @@ const PaginationControl = (props) => {
     const paginationNumbers = (currentPage, pageCount) => {
         //console.log(currentPage);
         let delta;
-        if (pageCount <= 10) {
+        if (pageCount <= showNoOfRecords) {
             // delta === 7: [1 2 3 4 5 6 7]
-            delta = 10;
+            delta = showNoOfRecords;
         } else {
             // delta === 2: [1 ... 4 5 6 ... 10]
             // delta === 4: [1 2 3 4 5 ... 10]

components/search/searchresults.js

@@ -67,6 +67,7 @@ const SearchResults = (props) => {
     var resultsArr = searchResultsObj.value || [];
 
     const [showSpinnerState, setShowSpinnerState] = useState(false);
+    const [selectedOption, setSelectedOption] = useState(10);
 
     let spinnerState = () => {
         showSpinnerState == true
@@ -494,6 +495,7 @@ const SearchResults = (props) => {
                 </dl>
 
                 <PaginationControl
+                    showNoOfRecords={selectedOption}
                     currentPage={currentPage}
                     searchResultsObj={searchResultsObj}
                     orderBy={orderByState}
@@ -534,7 +536,13 @@ const SearchResults = (props) => {
                 ...searchString.map(([key, val]) => ({ [key]: val }))
             );
 
-            getAdvancedSearchPaged(searchoObj, pageNumber, orderBy, fieldSort)
+            getAdvancedSearchPaged(
+                searchoObj,
+                pageNumber,
+                orderBy,
+                fieldSort,
+                selectedOption
+            )
                 .then((data) => data)
                 .then((data) => {
                     //console.log("getting details", data);
@@ -545,7 +553,13 @@ const SearchResults = (props) => {
                     });
                 });
         } else {
-            getBasicSearchPaged(searchString, pageNumber, orderBy, fieldSort)
+            getBasicSearchPaged(
+                searchString,
+                pageNumber,
+                orderBy,
+                fieldSort,
+                selectedOption
+            )
                 .then((data) => data)
                 .then((data) => {
                     //console.log("getting details", data);
@@ -571,6 +585,12 @@ const SearchResults = (props) => {
         setShowSpinnerState(true);
     };
 
+    useEffect(() => {
+        if (selectedOption) {
+            setShowSpinnerState(true);
+            getSearchPageResults(1, orderByState, fieldSortState);
+        }
+    }, [selectedOption]);
     // console.log(
     //     "page is here ",
     //     currentPage,
@@ -610,6 +630,29 @@ const SearchResults = (props) => {
                             )}
                         </p>
                     )}
+                    <div id="recordCountSelect" className="govuk-grid-row">
+                        <div className="govuk-form-group">
+                            <label className="govuk-label-s " htmlFor="sort">
+                                {t("search:searchresults-show-records-label-a")}
+                                <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>{" "}
+                                {t("search:searchresults-show-records-label-b")}
+                            </label>
+                        </div>
+                    </div>
                     {resultsArr.length > 0 ? (
                         ResultsView(resultsArr)
                     ) : (

locales/cy/search.json

@@ -60,5 +60,7 @@
     "searchresults-watch-label": "Gwylio",
     "searchresults-search-button-label": "Chwilio uwch",
     "searchresults-new-search-button-label": "Chwiliad newydd",
-    "searchresults-no-records-label": "Nid oes unrhyw gofnodion"
+    "searchresults-no-records-label": "Nid oes unrhyw gofnodion",
+    "searchresults-show-records-label-a": "Dangoswch",
+    "searchresults-show-records-label-b": "cofnod"
 }

locales/en/search.json

@@ -60,5 +60,7 @@
     "searchresults-watch-label": "Watch",
     "searchresults-search-button-label": "Advanced Search",
     "searchresults-new-search-button-label": "New Search",
-    "searchresults-no-records-label": "There are no records"
+    "searchresults-no-records-label": "There are no records",
+    "searchresults-show-records-label-a": "Show",
+    "searchresults-show-records-label-b": "records"
 }

pages/_document.js

@@ -46,7 +46,7 @@ class MyDocument extends Document {
         csp += `base-uri 'self';`;
         csp += `form-action 'self';`;
         csp += `object-src 'self' data:;`;
-        csp += `script-src 'self'  https://www.googletagmanager.com  'nonce-${generatedNonce}' ${
+        csp += `script-src 'self' unsafe-inline https://www.googletagmanager.com  'nonce-${generatedNonce}' ${
             process.env.NODE_ENV != "production" ? " 'unsafe-eval';" : " ;"
         }`;
         csp += `img-src 'self' https://www.googletagmanager.com https://gov.wales https://www.google-analytics.com 'nonce-${generatedNonce}' data:;`;

pages/api/endpoint/getadvancedsearchpaged_api.js

@@ -2,7 +2,7 @@ import axios from "axios";
 import CryptoJS from "crypto-js";
 import { query } from "jsonpath";
 import _ from "lodash";
-import { getToken, azureHeadersPaged } from "../../../actions";
+import { getToken, azureHeadersPagedCustom } from "../../../actions";
 
 const WORDKEY = process.env.HASHKEY;
 
@@ -29,6 +29,7 @@ export default async function ApiProxy(req, res) {
 
     var orderby = req.query.orderby;
     var fieldSort = req.query.fieldSort;
+    var showNumberOfRecords = req.query.showNumberOfRecords;
 
     searchString = _.isEmpty(searchString)
         ? searchString
@@ -80,7 +81,10 @@ export default async function ApiProxy(req, res) {
         : axios
               .get(
                   WEBAPI_URL + queryUrl + hashAPIPath(queryUrl),
-                  azureHeadersPaged(token.access_token)
+                  azureHeadersPagedCustom(
+                      token.access_token,
+                      showNumberOfRecords
+                  )
               )
               .then(({ data }) => {
                   var dataStr;

pages/api/endpoint/getbasicsearchpaged_api.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 import CryptoJS from "crypto-js";
 import _ from "lodash";
-import { getToken, azureHeadersPaged } from "../../../actions";
+import { getToken, azureHeadersPagedCustom } from "../../../actions";
 
 const WORDKEY = process.env.HASHKEY;
 
@@ -26,6 +26,7 @@ export default async function ApiProxy(req, res) {
 
     var orderby = req.query.orderby;
     var fieldSort = req.query.fieldSort;
+    var showNumberOfRecords = req.query.showNumberOfRecords;
 
     var queryUrl =
         "incidents?$select=description,numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=(contains(title, '" +
@@ -48,7 +49,10 @@ export default async function ApiProxy(req, res) {
             ? axios
                   .get(
                       WEBAPI_URL + queryUrl + hashAPIPath(queryUrl),
-                      azureHeadersPaged(token.access_token)
+                      azureHeadersPagedCustom(
+                          token.access_token,
+                          showNumberOfRecords
+                      )
                   )
                   .then(({ data }) => {
                       var dataStr;

pages/api/endpoint/getsearchdocumentdetails_api.js

@@ -43,7 +43,7 @@ export default async function ApiProxy(req, res) {
         incidentID +
         "&$select=pinswg_isharedocumentlocations,_pinswg_documentids_value,pinswg_isharelabelcasetype,pinswg_isharelabellpaname,pinswg_publishtoweb,pinswg_uploadstatus,pinswg_isharedocumentclassification,pinswg_isharedocumentreference";
 
-    console.log("docu: ", queryUrl);
+    console.log("docu: ", WEBAPI_URL + queryUrl + hashAPIPath(queryUrl));
 
     return axios
         .get(

pages/api/endpoint/getsearchdocumentdetailspaged_api.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 import CryptoJS from "crypto-js";
 import _ from "lodash";
-import { getToken, azureHeadersPaged } from "../../../actions";
+import { getToken, azureHeadersPagedCustom } from "../../../actions";
 
 const WORDKEY = process.env.HASHKEY;
 
@@ -41,9 +41,10 @@ export default async function ApiProxy(req, res) {
 
     var orderby = req.query.orderby;
     var fieldSort = req.query.fieldSort;
+    var showNumberOfRecords = req.query.showNumberOfRecords;
 
     var queryUrl =
-        "pinswg_documents?$count=true&$filter=pinswg_publishtoweb eq true and _pinswg_documentids_value eq " +
+        "pinswg_documents?$filter=pinswg_publishtoweb eq true and _pinswg_documentids_value eq " +
         incidentID +
         "&$select=pinswg_isharedocumentlocations,_pinswg_documentids_value,pinswg_isharelabelcasetype,pinswg_isharelabellpaname,pinswg_publishtoweb,pinswg_uploadstatus,pinswg_isharedocumentclassification,pinswg_isharedocumentreference&$orderby=" +
         orderby +
@@ -54,12 +55,12 @@ export default async function ApiProxy(req, res) {
             ? "&$skiptoken=" + ('<cookie pagenumber="' + pageNumber + '" />')
             : "");
 
-    console.log("docu: ", queryUrl);
+    console.log("docu paged: ", queryUrl);
 
     return axios
         .get(
             WEBAPI_URL + queryUrl + hashAPIPath(queryUrl),
-            azureHeadersPaged(token.access_token)
+            azureHeadersPagedCustom(token.access_token, showNumberOfRecords)
         )
         .then(({ data }) => {
             data.value.forEach(function (element) {

styles/sass/welshgov/_application.scss

@@ -1865,3 +1865,15 @@ fade {
     top: 10px;
     left: 10px;
 }
+
+// record selection
+
+#recordCountSelect {
+    text-align: right;
+    select {
+        margin-right: 10px;
+        margin-left: 10px;
+        width: 70px;
+        background-position: 90% 15px;
+    }
+}