robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

select number records returned

Browse Source
This commit is contained in:
robbond
2022-02-01 11:36:14 +00:00
parent a17385d037
commit c932f57bf3
16 changed files with 212 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.local
+5 -5
View File
@@ -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"
actions/index.js
+29 -6
View File
@@ -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
+50 -19
View File
@@ -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 (
<>
components/case/pagination.js
+6 -3
View File
@@ -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
+2 -2
View File
@@ -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
+32 -1
View File
@@ -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
+6 -3
View File
@@ -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
+45 -2
View File
@@ -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
+3 -1
View File
@@ -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
+3 -1
View File
@@ -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
+1 -1
View File
@@ -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
+6 -2
View File
@@ -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
+6 -2
View File
@@ -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
+1 -1
View File
@@ -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
+5 -4
View File
@@ -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
+12
View File
@@ -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;
}
}