added sorting to viewall page
This commit is contained in:
+229
-23
@@ -6,6 +6,11 @@ import { connect } from "react-redux";
|
||||
import { JSONPath as jsonpath } from "jsonpath-plus";
|
||||
import transLookup from "../../data/lookuptranslations.json";
|
||||
import { getFormCollectionByID } from "../../components/utils";
|
||||
import { useCallback, useState } from "react";
|
||||
import {
|
||||
setSearchResults,
|
||||
setSearchDetails,
|
||||
} from "../../store/searchOutput/action";
|
||||
|
||||
const ViewAllResults = (props) => {
|
||||
const {
|
||||
@@ -14,6 +19,7 @@ const ViewAllResults = (props) => {
|
||||
currentView,
|
||||
setCurrentReference,
|
||||
myportal,
|
||||
setSearchResults,
|
||||
} = props;
|
||||
|
||||
let { t } = useTranslation();
|
||||
@@ -29,6 +35,11 @@ const ViewAllResults = (props) => {
|
||||
? props["awaitingSubmission"].awaitingSubmissionDetails.case
|
||||
: 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) {
|
||||
var dateObj = new Date(dateObj);
|
||||
var dd = String(dateObj.getDate()).padStart(2, "0");
|
||||
@@ -46,9 +57,13 @@ const ViewAllResults = (props) => {
|
||||
: props[currentView.viewKey][currentView.viewKey + "Details"] || [];
|
||||
|
||||
let resultsRowArr = [];
|
||||
const buildResultsRowArr = () => {
|
||||
resultsArr.map((item, key) => {
|
||||
let detailsObj = jsonpath(
|
||||
'$..value[?(@.pinswg_name=="' + item.pinswg_title + '")]',
|
||||
'$..value[?(@.pinswg_name=="' + currentView.viewKey ==
|
||||
"awaitingSubmissionDetails"
|
||||
? item.title
|
||||
: item.pinswg_title + '")]',
|
||||
searchDetailsObj
|
||||
);
|
||||
detailsObj = detailsObj[0];
|
||||
@@ -80,14 +95,16 @@ const ViewAllResults = (props) => {
|
||||
: "/myportal" +
|
||||
"/" +
|
||||
getFormCollectionByID(
|
||||
resultsArr[key].pinswg_appealcasetype
|
||||
resultsArr[key]
|
||||
.pinswg_appealcasetype
|
||||
).UrlName +
|
||||
"?lpa=" +
|
||||
resultsArr[key][
|
||||
"_pinswg_associatedlpa_value"
|
||||
] +
|
||||
"&apt=" +
|
||||
resultsArr[key].pinswg_appealcasetype +
|
||||
resultsArr[key]
|
||||
.pinswg_appealcasetype +
|
||||
"&casereference=" +
|
||||
resultsArr[key].title +
|
||||
"&inid=" +
|
||||
@@ -124,12 +141,14 @@ const ViewAllResults = (props) => {
|
||||
resultsArr[key].pinswg_appealcasetype,
|
||||
"repDetails":
|
||||
currentView.viewKey ==
|
||||
"myRepresentations" && resultsArr[key],
|
||||
"myRepresentations" &&
|
||||
resultsArr[key],
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span className="results-visually-hidden">
|
||||
{t("search:searchresults-case-reference-label")}:
|
||||
{t("search:searchresults-case-reference-label")}
|
||||
:
|
||||
</span>
|
||||
{currentView.viewKey != "watchedCases"
|
||||
? currentView.viewKey == "myRepresentations"
|
||||
@@ -167,7 +186,8 @@ const ViewAllResults = (props) => {
|
||||
: ""}
|
||||
{currentView.viewKey == "myRepresentations" &&
|
||||
_.has(searchDetailsObj[key].pinswg_siteaddressline1)
|
||||
? searchDetailsObj[key].value[0].pinswg_siteaddressline1
|
||||
? searchDetailsObj[key].value[0]
|
||||
.pinswg_siteaddressline1
|
||||
: ""}
|
||||
{_.has(detailsObj, "pinswg_siteaddressline1")
|
||||
? detailsObj.pinswg_siteaddressline1
|
||||
@@ -180,11 +200,15 @@ const ViewAllResults = (props) => {
|
||||
searchDetailsObj[key].pinswg_siteaddressline1 !=
|
||||
null && <br />}
|
||||
{currentView.viewKey == "myRepresentations" &&
|
||||
_.has(searchDetailsObj[key].pinswg_siteaddressline1) &&
|
||||
_.has(
|
||||
searchDetailsObj[key].pinswg_siteaddressline1
|
||||
) &&
|
||||
searchDetailsObj[key].value[0]
|
||||
.pinswg_siteaddressline1 != null && <br />}
|
||||
{_.has(detailsObj, "pinswg_siteaddressline1") &&
|
||||
detailsObj.pinswg_siteaddressline1 != null && <br />}
|
||||
detailsObj.pinswg_siteaddressline1 != null && (
|
||||
<br />
|
||||
)}
|
||||
{currentView.viewKey == "awaitingSubmissionDetails" &&
|
||||
_.has(searchDetailsObj[key], "pinswg_siteaddressline1")
|
||||
? searchDetailsObj[key].pinswg_siteaddressline2
|
||||
@@ -205,12 +229,16 @@ const ViewAllResults = (props) => {
|
||||
null && <br />}
|
||||
|
||||
{currentView.viewKey == "myRepresentations" &&
|
||||
_.has(searchDetailsObj[key].pinswg_siteaddressline2) &&
|
||||
_.has(
|
||||
searchDetailsObj[key].pinswg_siteaddressline2
|
||||
) &&
|
||||
searchDetailsObj[key].pinswg_siteaddressline1 !=
|
||||
null && <br />}
|
||||
|
||||
{_.has(detailsObj, "pinswg_siteaddressline2") &&
|
||||
detailsObj.pinswg_siteaddressline2 != null && <br />}
|
||||
detailsObj.pinswg_siteaddressline2 != null && (
|
||||
<br />
|
||||
)}
|
||||
{currentView.viewKey == "awaitingSubmissionDetails" &&
|
||||
_.has(searchDetailsObj[key], "pinswg_siteaddresstown")
|
||||
? searchDetailsObj[key].pinswg_siteaddresstown
|
||||
@@ -259,9 +287,14 @@ const ViewAllResults = (props) => {
|
||||
searchDetailsObj[key].pinswg_siteaddresscounty !=
|
||||
null && <br />}
|
||||
{_.has(detailsObj, "pinswg_siteaddresscounty") &&
|
||||
detailsObj.pinswg_siteaddresscounty != null && <br />}
|
||||
detailsObj.pinswg_siteaddresscounty != null && (
|
||||
<br />
|
||||
)}
|
||||
{currentView.viewKey == "awaitingSubmissionDetails" &&
|
||||
_.has(searchDetailsObj[key], "pinswg_siteaddresspostcode")
|
||||
_.has(
|
||||
searchDetailsObj[key],
|
||||
"pinswg_siteaddresspostcode"
|
||||
)
|
||||
? searchDetailsObj[key].pinswg_siteaddresspostcode
|
||||
: ""}
|
||||
{_.has(detailsObj, "pinswg_siteaddresspostcode")
|
||||
@@ -383,8 +416,9 @@ const ViewAllResults = (props) => {
|
||||
'")].value_cy',
|
||||
transLookup
|
||||
)
|
||||
: getFormCollectionByID(item.pinswg_appealcasetype)
|
||||
.value || "N/A"
|
||||
: getFormCollectionByID(
|
||||
item.pinswg_appealcasetype
|
||||
).value || "N/A"
|
||||
: router.locale == "cy"
|
||||
? jsonpath(
|
||||
'$..[?(@.value=="' +
|
||||
@@ -470,6 +504,51 @@ const ViewAllResults = (props) => {
|
||||
</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 (
|
||||
<>
|
||||
@@ -489,7 +568,32 @@ const ViewAllResults = (props) => {
|
||||
<dl className="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 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 className="govuk-summary-list__key govuk-!-font-size-16">
|
||||
{t("search:searchresults-site-address-label")}
|
||||
@@ -497,7 +601,21 @@ const ViewAllResults = (props) => {
|
||||
{currentView.viewKey ==
|
||||
"awaitingSubmissionDetails" ? (
|
||||
<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 className="govuk-summary-list__key govuk-!-font-size-16">
|
||||
@@ -505,19 +623,101 @@ const ViewAllResults = (props) => {
|
||||
</dd>
|
||||
)}
|
||||
<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 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 className="govuk-summary-list__key govuk-!-font-size-16">
|
||||
{currentView.viewKey == "myRepresentations"
|
||||
? "Created"
|
||||
: t("search:searchresults-status-label")}
|
||||
{currentView.viewKey == "myRepresentations" ? (
|
||||
<button
|
||||
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>
|
||||
</div>
|
||||
|
||||
{resultsRowArr}
|
||||
{showSpinnerState == true ? (
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -542,6 +742,12 @@ const mapDispatchToProps = (dispatch) => {
|
||||
setCurrentReference: (currentReference) => {
|
||||
dispatch(setCurrentReference(currentReference));
|
||||
},
|
||||
setSearchResults: (searchResultsObj) => {
|
||||
dispatch(setSearchResults(searchResultsObj));
|
||||
},
|
||||
setSearchDetails: (searchDetailsObj) => {
|
||||
dispatch(setSearchDetails(searchDetailsObj));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -150,7 +150,7 @@ const authOptions = (locale, req, res) => {
|
||||
},
|
||||
},
|
||||
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 }) {
|
||||
const { host, port, protocol, token, searchParams } =
|
||||
new URL(url);
|
||||
@@ -173,7 +173,7 @@ const authOptions = (locale, req, res) => {
|
||||
"emailAddress": email,
|
||||
"signInLink": url,
|
||||
|
||||
"linkExpiry": 10 * 60,
|
||||
"linkExpiry": 2 * 60 * 60,
|
||||
};
|
||||
const reference = "PEDW-SIGNIN";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user