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

added sorting to viewall page

Browse Source
This commit is contained in:
robbond
2024-03-21 11:54:40 +00:00
parent e218a027d9
commit f5409ff243
2 changed files with 603 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/myportal/viewall.js
+229 -23
View File
@@ -6,6 +6,11 @@ import { connect } from "react-redux";
import { JSONPath as jsonpath } from "jsonpath-plus"; import { JSONPath as jsonpath } from "jsonpath-plus";
import transLookup from "../../data/lookuptranslations.json"; import transLookup from "../../data/lookuptranslations.json";
import { getFormCollectionByID } from "../../components/utils"; import { getFormCollectionByID } from "../../components/utils";
import { useCallback, useState } from "react";
import {
setSearchResults,
setSearchDetails,
} from "../../store/searchOutput/action";
const ViewAllResults = (props) => { const ViewAllResults = (props) => {
const { const {
@@ -14,6 +19,7 @@ const ViewAllResults = (props) => {
currentView, currentView,
setCurrentReference, setCurrentReference,
myportal, myportal,
setSearchResults,
} = props; } = props;
let { t } = useTranslation(); let { t } = useTranslation();
@@ -29,6 +35,11 @@ const ViewAllResults = (props) => {
? props["awaitingSubmission"].awaitingSubmissionDetails.case ? props["awaitingSubmission"].awaitingSubmissionDetails.case
: props[currentView.viewKey][currentView.viewKey].value || []; : props[currentView.viewKey][currentView.viewKey].value || [];
const [orderByState, setOrderbyState] = useState("createdon");
const [fieldSortState, setfieldSortState] = useState("asc");
const [showSpinnerState, setShowSpinnerState] = useState(false);
const [selectedOption, setSelectedOption] = useState(10);
function formatDates(dateObj) { function formatDates(dateObj) {
var dateObj = new Date(dateObj); var dateObj = new Date(dateObj);
var dd = String(dateObj.getDate()).padStart(2, "0"); var dd = String(dateObj.getDate()).padStart(2, "0");
@@ -46,9 +57,13 @@ const ViewAllResults = (props) => {
: props[currentView.viewKey][currentView.viewKey + "Details"] || []; : props[currentView.viewKey][currentView.viewKey + "Details"] || [];
let resultsRowArr = []; let resultsRowArr = [];
const buildResultsRowArr = () => {
resultsArr.map((item, key) => { resultsArr.map((item, key) => {
let detailsObj = jsonpath( let detailsObj = jsonpath(
'$..value[?(@.pinswg_name=="' + item.pinswg_title + '")]', '$..value[?(@.pinswg_name=="' + currentView.viewKey ==
"awaitingSubmissionDetails"
? item.title
: item.pinswg_title + '")]',
searchDetailsObj searchDetailsObj
); );
detailsObj = detailsObj[0]; detailsObj = detailsObj[0];
@@ -80,14 +95,16 @@ const ViewAllResults = (props) => {
: "/myportal" + : "/myportal" +
"/" + "/" +
getFormCollectionByID( getFormCollectionByID(
resultsArr[key].pinswg_appealcasetype resultsArr[key]
.pinswg_appealcasetype
).UrlName + ).UrlName +
"?lpa=" + "?lpa=" +
resultsArr[key][ resultsArr[key][
"_pinswg_associatedlpa_value" "_pinswg_associatedlpa_value"
] + ] +
"&apt=" + "&apt=" +
resultsArr[key].pinswg_appealcasetype + resultsArr[key]
.pinswg_appealcasetype +
"&casereference=" + "&casereference=" +
resultsArr[key].title + resultsArr[key].title +
"&inid=" + "&inid=" +
@@ -124,12 +141,14 @@ const ViewAllResults = (props) => {
resultsArr[key].pinswg_appealcasetype, resultsArr[key].pinswg_appealcasetype,
"repDetails": "repDetails":
currentView.viewKey == currentView.viewKey ==
"myRepresentations" && resultsArr[key], "myRepresentations" &&
resultsArr[key],
}); });
}} }}
> >
<span className="results-visually-hidden"> <span className="results-visually-hidden">
{t("search:searchresults-case-reference-label")}: {t("search:searchresults-case-reference-label")}
:
</span> </span>
{currentView.viewKey != "watchedCases" {currentView.viewKey != "watchedCases"
? currentView.viewKey == "myRepresentations" ? currentView.viewKey == "myRepresentations"
@@ -167,7 +186,8 @@ const ViewAllResults = (props) => {
: ""} : ""}
{currentView.viewKey == "myRepresentations" && {currentView.viewKey == "myRepresentations" &&
_.has(searchDetailsObj[key].pinswg_siteaddressline1) _.has(searchDetailsObj[key].pinswg_siteaddressline1)
? searchDetailsObj[key].value[0].pinswg_siteaddressline1 ? searchDetailsObj[key].value[0]
.pinswg_siteaddressline1
: ""} : ""}
{_.has(detailsObj, "pinswg_siteaddressline1") {_.has(detailsObj, "pinswg_siteaddressline1")
? detailsObj.pinswg_siteaddressline1 ? detailsObj.pinswg_siteaddressline1
@@ -180,11 +200,15 @@ const ViewAllResults = (props) => {
searchDetailsObj[key].pinswg_siteaddressline1 != searchDetailsObj[key].pinswg_siteaddressline1 !=
null && <br />} null && <br />}
{currentView.viewKey == "myRepresentations" && {currentView.viewKey == "myRepresentations" &&
_.has(searchDetailsObj[key].pinswg_siteaddressline1) && _.has(
searchDetailsObj[key].pinswg_siteaddressline1
) &&
searchDetailsObj[key].value[0] searchDetailsObj[key].value[0]
.pinswg_siteaddressline1 != null && <br />} .pinswg_siteaddressline1 != null && <br />}
{_.has(detailsObj, "pinswg_siteaddressline1") && {_.has(detailsObj, "pinswg_siteaddressline1") &&
detailsObj.pinswg_siteaddressline1 != null && <br />} detailsObj.pinswg_siteaddressline1 != null && (
<br />
)}
{currentView.viewKey == "awaitingSubmissionDetails" && {currentView.viewKey == "awaitingSubmissionDetails" &&
_.has(searchDetailsObj[key], "pinswg_siteaddressline1") _.has(searchDetailsObj[key], "pinswg_siteaddressline1")
? searchDetailsObj[key].pinswg_siteaddressline2 ? searchDetailsObj[key].pinswg_siteaddressline2
@@ -205,12 +229,16 @@ const ViewAllResults = (props) => {
null && <br />} null && <br />}
{currentView.viewKey == "myRepresentations" && {currentView.viewKey == "myRepresentations" &&
_.has(searchDetailsObj[key].pinswg_siteaddressline2) && _.has(
searchDetailsObj[key].pinswg_siteaddressline2
) &&
searchDetailsObj[key].pinswg_siteaddressline1 != searchDetailsObj[key].pinswg_siteaddressline1 !=
null && <br />} null && <br />}
{_.has(detailsObj, "pinswg_siteaddressline2") && {_.has(detailsObj, "pinswg_siteaddressline2") &&
detailsObj.pinswg_siteaddressline2 != null && <br />} detailsObj.pinswg_siteaddressline2 != null && (
<br />
)}
{currentView.viewKey == "awaitingSubmissionDetails" && {currentView.viewKey == "awaitingSubmissionDetails" &&
_.has(searchDetailsObj[key], "pinswg_siteaddresstown") _.has(searchDetailsObj[key], "pinswg_siteaddresstown")
? searchDetailsObj[key].pinswg_siteaddresstown ? searchDetailsObj[key].pinswg_siteaddresstown
@@ -259,9 +287,14 @@ const ViewAllResults = (props) => {
searchDetailsObj[key].pinswg_siteaddresscounty != searchDetailsObj[key].pinswg_siteaddresscounty !=
null && <br />} null && <br />}
{_.has(detailsObj, "pinswg_siteaddresscounty") && {_.has(detailsObj, "pinswg_siteaddresscounty") &&
detailsObj.pinswg_siteaddresscounty != null && <br />} detailsObj.pinswg_siteaddresscounty != null && (
<br />
)}
{currentView.viewKey == "awaitingSubmissionDetails" && {currentView.viewKey == "awaitingSubmissionDetails" &&
_.has(searchDetailsObj[key], "pinswg_siteaddresspostcode") _.has(
searchDetailsObj[key],
"pinswg_siteaddresspostcode"
)
? searchDetailsObj[key].pinswg_siteaddresspostcode ? searchDetailsObj[key].pinswg_siteaddresspostcode
: ""} : ""}
{_.has(detailsObj, "pinswg_siteaddresspostcode") {_.has(detailsObj, "pinswg_siteaddresspostcode")
@@ -383,8 +416,9 @@ const ViewAllResults = (props) => {
'")].value_cy', '")].value_cy',
transLookup transLookup
) )
: getFormCollectionByID(item.pinswg_appealcasetype) : getFormCollectionByID(
.value || "N/A" item.pinswg_appealcasetype
).value || "N/A"
: router.locale == "cy" : router.locale == "cy"
? jsonpath( ? jsonpath(
'$..[?(@.value=="' + '$..[?(@.value=="' +
@@ -470,6 +504,51 @@ const ViewAllResults = (props) => {
</div> </div>
); );
}); });
};
buildResultsRowArr();
const sortDataBy = (whichField) => {
setOrderbyState(whichField);
setfieldSortState("asc");
getSearchPageResults(1, whichField, fieldSortState);
whichField == orderByState
? fieldSortState == "desc"
? setfieldSortState("asc")
: setfieldSortState("desc")
: setfieldSortState("asc");
//setCurrentPage(1);
//setShowSpinnerState(true);
};
const getSearchPageResults = useCallback(
(pageNumber, orderBy, fieldSort) => {
//console.log(advancedSearch, searchString, pageNumber);
console.log(pageNumber, orderBy, fieldSort);
resultsArr.sort(dynamicSort(orderBy, fieldSort));
console.log(resultsArr);
},
[selectedOption]
);
function dynamicSort(property, order) {
var sort_order = 1;
if (order === "desc") {
sort_order = -1;
}
return function (a, b) {
// a should come before b in the sorted order
if (a[property] < b[property]) {
return -1 * sort_order;
// a should come after b in the sorted order
} else if (a[property] > b[property]) {
return 1 * sort_order;
// a and b are the same
} else {
return 0 * sort_order;
}
};
}
return ( return (
<> <>
@@ -489,7 +568,32 @@ const ViewAllResults = (props) => {
<dl className="govuk-summary-list govuk-!-margin-bottom-9 results"> <dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
<div className="govuk-summary-list__row results-headings"> <div className="govuk-summary-list__row results-headings">
<dd className="govuk-summary-list__key govuk-!-font-size-16 results_wider govuk-!-padding-left-2"> <dd className="govuk-summary-list__key govuk-!-font-size-16 results_wider govuk-!-padding-left-2">
{t("search:searchresults-case-reference-label")} <button
type="button"
onClick={() =>
sortDataBy(
currentView.viewKey ==
"awaitingSubmissionDetails"
? "title"
: "pinswg_title"
)
}
className={
orderByState ==
(currentView.viewKey ==
"awaitingSubmissionDetails"
? "title"
: "pinswg_title")
? fieldSortState == "asc"
? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
}
>
{t(
"search:searchresults-case-reference-label"
)}
</button>
</dd> </dd>
<dd className="govuk-summary-list__key govuk-!-font-size-16"> <dd className="govuk-summary-list__key govuk-!-font-size-16">
{t("search:searchresults-site-address-label")} {t("search:searchresults-site-address-label")}
@@ -497,7 +601,21 @@ const ViewAllResults = (props) => {
{currentView.viewKey == {currentView.viewKey ==
"awaitingSubmissionDetails" ? ( "awaitingSubmissionDetails" ? (
<dd className="govuk-summary-list__key govuk-!-font-size-16"> <dd className="govuk-summary-list__key govuk-!-font-size-16">
{t("search:searchresults-created-on-label")}{" "} <button
type="button"
onClick={() => sortDataBy("createdon")}
className={
orderByState == "createdon"
? fieldSortState == "asc"
? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
}
>
{t(
"search:searchresults-created-on-label"
)}{" "}
</button>
</dd> </dd>
) : ( ) : (
<dd className="govuk-summary-list__key govuk-!-font-size-16"> <dd className="govuk-summary-list__key govuk-!-font-size-16">
@@ -505,19 +623,101 @@ const ViewAllResults = (props) => {
</dd> </dd>
)} )}
<dd className="govuk-summary-list__key govuk-!-font-size-16"> <dd className="govuk-summary-list__key govuk-!-font-size-16">
{t("search:searchresults-authority-label")} <button
type="button"
onClick={() =>
sortDataBy(
currentView.viewKey ==
"awaitingSubmissionDetails"
? "pinswg_lpaname"
: "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
)
}
className={
orderByState ==
(currentView.viewKey ==
"awaitingSubmissionDetails"
? "pinswg_lpaname"
: "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue")
? fieldSortState == "asc"
? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
}
>
{t("search:searchresults-authority-label")}{" "}
</button>
</dd> </dd>
<dd className="govuk-summary-list__key govuk-!-font-size-16"> <dd className="govuk-summary-list__key govuk-!-font-size-16">
{t("search:searchresults-case-type-label")} {currentView.viewKey !=
"awaitingSubmissionDetails" ? (
<button
type="button"
onClick={() =>
sortDataBy(
"pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
)
}
className={
orderByState ==
(currentView.viewKey ==
"awaitingSubmissionDetails"
? "pinswg_lpaname"
: "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue")
? fieldSortState == "asc"
? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
}
>
{t(
"search:searchresults-case-type-label"
)}{" "}
</button>
) : (
t("search:searchresults-case-type-label")
)}{" "}
</dd> </dd>
<dd className="govuk-summary-list__key govuk-!-font-size-16"> <dd className="govuk-summary-list__key govuk-!-font-size-16">
{currentView.viewKey == "myRepresentations" {currentView.viewKey == "myRepresentations" ? (
? "Created" <button
: t("search:searchresults-status-label")} type="button"
onClick={() =>
sortDataBy("createdDate")
}
className={
orderByState == "createdDate"
? fieldSortState == "asc"
? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
}
>
Created{" "}
</button>
) : (
t("search:searchresults-status-label")
)}
</dd> </dd>
</div> </div>
{showSpinnerState == true ? (
{resultsRowArr} <div className="govuk-summary-list__row">
<div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9 govuk-!-font-weight-bold govuk-!-font-size-20 ">
{t("common:spinner-fetching-data")}
<img
className="data-loading-icon"
src="/assets/images/loading.gif"
alt={
router.locale == "cy"
? "Nôl data"
: "Fetching data"
}
/>
</div>
</div>
) : (
resultsRowArr
)}
</dl> </dl>
</div> </div>
</div> </div>
@@ -542,6 +742,12 @@ const mapDispatchToProps = (dispatch) => {
setCurrentReference: (currentReference) => { setCurrentReference: (currentReference) => {
dispatch(setCurrentReference(currentReference)); dispatch(setCurrentReference(currentReference));
}, },
setSearchResults: (searchResultsObj) => {
dispatch(setSearchResults(searchResultsObj));
},
setSearchDetails: (searchDetailsObj) => {
dispatch(setSearchDetails(searchDetailsObj));
},
}; };
}; };
pages/api/auth/[...nextauth].js
+2 -2
View File
@@ -150,7 +150,7 @@ const authOptions = (locale, req, res) => {
}, },
}, },
EmailProvider({ EmailProvider({
maxAge: 10 * 60, // Magic links are valid for 10 min only maxAge: 2 * 60 * 60, //10 * 60, // Magic links are valid for 10 min only
async sendVerificationRequest({ identifier: email, url }) { async sendVerificationRequest({ identifier: email, url }) {
const { host, port, protocol, token, searchParams } = const { host, port, protocol, token, searchParams } =
new URL(url); new URL(url);
@@ -173,7 +173,7 @@ const authOptions = (locale, req, res) => {
"emailAddress": email, "emailAddress": email,
"signInLink": url, "signInLink": url,
"linkExpiry": 10 * 60, "linkExpiry": 2 * 60 * 60,
}; };
const reference = "PEDW-SIGNIN"; const reference = "PEDW-SIGNIN";