Files
pedwfrontend/components/search/searchresults.js
T
2022-01-31 20:11:31 +00:00

656 lines
31 KiB
JavaScript

import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
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 {
setWatchedCases,
setWatchedCasesDetails,
} from "../../store/watchedCases/action";
import { useEffect } from "react";
import { parseCookies, setCookie, destroyCookie } from "nookies";
import PaginationControl from "./pagination";
import {
getSearchDetailsPaged,
getFormCollection,
getFormCollectionByID,
} from "../utils";
import {
createWatchedCases,
getWatchedCasesProxy,
getPortalModuleDetailsProxy,
deleteWatchedCases,
} from "../../actions";
const SearchResults = (props) => {
const {
searchString,
searchResultsObj,
searchDetailsObj,
setCurrentReference,
setSearchResults,
setSearchDetails,
advancedSearch,
myportal,
watchedCases,
setWatchedCases,
setWatchedCasesDetails,
isLinkedCase,
} = props;
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
var resultsArr = searchResultsObj.value || [];
const [showSpinnerState, setShowSpinnerState] = useState(false);
let spinnerState = () => {
showSpinnerState == true
? setShowSpinnerState(false)
: setShowSpinnerState(true);
};
const [orderByState, setOrderbyState] = useState("createdon");
const [fieldSortState, setfieldSortState] = useState("asc");
const cookies = parseCookies();
const selectWatchedCase = (loggedInUser, incidentID, appealType) => {
let updateBody = {
"pinswg_WatchedCase@odata.bind": "/incidents(" + incidentID + ")",
"pinswg_Contact@odata.bind": "/contacts(" + loggedInUser + ")",
"pinswg_appealcasetype": +appealType,
};
createWatchedCases(updateBody)
.then((data) => data)
.then(() => {
getWatchedCasesProxy(cookies.pinsUser).then((data) => {
setWatchedCases(data),
getDetails(data, "myWatchedCases").then((data) => {
setWatchedCasesDetails(data);
});
});
});
};
const isWatchedCase = (whichIncident) => {
let isWatched = jsonpath.query(
watchedCases,
"$..value[?(@._pinswg_watchedcase_value=='" + whichIncident + "')]"
);
return isWatched;
};
const deleteItem = (caseID, topThreeType) => {
let cookies = parseCookies();
topThreeType == "watchedCases" &&
deleteWatchedCases(caseID)
.then((data) => data)
.then(() => {
getWatchedCasesProxy(cookies.pinsUser).then((data) => {
setWatchedCases(data),
getDetails(data, "myWatchedCases").then((data) => {
setWatchedCasesDetails(data);
});
});
});
};
const getDetails = (resultsObj, detailsType) => {
//console.log(resultsObj);
let detailsArr = [];
resultsObj = resultsObj.value;
const detailsObj = resultsObj.map((searchDetail, index) => {
if (searchDetail.pinswg_appealcasetype == null) {
console.log(
detailsType != "myWatchedCases"
? searchDetail.ticketnumber
: searchDetail[
"_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
]
);
} else {
detailsArr.push(
getPortalModuleDetailsProxy(
getFormCollectionByID(
searchDetail.pinswg_appealcasetype
).LogicalCollectionName,
detailsType != "myWatchedCases"
? searchDetail.ticketnumber
: searchDetail[
"_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
]
)
);
}
});
//console.log(detailsArr);
return Promise.all(detailsArr);
};
const ResultsView = (resultsArr) => {
return (
<>
<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 ">
{t("search:searchresults-case-reference-label")}
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-16">
{t("search:searchresults-site-address-label")}
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-16">
{t("search:searchresults-applicant-label")}
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-16">
{/* {t("search:searchresults-authority-label")} */}
<button
type="button"
onClick={() =>
sortDataBy("_pinswg_associatedlpa_value")
}
className={
orderByState ==
"_pinswg_associatedlpa_value"
? 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")} */}
<button
type="button"
onClick={() =>
sortDataBy("pinswg_appealcasetype")
}
className={
orderByState == "pinswg_appealcasetype"
? 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>
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-16">
{/* {t("search:searchresults-status-label")} */}
<button
type="button"
onClick={() => sortDataBy("statuscode")}
className={
orderByState == "statuscode"
? 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-status-label")}
</button>
</dd>
{myportal == true && (
<dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action"></dd>
)}
</div>
{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>
) : (
resultsArr.map((item, key) => {
let detailsObj = jsonpath.query(
searchDetailsObj,
"$..value[?(@.pinswg_name=='" +
item.title +
"')]"
);
detailsObj = detailsObj[0];
return (
<div
className="govuk-summary-list__row"
key={key}
>
<dd className="govuk-summary-list__value govuk-!-font-size-16 ">
<Link
href={
router.locale == "cy"
? myportal == true
? "/fymhorth/achos"
: "/achos"
: myportal == true
? "/myportal/case"
: "/case"
}
>
<a
className="govuk-link--no-underline"
onClick={() => {
setCurrentReference({
"currentReference":
item.title,
"currentType":
"searchResultsObj",
"incidentid":
item.incidentid,
"appealType":
item.pinswg_appealcasetype,
});
}}
>
<span className="results-visually-hidden">
{t(
"search:searchresults-case-reference-label"
)}
:
</span>
{item.title}
</a>
</Link>
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-16">
<span className="results-visually-hidden">
{t(
"search:searchresults-site-address-label"
)}
:
</span>
{_.has(
detailsObj,
"pinswg_siteaddressline1"
)
? detailsObj.pinswg_siteaddressline1
: ""}
{/* {detailsObj.pinswg_siteaddressline1 !=
null && <br />} */}
{_.has(
detailsObj,
"pinswg_siteaddressline1"
) &&
detailsObj.pinswg_siteaddressline1 !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddressline1"
)
? detailsObj.pinswg_siteaddressline2
: ""}
{_.has(
detailsObj,
"pinswg_siteaddressline2"
) &&
detailsObj.pinswg_siteaddressline2 !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddresstown"
)
? detailsObj.pinswg_siteaddresstown
: ""}
{_.has(
detailsObj,
"pinswg_siteaddresstown"
) &&
detailsObj.pinswg_siteaddresstown !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddresscounty"
)
? detailsObj.pinswg_siteaddresscounty
: ""}
{_.has(
detailsObj,
"pinswg_siteaddresscounty"
) &&
detailsObj.pinswg_siteaddresscounty !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddresspostcode"
)
? detailsObj.pinswg_siteaddresspostcode
: ""}
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-16">
<span className="results-visually-hidden">
{t(
"search:searchresults-applicant-label"
)}
:
</span>
{_.has(detailsObj, [
"_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue",
])
? detailsObj[
"_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
]
: ""}
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-16">
<span className="results-visually-hidden">
{t(
"search:searchresults-authority-label"
)}
:
</span>
{_.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"
: ""}
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-16">
<span className="results-visually-hidden">
{t(
"search:searchresults-case-type-label"
)}
:
</span>
{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"}
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-16">
<span className="results-visually-hidden">
{t(
"search:searchresults-status-label"
)}
:
</span>
{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"}
</dd>
{myportal == true && (
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-summary-list__action">
{isWatchedCase(item.incidentid)
.length >
0 ==
true ? (
<span
className="govuk-summary-list__actionLink watched_link"
onClick={() => {
deleteItem(
isWatchedCase(
item.incidentid
)[0]
.pinswg_watchlistid,
"watchedCases"
);
alert(
"You have stopped watching case " +
item.title
);
}}
title="Stop watching this case"
>
&minus;
</span>
) : (
<span
className="govuk-summary-list__actionLink"
onClick={() => {
selectWatchedCase(
cookies.pinsUser,
item.incidentid,
item.pinswg_appealcasetype
);
alert(
"You are watching case " +
item.title
);
}}
title="Watch this case"
>
+
</span>
)}
</dd>
)}
</div>
);
})
)}
</dl>
<PaginationControl
currentPage={currentPage}
searchResultsObj={searchResultsObj}
orderBy={orderByState}
fieldSort={fieldSortState}
spinnerState={spinnerState}
getSearchPageResults={getSearchPageResults}
/>
</>
);
};
const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10);
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, orderBy, fieldSort) => {
//console.log(advancedSearch, searchString, pageNumber);
if (advancedSearch) {
var searchoObj = Object.assign(
...searchString.map(([key, val]) => ({ [key]: val }))
);
getAdvancedSearchPaged(searchoObj, pageNumber, orderBy, fieldSort)
.then((data) => data)
.then((data) => {
//console.log("getting details", data);
setSearchResults(data);
return getSearchDetailsPaged(data).then((data) => {
setSearchDetails(data);
setShowSpinnerState(false);
});
});
} else {
getBasicSearchPaged(searchString, pageNumber, orderBy, fieldSort)
.then((data) => data)
.then((data) => {
//console.log("getting details", data);
setSearchResults(data);
return getSearchDetailsPaged(data).then((data) => {
setSearchDetails(data);
setShowSpinnerState(false);
});
});
}
};
const sortDataBy = (whichField) => {
setOrderbyState(whichField);
setfieldSortState("asc");
getSearchPageResults(1, whichField, fieldSortState);
whichField == orderByState
? fieldSortState == "desc"
? setfieldSortState("asc")
: setfieldSortState("desc")
: setfieldSortState("asc");
setShowSpinnerState(true);
};
// console.log(
// "page is here ",
// currentPage,
// orderByState + " " + fieldSortState
// );
return (
<>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
{isLinkedCase
? t("search:searchresults-title-label-linked-case")
: t("search:searchresults-title-label")}
</h1>
{!isLinkedCase && (
<p className="govuk-body">
{resultsArr.length > 200
? t("search:searchresults-max-count-label")
: t("search:searchresults-count-label", {
count: searchResultsObj["@odata.count"],
})}
.
{advancedSearch != true ? (
<>
<span>
{t(
"search:searchresults-case-count-label"
)}{" "}
{" "}
<em>&quot;{searchString}&quot;</em>
</span>
</>
) : (
""
)}
</p>
)}
{resultsArr.length > 0 ? (
ResultsView(resultsArr)
) : (
<div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds">
<h3>
{t("search:searchresults-no-records-label")}
</h3>
</div>
</div>
)}
</div>
</div>
{/* <LoadingOverlay
active={showSpinnerState}
spinner
text={t("common:spinner-searching")}
/> */}
</>
);
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentReference: (currentReference) => {
dispatch(setCurrentReference(currentReference));
},
setSearchResults: (searchResultsObj) => {
dispatch(setSearchResults(searchResultsObj));
},
setSearchDetails: (searchDetailsObj) => {
dispatch(setSearchDetails(searchDetailsObj));
},
setWatchedCases: (watchedCases) => {
dispatch(setWatchedCases(watchedCases));
},
setWatchedCasesDetails: (watchedCasesDetails) => {
dispatch(setWatchedCasesDetails(watchedCasesDetails));
},
};
};
export default connect(null, mapDispatchToProps)(SearchResults);