From 081321452fd4d75de818bcc991c1565f9840708a Mon Sep 17 00:00:00 2001 From: rdbsolutions Date: Tue, 19 Oct 2021 16:27:24 +0100 Subject: [PATCH] added in pagination for search result requests --- .env.local | 21 +- actions/index.js | 202 ++++++- components/case/summary.js | 54 +- components/search/dnssearchresults.js | 121 ++++ components/search/pagination.js | 157 +++++ components/search/searchresults.js | 571 +++++++++++++------ components/searchresults.js | 3 +- data/collections.json | 28 +- data/lookuptranslations.json | 5 + locales/cy/common.json | 6 +- locales/en/common.json | 6 +- pages/advancedsearch.js | 2 +- pages/advancedsearchresults.js | 31 +- pages/api/proxy/[...route].js | 17 +- pages/dnsapplications.js | 28 +- pages/searchresults.js | 115 ++-- public/assets/images/arrow-left--active.svg | 9 + public/assets/images/arrow-left--black.svg | 9 + public/assets/images/arrow-left--white.svg | 9 + public/assets/images/arrow-right--active.svg | 9 + styles/sass/welshgov/_application.scss | 115 ++++ 21 files changed, 1162 insertions(+), 356 deletions(-) create mode 100644 components/search/pagination.js create mode 100644 public/assets/images/arrow-left--active.svg create mode 100644 public/assets/images/arrow-left--black.svg create mode 100644 public/assets/images/arrow-left--white.svg create mode 100644 public/assets/images/arrow-right--active.svg diff --git a/.env.local b/.env.local index 0e51f69e..49a70c16 100644 --- a/.env.local +++ b/.env.local @@ -1,8 +1,9 @@ -RELAY_ROOT = https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/ -RELAYURI = "dev-pedw-ns.servicebus.windows.net" -RELAYPATH = "dev-pedw-hc" -SASKEY = "Ml0Y/S/nfRcmIrHFRkO4jNm2J3iH52TSxPiak7+E1+Y=" -SASKEYNAME = "devpedwnspolicy" +// dev +//RELAY_ROOT = https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/ +//RELAYURI = "dev-pedw-ns.servicebus.windows.net" +//RELAYPATH = "dev-pedw-hc" +//SASKEY = "Ml0Y/S/nfRcmIrHFRkO4jNm2J3iH52TSxPiak7+E1+Y=" +//SASKEYNAME = "devpedwnspolicy" PORT= "3000" @@ -13,7 +14,7 @@ I18N_DOMAIN = "cymru.local" //I18N_DOMAIN ="pp-gwaithcynllunio.gwasanaeth.llyw.cymru" //I18N_DOMAIN ="gwaithcynllunio.gwasanaeth.llyw.cymru" - +//test //RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/ //RELAYURI = "test-pedw-ns.servicebus.windows.net" //RELAYPATH = "test-pedw-hc" @@ -21,4 +22,12 @@ I18N_DOMAIN = "cymru.local" //SASKEYNAME = "testpedwhcpolicy" +//preprod +RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/ +RELAYURI = "pp-pedw-ns.servicebus.windows.net" +RELAYPATH = "pp-pedw-hc" +SASKEY = "JzrOYfMTsGBD1cZHH2nkzqsbfDCqg0brO6jyiIDNVPo=" +SASKEYNAME = "pppedwnspolicy" + + GOOGLE_TAG_MANAGER = GTM-T78CBC3 \ No newline at end of file diff --git a/actions/index.js b/actions/index.js index 3e902345..a5c11e14 100644 --- a/actions/index.js +++ b/actions/index.js @@ -105,16 +105,6 @@ const crmHeadersReturn = { }; const azureHeaders = (SASToken) => { - // console.log({ - // headers: { - // "OData-MaxVersion": "4.0", - // "OData-Version": "4.0", - // "Accept": "application/json", - // "Prefer": 'odata.include-annotations="*",return=representation', - // "Content-Type": "application/json", - // "ServiceBusAuthorization": SASToken, - // }, - // }); return { headers: { "OData-MaxVersion": "4.0", @@ -127,26 +117,60 @@ const azureHeaders = (SASToken) => { }; }; -// const azureHeaders = { -// headers: { -// "OData-MaxVersion": "4.0", -// "OData-Version": "4.0", -// "Accept": "application/json", -// "Prefer": 'odata.include-annotations="*",return=representation', -// "Content-Type": "application/json", -// "Authorization": "Bearer " + accessToken, -// }, -// }; +const azureHeadersPaged = (SASToken) => { + return { + headers: { + "OData-MaxVersion": "4.0", + "OData-Version": "4.0", + "Accept": "application/json", + "Prefer": + 'odata.include-annotations="*",return=representation, odata.maxpagesize=10', + "Content-Type": "application/json", + "ServiceBusAuthorization": SASToken, + }, + }; +}; export const getBasicSearch = (token, searchString) => { //console.log("\n\n", token, searchString); + return axios .get( WEBAPI_URL + "incidents?$select=numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=contains(title, '" + searchString + - "') and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true&$top=201", - azureHeaders(token) + "') and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true", + azureHeadersPaged(token) + ) + .then((res) => { + // console.log(" "); + // console.log("/////////////////////"); + // console.log("data:" + res.data.value); + // console.log("/////////////////////"); + // console.log(" "); + return res.data; + }) + .catch((error) => { + //console.log("thiserror", error); + return error.response; + }); +}; + +export const getBasicSearchPaged = (searchString, pageNumber) => { + //console.log("\n\n", token, searchString); + var token = getSASToken(); + + console.log(typeof pageNumber != "undefined"); + return axios + .get( + "/api/proxy/incidents?$select=numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=contains(title, '" + + searchString + + "') and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true" + + (typeof pageNumber != "undefined" + ? "&$skiptoken=" + + encodeURI('') + : ""), + azureHeadersPaged(token) ) .then((res) => { // console.log(" "); @@ -167,7 +191,25 @@ export const getBasicDNSSearch = (token, searchString) => { .get( WEBAPI_URL + "incidents?$select=numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=pinswg_appealcasetype eq 846040011 and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true", - azureHeaders(token) + azureHeadersPaged(token) + ) + .then((res) => res.data) + .catch((error) => { + return error.response; + }); +}; + +export const getBasicDNSSearchPaged = (pageNumber) => { + var token = getSASToken(); + + return axios + .get( + "/api/proxy/incidents?$select=numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=pinswg_appealcasetype eq 846040011 and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true" + + (typeof pageNumber != "undefined" + ? "&$skiptoken=" + + encodeURI('') + : ""), + azureHeadersPaged(token) ) .then((res) => res.data) .catch((error) => { @@ -208,7 +250,7 @@ export const getAdvancedSearch = (token, searchString) => { queryString + " and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true&$top=201", - azureHeaders(token) + azureHeadersPaged(token) ) .then((res) => res.data) .catch((error) => { @@ -222,15 +264,99 @@ export const getAdvancedSearch = (token, searchString) => { }); }; -export const getBasicSearchDetails = (token, appealType, caseReference) => { +export const getAdvancedSearchPaged = (searchString, pageNumber) => { + console.log(searchString); + var token = getSASToken(); + + var queryString = ""; + + queryString += + searchString.q != null + ? "contains(title, '" + searchString.q + "') " + : ""; + + queryString += + searchString.lpa != null + ? (typeof searchString.q == "undefined" ? "" : " and ") + + "_pinswg_associatedlpa_value eq " + + searchString.lpa + : ""; + queryString += + searchString.apt != null + ? (typeof searchString.q == "undefined" && + typeof searchString.lpa == "undefined" + ? "" + : " and ") + + "pinswg_appealcasetype eq " + + searchString.apt + : ""; + + return axios + .get( + "/api/proxy/incidents?$select=numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=" + + queryString + + " and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true" + + (typeof pageNumber != "undefined" + ? "&$skiptoken=" + + encodeURI('') + : ""), + + azureHeadersPaged(token) + ) + .then((res) => res.data) + .catch((error) => { + let ErrResponse = { + value: [], + errorCode: error.response.status, + errorMsg: error.response.statusText, + }; + + return ErrResponse; + }); +}; +export const getBasicSearchDetails = ( + token, + appealTypeName, + caseReference, + primaryIdAttribute, + incidentID +) => { //console.log("check appealtype:", appealType, caseReference); return axios .get( WEBAPI_URL + - appealType + - "?$filter=pinswg_name eq '" + - caseReference + - "'&$count=true", + appealTypeName + + "?$filter=_" + + primaryIdAttribute + + "s_value eq " + + incidentID + + "&$count=true", + azureHeadersPaged(token) + ) + .then((res) => res.data) + .catch((error) => { + console.log("this error", error); + }); +}; + +export const getBasicSearchDetailsPaged = ( + appealTypeName, + caseReference, + primaryIdAttribute, + incidentID +) => { + //console.log("check appealtype:", appealType, caseReference); + var token = getSASToken(); + + return axios + .get( + "/api/proxy/" + + appealTypeName + + "?$filter=_" + + primaryIdAttribute + + "s_value eq " + + incidentID + + "&$count=true", azureHeaders(token) ) .then((res) => res.data) @@ -307,7 +433,23 @@ export const getBasicDNSSearchDetails = (token, appealType, caseReference) => { "pinswg_dnses?$filter=pinswg_name eq '" + caseReference + "'&$count=true", - azureHeaders(token) + azureHeadersPaged(token) + ) + .then((res) => res.data) + .catch((error) => { + console.log("thiserror", error); + }); +}; + +export const getBasicDNSSearchDetailsPaged = (caseReference) => { + var token = getSASToken(); + + return axios + .get( + "/api/proxy/pinswg_dnses?$filter=pinswg_name eq '" + + caseReference + + "'&$count=true", + azureHeadersPaged(token) ) .then((res) => res.data) .catch((error) => { diff --git a/components/case/summary.js b/components/case/summary.js index b5421159..c3de0839 100644 --- a/components/case/summary.js +++ b/components/case/summary.js @@ -120,25 +120,45 @@ const CaseSummary = (props) => { ) ? detailsObj.pinswg_siteaddressline1 : ""} -
+ {_.has( + detailsObj, + "pinswg_siteaddressline1" + ) && + detailsObj.pinswg_siteaddressline1 != + null &&
} {_.has( detailsObj, "pinswg_siteaddressline2" ) ? detailsObj.pinswg_siteaddressline2 : ""} -
+ {_.has( + detailsObj, + "pinswg_siteaddressline2" + ) && + detailsObj.pinswg_siteaddressline2 != + null &&
} {_.has(detailsObj, "pinswg_siteaddresstown") ? detailsObj.pinswg_siteaddresstown : ""} -
+ {_.has( + detailsObj, + "pinswg_siteaddresstown" + ) && + detailsObj.pinswg_siteaddresstown != + null &&
} {_.has( detailsObj, "pinswg_siteaddresscounty" ) ? detailsObj.pinswg_siteaddresscounty : ""} -
+ {_.has( + detailsObj, + "pinswg_siteaddresscounty" + ) && + detailsObj.pinswg_siteaddresscounty != + null &&
} {_.has( detailsObj, "pinswg_siteaddresspostcode" @@ -397,6 +417,19 @@ const CaseSummary = (props) => { : t( "case:summary-no-date-entered-label" ) + : _.has( + detailsObj, + "pinswg_startdates" + ) + ? !_.isEmpty( + detailsObj.pinswg_startdates + ) + ? formatDates( + detailsObj.pinswg_startdates + ) + : t( + "case:summary-no-date-entered-label" + ) : t( "case:summary-no-date-entered-label" )} @@ -475,6 +508,19 @@ const CaseSummary = (props) => { : t( "case:summary-no-date-entered-label" ) + : _.has( + detailsObj, + "pinswg_otherpartiesstatements" + ) + ? !_.isEmpty( + detailsObj.pinswg_otherpartiesstatements + ) + ? formatDates( + detailsObj.pinswg_otherpartiesstatements + ) + : t( + "case:summary-no-date-entered-label" + ) : t( "case:summary-no-date-entered-label" )} diff --git a/components/search/dnssearchresults.js b/components/search/dnssearchresults.js index 9031fbfb..2e0cbe90 100644 --- a/components/search/dnssearchresults.js +++ b/components/search/dnssearchresults.js @@ -6,6 +6,19 @@ import { connect } from "react-redux"; import jsonpath from "jsonpath"; import _ from "lodash"; import transLookup from "../../data/lookuptranslations.json"; +import PaginationControl from "./pagination"; +import { useState } from "react"; +import LoadingOverlay from "react-loading-overlay"; +import { + getBasicDNSSearchPaged, + getBasicSearchDetailsPaged, +} from "../../actions"; +import data from "../../data/collections.json"; + +import { + setSearchResults, + setSearchDetails, +} from "../../store/searchOutput/action"; const DNSSearchResults = (props) => { const { @@ -13,6 +26,9 @@ const DNSSearchResults = (props) => { searchResultsObj, searchDetailsObj, setCurrentReference, + setSearchResults, + setSearchDetails, + advancedSearch, } = props; let { t } = useTranslation(); @@ -21,6 +37,14 @@ const DNSSearchResults = (props) => { var resultsArr = searchResultsObj.value || []; + const [showSpinnerState, setShowSpinnerState] = useState(false); + + let spinnerState = () => { + showSpinnerState == true + ? setShowSpinnerState(false) + : setShowSpinnerState(true); + }; + const ResultsView = (resultsArr) => { return (
@@ -193,11 +217,97 @@ const DNSSearchResults = (props) => { ); })} +
); }; + let currentPage = 0; + + currentPage = decodeURI(searchResultsObj["@odata.nextLink"]).split( + "skiptoken=" + )[1]; + currentPage = + typeof currentPage != "undefined" + ? parseInt( + decodeURI(currentPage) + .split('pagenumber="')[1] + .slice( + 0, + decodeURI(currentPage) + .split('pagenumber="')[1] + .indexOf('"') + ) - 1 + ) + : pagesCount; + + const getSearchPageResults = (pageNumber) => { + console.log(advancedSearch, searchString, pageNumber); + + getBasicDNSSearchPaged(pageNumber) + .then((data) => { + console.log(data); + setSearchResults(data); + return data; + }) + .then((data) => { + console.log("getting details", data); + return getSearchDetails(data).then((data) => { + setSearchDetails(data); + setShowSpinnerState(false); + }); + }); + }; + + const getSearchDetails = (searchResultsObj) => { + //console.log(searchResultsObj); + + let detailsArr = []; + //console.log("search results", searchResultsObj); + searchResultsObj = searchResultsObj.value; + const detailsObj = searchResultsObj.map((searchDetail, index) => { + //console.log(searchDetail); + if (searchDetail.pinswg_appealcasetype == null) { + console.log(searchDetail.title); + } else { + let formMeta = getFormCollection( + "pinswg_" + + searchDetail[ + "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" + ] + .replace(/(\band|[\s\-\+\(\)\,\&])/g, "") + .toLowerCase() + .slice(0, 39) + ); + + detailsArr.push( + getBasicSearchDetailsPaged( + formMeta.LogicalCollectionName, + searchDetail.title, + formMeta.PrimaryIdAttribute, + searchDetail.incidentid + ) + ); + } + }); + // console.log(detailsArr); + return Promise.all(detailsArr); + }; + + const getFormCollection = (formtype) => { + const collectionName = jsonpath.query( + data, + "$..[?(@.LogicalName=='" + formtype + "')]" + ); + //console.log(collectionName[0]); + return collectionName[0]; + }; return ( <>
@@ -227,6 +337,11 @@ const DNSSearchResults = (props) => {
)} + ); }; @@ -236,6 +351,12 @@ const mapDispatchToProps = (dispatch) => { setCurrentReference: (currentReference) => { dispatch(setCurrentReference(currentReference)); }, + setSearchResults: (searchResultsObj) => { + dispatch(setSearchResults(searchResultsObj)); + }, + setSearchDetails: (searchDetailsObj) => { + dispatch(setSearchDetails(searchDetailsObj)); + }, }; }; diff --git a/components/search/pagination.js b/components/search/pagination.js new file mode 100644 index 00000000..cc6e91e5 --- /dev/null +++ b/components/search/pagination.js @@ -0,0 +1,157 @@ +import Link from "next/link"; +import { useRouter } from "next/router"; +import useTranslation from "next-translate/useTranslation"; + +const PaginationControl = (props) => { + const { + searchString, + searchResultsObj, + currentPage, + spinnerState, + getSearchPageResults, + } = props; + let { t } = useTranslation(); + + const router = useRouter(); + const { locale } = router; + + const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10); + + const getRange = (start, end) => { + console.log(start, end); + return Array(end - start + 1) + .fill() + .map((v, i) => i + start); + }; + + const paginationNumbers = (currentPage, pageCount) => { + console.log(currentPage); + let delta; + if (pageCount <= 10) { + // delta === 7: [1 2 3 4 5 6 7] + delta = 10; + } else { + // delta === 2: [1 ... 4 5 6 ... 10] + // delta === 4: [1 2 3 4 5 ... 10] + delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 6; + } + + const range = { + start: Math.round(currentPage - delta / 2), + end: Math.round(currentPage + delta / 2), + }; + + if (range.start - 1 === 1 || range.end + 1 === pageCount) { + range.start += 1; + range.end += 1; + } + + let pages = + currentPage > delta + ? getRange( + Math.min(range.start, pageCount - delta), + Math.min(range.end, pageCount) + ) + : getRange(1, Math.min(pageCount, delta + 1)); + + const withDots = (value, pair) => + pages.length + 1 !== pageCount ? pair : [value]; + + if (pages[0] !== 1) { + pages = withDots(1, [1, "..."]).concat(pages); + } + + if (pages[pages.length - 1] < pageCount) { + pages = pages.concat(withDots(pageCount, ["...", pageCount])); + } + + console.log(pages); + return pages; + }; + + const paginationArray = paginationNumbers(currentPage, pagesCount); + + return ( + <> + {" "} +
+
+
+ {currentPage != 1 ? ( + { + spinnerState(), + getSearchPageResults(currentPage - 1), + console.log(currentPage - 1); + }} + > + {t("common:previous-link-button")} + + ) : ( + + {t("common:previous-link-button")} + + )} +
+
+ {paginationArray.map((e, i) => + currentPage == i + 1 ? ( + + {e} + + ) : e == "..." ? ( + + {e} + + ) : ( + { + spinnerState(); + console.log(i + 1); + getSearchPageResults(i + 1); + }} + > + {e} + + ) + )} +
+
+ {currentPage != pagesCount ? ( + { + spinnerState(), + getSearchPageResults(currentPage + 1), + console.log(currentPage + 1); + }} + > + {t("common:next-link-button")} + + ) : ( + + {" "} + {t("common:next-link-button")} + + )} +
+
+
+ {t("common:pages-label")} {currentPage}{" "} + {t("common:of-label")} {pagesCount} +
+
+ + ); +}; + +export default PaginationControl; diff --git a/components/search/searchresults.js b/components/search/searchresults.js index 0e057732..534e63d2 100644 --- a/components/search/searchresults.js +++ b/components/search/searchresults.js @@ -1,11 +1,31 @@ import Link from "next/link"; import { useRouter } from "next/router"; import useTranslation from "next-translate/useTranslation"; -import { setCurrentReference } from "../../store/currentView/action"; +import { + currentViewActionTypes, + setCurrentReference, +} from "../../store/currentView/action"; import { connect } from "react-redux"; import jsonpath from "jsonpath"; import _ from "lodash"; import transLookup from "../../data/lookuptranslations.json"; +import { + getBasicSearchPaged, + getSearchDocumentDetails, + getBasicSearchDetailsPaged, + getAdvancedSearchPaged, +} from "../../actions"; +import data from "../../data/collections.json"; +import { useState } from "react"; +import LoadingOverlay from "react-loading-overlay"; + +import { + setSearchResults, + setSearchDetails, +} from "../../store/searchOutput/action"; +import { useEffect } from "react"; + +import PaginationControl from "./pagination"; const SearchResults = (props) => { const { @@ -13,6 +33,9 @@ const SearchResults = (props) => { searchResultsObj, searchDetailsObj, setCurrentReference, + setSearchResults, + setSearchDetails, + advancedSearch, } = props; let { t } = useTranslation(); @@ -21,208 +44,384 @@ const SearchResults = (props) => { var resultsArr = searchResultsObj.value || []; + const [showSpinnerState, setShowSpinnerState] = useState(false); + + let spinnerState = () => { + showSpinnerState == true + ? setShowSpinnerState(false) + : setShowSpinnerState(true); + }; + const ResultsView = (resultsArr) => { return ( -
-
-
- {t("search:searchresults-case-reference-label")} -
-
- {t("search:searchresults-site-address-label")} -
-
- {t("search:searchresults-applicant-label")} -
-
- {t("search:searchresults-authority-label")} -
-
- {t("search:searchresults-case-type-label")} -
-
- {t("search:searchresults-status-label")} -
-
+ <> +
+
+
+ {t("search:searchresults-case-reference-label")} +
+
+ {t("search:searchresults-site-address-label")} +
+
+ {t("search:searchresults-applicant-label")} +
+
+ {t("search:searchresults-authority-label")} +
+
+ {t("search:searchresults-case-type-label")} +
+
+ {t("search:searchresults-status-label")} +
+
- {resultsArr.map((item, key) => { - let detailsObj = jsonpath.query( - searchDetailsObj, - "$..value[?(@.pinswg_name=='" + item.title + "')]" - ); - detailsObj = detailsObj[0]; + {resultsArr.map((item, key) => { + let detailsObj = jsonpath.query( + searchDetailsObj, + "$..value[?(@.pinswg_name=='" + item.title + "')]" + ); + detailsObj = detailsObj[0]; - return ( -
-
- - { - setCurrentReference({ - "currentReference": item.title, - "currentType": - "searchResultsObj", - "incidentid": item.incidentid, - }); - }} + return ( +
+
+ - - {t( - "search:searchresults-case-reference-label" - )} - : - - {item.title} - - -
-
- - {t( - "search:searchresults-site-address-label" - )} - : - - {_.has(detailsObj, "pinswg_siteaddressline1") - ? detailsObj.pinswg_siteaddressline1 - : ""} -
- {_.has(detailsObj, "pinswg_siteaddressline1") - ? detailsObj.pinswg_siteaddressline2 - : ""} -
- {_.has(detailsObj, "pinswg_siteaddressline1") - ? detailsObj.pinswg_siteaddresstown - : ""} -
- {_.has(detailsObj, "pinswg_siteaddressline1") - ? detailsObj.pinswg_siteaddresscounty - : ""} -
- {_.has(detailsObj, "pinswg_siteaddressline1") - ? detailsObj.pinswg_siteaddresspostcode - : ""} -
-
- - {t("search:searchresults-applicant-label")}: - - {_.has(detailsObj, [ - "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue", - ]) - ? detailsObj[ - "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue" - ] - : ""} -
-
- - {t("search:searchresults-authority-label")}: - - {_.has(item, [ - "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue", - ]) - ? router.locale == "cy" + { + setCurrentReference({ + "currentReference": + item.title, + "currentType": + "searchResultsObj", + "incidentid": + item.incidentid, + }); + }} + > + + {t( + "search:searchresults-case-reference-label" + )} + : + + {item.title} + + +
+
+ + {t( + "search:searchresults-site-address-label" + )} + : + + {_.has( + detailsObj, + "pinswg_siteaddressline1" + ) + ? detailsObj.pinswg_siteaddressline1 + : ""} + + {/* {detailsObj.pinswg_siteaddressline1 != + null &&
} */} + + {_.has( + detailsObj, + "pinswg_siteaddressline1" + ) && + detailsObj.pinswg_siteaddressline1 != + null &&
} + + {_.has( + detailsObj, + "pinswg_siteaddressline1" + ) + ? detailsObj.pinswg_siteaddressline2 + : ""} + + {_.has( + detailsObj, + "pinswg_siteaddressline2" + ) && + detailsObj.pinswg_siteaddressline2 != + null &&
} + {_.has(detailsObj, "pinswg_siteaddresstown") + ? detailsObj.pinswg_siteaddresstown + : ""} + {_.has( + detailsObj, + "pinswg_siteaddresstown" + ) && + detailsObj.pinswg_siteaddresstown != + null &&
} + + {_.has( + detailsObj, + "pinswg_siteaddresscounty" + ) + ? detailsObj.pinswg_siteaddresscounty + : ""} + {_.has( + detailsObj, + "pinswg_siteaddresscounty" + ) && + detailsObj.pinswg_siteaddresscounty != + null &&
} + {_.has( + detailsObj, + "pinswg_siteaddresspostcode" + ) + ? detailsObj.pinswg_siteaddresspostcode + : ""} +
+
+ + {t( + "search:searchresults-applicant-label" + )} + : + + {_.has(detailsObj, [ + "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue", + ]) + ? detailsObj[ + "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue" + ] + : ""} +
+
+ + {t( + "search:searchresults-authority-label" + )} + : + + {_.has(item, [ + "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue", + ]) + ? router.locale == "cy" + ? jsonpath.query( + transLookup, + '$..[?(@.value=="' + + item[ + "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue" + ] + + '")].value_cy' + ) + : item[ + "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue" + ] || "N/A" + : ""} +
+
+ + {t( + "search:searchresults-case-type-label" + )} + : + + {router.locale == "cy" ? jsonpath.query( transLookup, '$..[?(@.value=="' + item[ - "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue" + "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" ] + '")].value_cy' ) : item[ - "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue" - ] || "N/A" - : ""} -
-
- - {t("search:searchresults-case-type-label")}: - - {router.locale == "cy" - ? jsonpath.query( - transLookup, - '$..[?(@.value=="' + - item[ - "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" - ] + - '")].value_cy' - ) - : item[ - "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" - ] || "N/A"} -
-
- - {t("search:searchresults-status-label")}: - + "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" + ] || "N/A"} +
+
+ + {t("search:searchresults-status-label")} + : + - {router.locale == "cy" - ? jsonpath.query( - transLookup, - '$..[?(@.value=="' + - item[ - "statuscode@OData.Community.Display.V1.FormattedValue" - ] + - '")].value_cy' - ) - : item[ - "statuscode@OData.Community.Display.V1.FormattedValue" - ] || "N/A"} -
-
- ); - })} -
+ {router.locale == "cy" + ? jsonpath.query( + transLookup, + '$..[?(@.value=="' + + item[ + "statuscode@OData.Community.Display.V1.FormattedValue" + ] + + '")].value_cy' + ) + : item[ + "statuscode@OData.Community.Display.V1.FormattedValue" + ] || "N/A"} + + + ); + })} +
+ + ); }; - return ( -
-
-

- {t("search:searchresults-title-label")} -

-

- {resultsArr.length > 200 - ? t("search:searchresults-max-count-label") - : t("search:searchresults-count-label", { - count: resultsArr.length, - })} - . - {typeof searchString != "undefined" ? ( - <> - - {t("search:searchresults-case-count-label")}{" "} - {" "} - "{searchString}" - - - ) : ( - "" - )} -

+ const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10); - {resultsArr.length > 0 ? ( - ResultsView(resultsArr) - ) : ( -
-
-

- {t("search:searchresults-no-records-label")} -

+ let currentPage = 0; + + currentPage = decodeURI(searchResultsObj["@odata.nextLink"]).split( + "skiptoken=" + )[1]; + currentPage = + typeof currentPage != "undefined" + ? parseInt( + decodeURI(currentPage) + .split('pagenumber="')[1] + .slice( + 0, + decodeURI(currentPage) + .split('pagenumber="')[1] + .indexOf('"') + ) - 1 + ) + : pagesCount; + + const getSearchPageResults = (pageNumber) => { + console.log(advancedSearch, searchString, pageNumber); + + if (advancedSearch) { + var searchoObj = Object.assign( + ...searchString.map(([key, val]) => ({ [key]: val })) + ); + + getAdvancedSearchPaged(searchoObj, pageNumber) + .then((data) => { + //console.log(data); + setSearchResults(data); + return data; + }) + .then((data) => { + //console.log("getting details", data); + return getSearchDetails(data).then((data) => { + setSearchDetails(data); + setShowSpinnerState(false); + }); + }); + } else { + getBasicSearchPaged(searchString, pageNumber) + .then((data) => { + //console.log(data); + setSearchResults(data); + return data; + }) + .then((data) => { + //console.log("getting details", data); + return getSearchDetails(data).then((data) => { + setSearchDetails(data); + setShowSpinnerState(false); + }); + }); + } + }; + + const getSearchDetails = (searchResultsObj) => { + //console.log(searchResultsObj); + + let detailsArr = []; + //console.log("search results", searchResultsObj); + searchResultsObj = searchResultsObj.value; + const detailsObj = searchResultsObj.map((searchDetail, index) => { + //console.log(searchDetail); + if (searchDetail.pinswg_appealcasetype == null) { + console.log(searchDetail.title); + } else { + let formMeta = getFormCollection( + "pinswg_" + + searchDetail[ + "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" + ] + .replace(/(\band|[\s\-\+\(\)\,\&])/g, "") + .toLowerCase() + .slice(0, 39) + ); + + detailsArr.push( + getBasicSearchDetailsPaged( + formMeta.LogicalCollectionName, + searchDetail.title, + formMeta.PrimaryIdAttribute, + searchDetail.incidentid + ) + ); + } + }); + // console.log(detailsArr); + return Promise.all(detailsArr); + }; + + const getFormCollection = (formtype) => { + const collectionName = jsonpath.query( + data, + "$..[?(@.LogicalName=='" + formtype + "')]" + ); + //console.log(collectionName[0]); + return collectionName[0]; + }; + + return ( + <> +
+
+

+ {t("search:searchresults-title-label")} +

+

+ {resultsArr.length > 200 + ? t("search:searchresults-max-count-label") + : t("search:searchresults-count-label", { + count: searchResultsObj["@odata.count"], + })} + . + {advancedSearch != true ? ( + <> + + {t("search:searchresults-case-count-label")}{" "} + {" "} + "{searchString}" + + + ) : ( + "" + )} +

+ {resultsArr.length > 0 ? ( + ResultsView(resultsArr) + ) : ( +
+
+

+ {t("search:searchresults-no-records-label")} +

+
-
- )} + )} +
-
+ + ); }; @@ -231,6 +430,12 @@ const mapDispatchToProps = (dispatch) => { setCurrentReference: (currentReference) => { dispatch(setCurrentReference(currentReference)); }, + setSearchResults: (searchResultsObj) => { + dispatch(setSearchResults(searchResultsObj)); + }, + setSearchDetails: (searchDetailsObj) => { + dispatch(setSearchDetails(searchDetailsObj)); + }, }; }; diff --git a/components/searchresults.js b/components/searchresults.js index ebd5743e..4c015ac4 100644 --- a/components/searchresults.js +++ b/components/searchresults.js @@ -7,7 +7,7 @@ import SearchResults from "./search/searchresults"; import CRMError from "./crmError"; export default function Search(props) { - const { searchString, searchResultsObj } = props; + const { searchString, searchResultsObj, advancedSearch } = props; let { t } = useTranslation(); const router = useRouter(); @@ -32,6 +32,7 @@ export default function Search(props) {
{ const { locale } = router; const { appealtypes } = router.query; - console.log(props, props.LPAData); + //console.log(props, props.LPAData); var hasError = _.has(props.LPAData.LPAData, "errorCode") || _.has(props.appealType.appealType, "errorCode") diff --git a/pages/advancedsearchresults.js b/pages/advancedsearchresults.js index 4779355e..d129d6f3 100644 --- a/pages/advancedsearchresults.js +++ b/pages/advancedsearchresults.js @@ -20,15 +20,11 @@ import { setSearch, getSearchObj } from "../store/search/action"; import { setSearchResults, setSearchDetails, - setDocumentDetails, - setDocumentHistory, getSearchResultsObj, } from "../store/searchOutput/action"; import { getAdvancedSearch, getBasicSearchDetails, - getSearchDocumentDetails, - getSearchDocumentHistory, getSASToken, } from "../actions"; @@ -80,13 +76,14 @@ export const getServerSideProps = wrapper.getServerSideProps( store.dispatch(setSearchResults(searchResultsObj)); store.dispatch(setSearchDetails(searchDetailsObj)); + store.dispatch(setSearch(Object.entries(query))); } ); const getFormCollection = (formtype) => { const collectionName = jsonpath.query( data, - "$..[?(@.LogicalName=='" + formtype + "')].LogicalCollectionName" + "$..[?(@.LogicalName=='" + formtype + "')]" ); //console.log(collectionName[0]); return collectionName[0]; @@ -102,19 +99,23 @@ const getSearchDetails = (token, searchResultsObj) => { if (searchDetail.pinswg_appealcasetype == null) { console.log(searchDetail.ticketnumber); } else { + let formMeta = getFormCollection( + "pinswg_" + + searchDetail[ + "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" + ] + .replace(/(\band|[\s\-\+\(\)\,\&])/g, "") + .toLowerCase() + .slice(0, 39) + ); + detailsArr.push( getBasicSearchDetails( token, - getFormCollection( - "pinswg_" + - searchDetail[ - "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" - ] - .replace(/(\band|[\s\-\+\(\)\,\&])/g, "") - .toLowerCase() - .slice(0, 39) - ), - searchDetail.ticketnumber + formMeta.LogicalCollectionName, + searchDetail.title, + formMeta.PrimaryIdAttribute, + searchDetail.incidentid ) ); } diff --git a/pages/api/proxy/[...route].js b/pages/api/proxy/[...route].js index 8dce2743..dcab89d3 100644 --- a/pages/api/proxy/[...route].js +++ b/pages/api/proxy/[...route].js @@ -62,7 +62,8 @@ export default async function ApiProxy(req, res) { "OData-MaxVersion": "4.0", "OData-Version": "4.0", "Accept": "application/json", - "Prefer": 'odata.include-annotations="*",return=representation', + "Prefer": + 'odata.include-annotations="*",return=representation,odata.maxpagesize=10', "Authorization": SASToken, "Content-Type": "application/json", }, @@ -99,13 +100,13 @@ export default async function ApiProxy(req, res) { return new Promise((resolve, reject) => { let apiPath = req.url.split("/api/proxy/")[1]; let hasDocument = apiPath.indexOf("/download") > 0 ? true : false; - console.log( - "//////////////", - req.url.split("/api/proxy/")[1], - PROXY_RELAY_URL + req.query.route[0], - req.method, - hasDocument - ); + // console.log( + // "//////////////", + // req.url.split("/api/proxy/")[1], + // PROXY_RELAY_URL + req.query.route[0], + // req.method, + // hasDocument + // ); axios( req.method == "GET" ? hasDocument diff --git a/pages/dnsapplications.js b/pages/dnsapplications.js index d11317f7..c33d1d62 100644 --- a/pages/dnsapplications.js +++ b/pages/dnsapplications.js @@ -90,7 +90,7 @@ export const getServerSideProps = wrapper.getServerSideProps( const getFormCollection = (formtype) => { const collectionName = jsonpath.query( data, - "$..[?(@.LogicalName=='" + formtype + "')].LogicalCollectionName" + "$..[?(@.LogicalName=='" + formtype + "')]" ); //console.log(collectionName[0]); return collectionName[0]; @@ -103,21 +103,25 @@ const getSearchDetails = (token, searchResultsObj) => { searchResultsObj = searchResultsObj.value; const detailsObj = searchResultsObj.map((searchDetail, index) => { if (searchDetail.pinswg_appealcasetype == null) { - console.log(searchDetail.ticketnumber); + console.log(searchDetail.title); } else { + let formMeta = getFormCollection( + "pinswg_" + + searchDetail[ + "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" + ] + .replace(/(\band|[\s\-\+\(\)\,\&])/g, "") + .toLowerCase() + .slice(0, 39) + ); + detailsArr.push( getBasicSearchDetails( token, - getFormCollection( - "pinswg_" + - searchDetail[ - "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" - ] - .replace(/(\band|[\s\-\+\(\)\,\&])/g, "") - .toLowerCase() - .slice(0, 39) - ), - searchDetail.ticketnumber + formMeta.LogicalCollectionName, + searchDetail.title, + formMeta.PrimaryIdAttribute, + searchDetail.incidentid ) ); } diff --git a/pages/searchresults.js b/pages/searchresults.js index 10e3de8a..9fccb39c 100644 --- a/pages/searchresults.js +++ b/pages/searchresults.js @@ -19,17 +19,9 @@ import { setSearch, getSearchObj } from "../store/search/action"; import { setSearchResults, setSearchDetails, - setDocumentDetails, - setDocumentHistory, getSearchResultsObj, } from "../store/searchOutput/action"; -import { - getBasicSearch, - getBasicSearchDetails, - getSearchDocumentDetails, - getSearchDocumentHistory, - getSASToken, -} from "../actions"; +import { getBasicSearch, getBasicSearchDetails, getSASToken } from "../actions"; const Home = (props) => { const { footerLinks, pages } = props; @@ -87,21 +79,8 @@ export const getServerSideProps = wrapper.getServerSideProps( searchResultsObj ); - // const searchDocumentResultsObj = await getDocumentDetails( - // token, - // searchResultsObj - // ); - - // const searchDocumentHistoryObj = await getDocumentHistory( - // token, - // searchDocumentResultsObj - // ); - // console.log(searchDocumentHistoryObj); - store.dispatch(setSearchResults(searchResultsObj)); store.dispatch(setSearchDetails(searchDetailsObj)); - //store.dispatch(setDocumentDetails(searchDocumentResultsObj)); - //store.dispatch(setDocumentHistory(searchDocumentHistoryObj)); store.dispatch(setSearch(query.q)); } ); @@ -109,7 +88,7 @@ export const getServerSideProps = wrapper.getServerSideProps( const getFormCollection = (formtype) => { const collectionName = jsonpath.query( data, - "$..[?(@.LogicalName=='" + formtype + "')].LogicalCollectionName" + "$..[?(@.LogicalName=='" + formtype + "')]" ); //console.log(collectionName[0]); return collectionName[0]; @@ -123,8 +102,22 @@ const getSearchDetails = (token, searchResultsObj) => { searchResultsObj = searchResultsObj.value; const detailsObj = searchResultsObj.map((searchDetail, index) => { //console.log(searchDetail); + + // console.log( + // "the collect", + // getFormCollection( + // "pinswg_" + + // searchDetail[ + // "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" + // ] + // .replace(/(\band|[\s\-\+\(\)\,\&])/g, "") + // .toLowerCase() + // .slice(0, 39) + // ) + // ); + if (searchDetail.pinswg_appealcasetype == null) { - console.log(searchDetail.ticketnumber); + console.log(searchDetail.title); } else { // console.log( // "appealtype collection name", @@ -138,21 +131,28 @@ const getSearchDetails = (token, searchResultsObj) => { // .replace(/(\band|[\s\-\+\(\)\,\&])/g, "") // .toLowerCase() // .slice(0, 39), - // searchDetail.ticketnumber + // searchDetail.title, + // searchDetail.ticketnumber, + // searchDetail.incidentid // ); + + let formMeta = getFormCollection( + "pinswg_" + + searchDetail[ + "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" + ] + .replace(/(\band|[\s\-\+\(\)\,\&])/g, "") + .toLowerCase() + .slice(0, 39) + ); + detailsArr.push( getBasicSearchDetails( token, - getFormCollection( - "pinswg_" + - searchDetail[ - "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" - ] - .replace(/(\band|[\s\-\+\(\)\,\&])/g, "") - .toLowerCase() - .slice(0, 39) - ), - searchDetail.ticketnumber + formMeta.LogicalCollectionName, + searchDetail.title, + formMeta.PrimaryIdAttribute, + searchDetail.incidentid ) ); } @@ -161,51 +161,6 @@ const getSearchDetails = (token, searchResultsObj) => { return Promise.all(detailsArr); }; -const getDocumentDetails = (token, searchResultsObj) => { - //console.log(searchResultsObj); - - let detailsArr = []; - //console.log("search results", searchResultsObj); - searchResultsObj = searchResultsObj.value; - const detailsObj = searchResultsObj.map((searchDetail, index) => { - if (searchDetail.pinswg_appealcasetype == null) { - console.log(searchDetail.incidentid); - } else { - detailsArr.push( - getSearchDocumentDetails(token, searchDetail.incidentid) - ); - } - }); - //console.log(detailsArr); - return Promise.all(detailsArr); -}; - -const getDocumentHistory = (token, searchDocumentDetailsObj) => { - //console.log(searchResultsObj); - - let historyArr = []; - //console.log("search results", searchDocumentDetailsObj); - searchDocumentDetailsObj = searchDocumentDetailsObj[0].value; - - //console.log(searchDocumentDetailsObj); - const detailsObj = searchDocumentDetailsObj.map((historyDetail, index) => { - //console.log(historyDetail); - if (historyDetail.pinswg_publishtoweb != true) { - console.log(historyDetail.pinswg_documentid); - } else { - // console.log( - // "history detail documentid:", - // historyDetail.pinswg_documentid - // ); - historyArr.push( - getSearchDocumentHistory(token, historyDetail.pinswg_documentid) - ); - } - }); - console.log(historyArr); - return Promise.all(historyArr); -}; - const mapStateToProps = (state) => { return { currentView: state.currentView, diff --git a/public/assets/images/arrow-left--active.svg b/public/assets/images/arrow-left--active.svg new file mode 100644 index 00000000..9c9b321b --- /dev/null +++ b/public/assets/images/arrow-left--active.svg @@ -0,0 +1,9 @@ + + + Path + + + + + + \ No newline at end of file diff --git a/public/assets/images/arrow-left--black.svg b/public/assets/images/arrow-left--black.svg new file mode 100644 index 00000000..620b7843 --- /dev/null +++ b/public/assets/images/arrow-left--black.svg @@ -0,0 +1,9 @@ + + + arrow-right--black + + + + + + \ No newline at end of file diff --git a/public/assets/images/arrow-left--white.svg b/public/assets/images/arrow-left--white.svg new file mode 100644 index 00000000..11915141 --- /dev/null +++ b/public/assets/images/arrow-left--white.svg @@ -0,0 +1,9 @@ + + + arrow-right--white + + + + + + \ No newline at end of file diff --git a/public/assets/images/arrow-right--active.svg b/public/assets/images/arrow-right--active.svg new file mode 100644 index 00000000..0621725d --- /dev/null +++ b/public/assets/images/arrow-right--active.svg @@ -0,0 +1,9 @@ + + + Path + + + + + + \ No newline at end of file diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss index 1734ccfa..57751d9b 100644 --- a/styles/sass/welshgov/_application.scss +++ b/styles/sass/welshgov/_application.scss @@ -1379,3 +1379,118 @@ ul#sharePageLinks.active { } } } + +.paginationWrapper { + @media screen and (max-width: 768px) { + display: flex; + } + + .paginationPrevious { + text-align: left; + + .leftTextButton { + font-weight: bold; + + &:before { + content: ""; + background-image: url(/assets/images/arrow-left--black.svg); + padding: 0 0 0 20px; + background-repeat: no-repeat; + background-position: left center; + } + + &.activePaginationItem { + color: #b80d0d; + &:before { + content: ""; + background-image: url(/assets/images/arrow-left--active.svg); + } + } + + @media screen and (max-width: 768px) { + &.activePaginationItem { + color: $white; + &:before { + content: ""; + background-image: url(/assets/images/arrow-left--white.svg); + } + } + background-color: $black; + color: #ffffff; + font-size: 20px; + font-weight: bold; + padding: 15px 20px 15px 20px !important; + -webkit-transition: all 0.2s ease-in; + -moz-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + width: max-content; + &:link { + color: $white; + } + } + } + } + + .paginationContainer { + text-align: center; + .activePaginationItem { + color: #b80d0d; + } + @media screen and (max-width: 768px) { + display: none; + } + } + + .paginationNext { + text-align: right; + + .rightTextButton { + font-weight: bold; + + &:after { + content: ""; + background-image: url(/assets/images/arrow-right--black.svg); + padding: 0 0 0 20px; + background-repeat: no-repeat; + background-position: 5px; + } + + &.activePaginationItem { + color: #b80d0d; + &:after { + content: ""; + background-image: url(/assets/images/arrow-right--active.svg); + } + } + @media screen and (max-width: 768px) { + &.activePaginationItem { + color: #ffffff; + &:after { + content: ""; + background-image: url(/assets/images/arrow-right--white.svg); + } + } + background-color: $black; + color: #ffffff; + font-size: 20px; + font-weight: bold; + padding: 15px 15px 15px 20px !important; + -webkit-transition: all 0.2s ease-in; + -moz-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + margin-left: 20px; + width: max-content; + &:link { + color: $white; + } + } + } + } +} +.mobilePageCount { + margin-top: 40px; + margin-bottom: 20px; + @media screen and (min-width: 768px) { + display: none; + } +}