From c932f57bf35932fe75e61531a29d45323b70cbb7 Mon Sep 17 00:00:00 2001 From: rdbsolutions Date: Tue, 1 Feb 2022 11:36:14 +0000 Subject: [PATCH] select number records returned --- .env.local | 10 +-- actions/index.js | 35 ++++++++-- components/case/documents.js | 69 ++++++++++++++----- components/case/pagination.js | 9 ++- components/footer.js | 4 +- components/search/dnssearchresults.js | 33 ++++++++- components/search/pagination.js | 9 ++- components/search/searchresults.js | 47 ++++++++++++- locales/cy/search.json | 4 +- locales/en/search.json | 4 +- pages/_document.js | 2 +- .../endpoint/getadvancedsearchpaged_api.js | 8 ++- pages/api/endpoint/getbasicsearchpaged_api.js | 8 ++- .../endpoint/getsearchdocumentdetails_api.js | 2 +- .../getsearchdocumentdetailspaged_api.js | 9 +-- styles/sass/welshgov/_application.scss | 12 ++++ 16 files changed, 212 insertions(+), 53 deletions(-) diff --git a/.env.local b/.env.local index 8b1a773e..9038599b 100644 --- a/.env.local +++ b/.env.local @@ -28,11 +28,11 @@ RELAYPATH = "test-pedw-hc" //Preprod Oauth WGO -CLIENT_ID = ab6c4678-b31a-4eb3-b429-e039120e488a -CLIENT_SECRET = Ioo7Q~RJfhWsE45wPsuHm1CzRk1SppnNN3lZF -RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/ -RELAYURI = "pp-pedw-ns.servicebus.windows.net" -RELAYPATH = "pp-pedw-hc" +//CLIENT_ID = ab6c4678-b31a-4eb3-b429-e039120e488a +//CLIENT_SECRET = Ioo7Q~RJfhWsE45wPsuHm1CzRk1SppnNN3lZF +//RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/ +//RELAYURI = "pp-pedw-ns.servicebus.windows.net" +//RELAYPATH = "pp-pedw-hc" diff --git a/actions/index.js b/actions/index.js index fd7d5b22..df2ead34 100644 --- a/actions/index.js +++ b/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) => { diff --git a/components/case/documents.js b/components/case/documents.js index f98244e0..772b52fb 100644 --- a/components/case/documents.js +++ b/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 ( <>

@@ -60,13 +61,36 @@ const DocumentDetails = (props) => { ? t("case:documents-count-label-2") : t("case:documents-count-label-2a")}

+
+
+ +
+
{t("case:documents-name-label")}
- {t("case:documents-doc-type-label")} + {/* {t("case:documents-doc-type-label")} */}
- {t("case:documents-date-published-label")} + {/* {t("case:documents-date-published-label")} */}
{ }; 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 ( <> diff --git a/components/case/pagination.js b/components/case/pagination.js index b35c01dd..b6dbfbcc 100644 --- a/components/case/pagination.js +++ b/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] diff --git a/components/footer.js b/components/footer.js index 40f0b312..7a55114f 100644 --- a/components/footer.js +++ b/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) { > {t( "common:footer-accessibility-link-label" diff --git a/components/search/dnssearchresults.js b/components/search/dnssearchresults.js index a28ca10e..e8e9d687 100644 --- a/components/search/dnssearchresults.js +++ b/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) => { )} { setShowSpinnerState(true); }; + useEffect(() => { + if (selectedOption) { + setShowSpinnerState(true); + getSearchPageResults(1, orderByState, fieldSortState); + } + }, [selectedOption]); return ( <>
@@ -354,6 +362,29 @@ const DNSSearchResults = (props) => {
+
+
+ +
+
{resultsArr.length > 0 ? ( ResultsView(resultsArr) ) : ( diff --git a/components/search/pagination.js b/components/search/pagination.js index 35f35fd8..cae939a3 100644 --- a/components/search/pagination.js +++ b/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] diff --git a/components/search/searchresults.js b/components/search/searchresults.js index 6750e173..43e2e9ed 100644 --- a/components/search/searchresults.js +++ b/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) => { { ...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) => { )}

)} +
+
+ +
+
{resultsArr.length > 0 ? ( ResultsView(resultsArr) ) : ( diff --git a/locales/cy/search.json b/locales/cy/search.json index cf5cfcf9..68a9043c 100644 --- a/locales/cy/search.json +++ b/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" } \ No newline at end of file diff --git a/locales/en/search.json b/locales/en/search.json index 810b28a1..8b8cf6b1 100644 --- a/locales/en/search.json +++ b/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" } \ No newline at end of file diff --git a/pages/_document.js b/pages/_document.js index 04e0ecff..797388fd 100644 --- a/pages/_document.js +++ b/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:;`; diff --git a/pages/api/endpoint/getadvancedsearchpaged_api.js b/pages/api/endpoint/getadvancedsearchpaged_api.js index 77b638ac..a7273a45 100644 --- a/pages/api/endpoint/getadvancedsearchpaged_api.js +++ b/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; diff --git a/pages/api/endpoint/getbasicsearchpaged_api.js b/pages/api/endpoint/getbasicsearchpaged_api.js index 6c96d0f1..c3458c2c 100644 --- a/pages/api/endpoint/getbasicsearchpaged_api.js +++ b/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; diff --git a/pages/api/endpoint/getsearchdocumentdetails_api.js b/pages/api/endpoint/getsearchdocumentdetails_api.js index 66ee9344..6275f94a 100644 --- a/pages/api/endpoint/getsearchdocumentdetails_api.js +++ b/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( diff --git a/pages/api/endpoint/getsearchdocumentdetailspaged_api.js b/pages/api/endpoint/getsearchdocumentdetailspaged_api.js index 724f2233..e0bdc4d6 100644 --- a/pages/api/endpoint/getsearchdocumentdetailspaged_api.js +++ b/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=" + ('') : ""); - 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) { diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss index f041a9ba..35e0c574 100644 --- a/styles/sass/welshgov/_application.scss +++ b/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; + } +}