added fixes to reduce error when calling module details and filtering of docs

This commit is contained in:
2024-11-06 17:34:30 +00:00
parent cd918ef69c
commit d187907802
18 changed files with 1277 additions and 269 deletions
+479 -23
View File
@@ -30,6 +30,7 @@ const DocumentDetails = (props) => {
setDocumentDetails,
setCurrentPage,
docsOffline,
showFilteredDocs,
} = props;
const router = useRouter();
@@ -40,6 +41,53 @@ const DocumentDetails = (props) => {
const [selectedOption, setSelectedOption] = useState(10);
const [documentTypes, setDocumentTypes] = useState([{}]);
const [selectedDocumentType, setSelectedDocumentType] = useState("all");
const [selectAll, setSelectAll] = useState(false);
const [checkedItems, setCheckedItems] = useState(
documentTypes.reduce((acc, item) => {
acc[item.pinswg_isharedocumentlocations] = false;
return acc;
}, {})
);
const handleCheckboxChange = (e) => {
const { name, checked } = e.target;
setCheckedItems((prev) => ({
...prev,
[name]: checked,
}));
setSelectAll(false);
};
const handleSelectAllChange = (e) => {
const { checked } = e.target;
setSelectAll(checked); // Set the 'Select All' state
if (checked) {
// If 'Select All' is checked, check all the other checkboxes
setCheckedItems(
documentTypes.reduce((acc, item) => {
acc[item.pinswg_isharedocumentlocations] = true;
return acc;
}, {})
);
} else {
clearCheckboxes();
}
};
const clearCheckboxes = () => {
setSelectAll(false);
setCheckedItems(
documentTypes.reduce((acc, item) => {
acc[item.pinswg_isharedocumentlocations] = false;
return acc;
}, {}),
setSelectedDocumentType("all"),
setCurrentPage(1)
);
};
let ShowDocLinks = false;
let checkShowDocLinks = docsOffline != false ? true : false;
@@ -107,7 +155,7 @@ const DocumentDetails = (props) => {
id="showDocumentType"
name="showDocumentType"
>
<option value="all">
<option value="all" key="00">
{router.locale == "cy"
? jsonpath(
'$..[?(@.value=="All")].value_cy',
@@ -411,6 +459,416 @@ const DocumentDetails = (props) => {
);
};
const FilteredDocumentView = (documentDetailsArr) => {
documentDetailsArr = documentDetailsArr.value;
return (
<>
{ShowDocLinks && (
<div className="govuk-warning-text ">
<span
className="govuk-warning-text__icon"
aria-hidden="true"
>
!
</span>
<strong className="govuk-warning-text__text govuk-!-margin-top-2">
<span className="govuk-visually-hidden">
Notice
</span>
{t("case:documents-not-available-label")}
</strong>
</div>
)}
<div className="docFilteringGroup">
<div className="govuk-!-width-one-third">
{" "}
<div className="govuk-form-group filterByGroup">
<p>
{documentDetailsObj["@odata.count"] > 1
? t("case:documents-count-label-1")
: t("case:documents-count-label-1a")}{" "}
{documentDetailsObj["@odata.count"]}{" "}
{documentDetailsObj["@odata.count"] > 1
? t("case:documents-count-label-2")
: t("case:documents-count-label-2a")}
</p>
<div>
<button onClick={clearCheckboxes}>
Clear filter
</button>
</div>
<div className="govuk-checkboxes govuk-checkboxes--small">
{" "}
<>
<div className="govuk-checkboxes__item">
<input
className="govuk-checkboxes__input"
type="checkbox"
id={"all_" + "_" + 0}
key={0}
name={"all_" + "_" + 0}
checked={selectAll}
value={"all"}
onChange={handleSelectAllChange}
/>
<label
className="govuk-label-s govuk-checkboxes__label"
htmlFor={"all" + "__" + 0}
>
All - (
{documentTypes.reduce(
(accumulator, currentItem) => {
return (
accumulator +
currentItem.count
);
},
0
)}
)
</label>
</div>
</>
{documentTypes.map((item, key) => {
return (
<div
className="govuk-checkboxes__item"
key={key}
>
<input
className="govuk-checkboxes__input"
type="checkbox"
id={
item.pinswg_isharedocumentlocations
}
key={key}
value={
item.pinswg_isharedocumentlocations
}
name={
item.pinswg_isharedocumentlocations
}
checked={
checkedItems[
item
.pinswg_isharedocumentlocations
]
}
onChange={handleCheckboxChange}
/>
<label
className="govuk-label-s govuk-checkboxes__label"
htmlFor={
item.pinswg_isharedocumentlocations
}
>
{router.locale == "cy"
? jsonpath(
'$..[?(@.value=="' +
item.pinswg_isharedocumentlocationsLabel +
'")].value_cy',
transLookup
)
: item.pinswg_isharedocumentlocationsLabel ||
t(
"case:summary-no-date-entered-label"
)}{" "}
- ({item.count})
</label>
</div>
);
})}
</div>{" "}
<div>
<button
className="govuk-button "
type="button"
onClick={(e) => {
const data = [
...document.querySelectorAll(
".govuk-checkboxes__input:checked"
),
].map((e) => e.value);
setSelectedDocumentType(data);
setCurrentPage(1);
}}
>
Filter documents
</button>
</div>
{documentDetailsObj["@odata.count"] > 5 && (
<div
id="recordCountSelect"
className="govuk-grid-row govuk-!-margin-left-0"
>
<div className="govuk-form-group">
<label
className="govuk-label-s "
htmlFor="showNumberOfRecords"
>
{t(
"search:searchresults-show-records-label-a"
)}
<select
onChange={(e) => {
setSelectedOption(
e.target.value
);
setCurrentPage(1);
}}
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>
)}
</div>
</div>
<div className="govuk-!-width-two-thirds docResults">
{" "}
<dl className=" govuk-summary-list govuk-!-margin-bottom-9 results documentList">
<div className="govuk-summary-list__row results-headings">
<dd className="govuk-summary-list__key govuk-!-font-size-16 ">
<button
type="button"
onClick={() =>
sortDataBy("pinswg_name")
}
className={
orderByState == "pinswg_name"
? 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("case:documents-name-label")}
</button>
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-16">
{/* {t("case:documents-doc-type-label")} */}
<button
type="button"
onClick={() =>
sortDataBy(
"pinswg_isharedocumentlocations"
)
}
className={
orderByState ==
"pinswg_isharedocumentlocations"
? 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("case:documents-doc-type-label")}
</button>
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-16">
{/* {t("case:documents-date-published-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(
"case:documents-date-published-label"
)}
</button>
</dd>
{/* <dd className="govuk-summary-list__key govuk-!-font-size-16">
{t("case:documents-size-label")}
</dd> */}
</div>
{showSpinnerState == true ? (
<div className="govuk-summary-list__row">
<div className="govuk-!-margin-top-4 govuk-!-margin-bottom-4 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>
) : (
documentDetailsArr.map((item, key) => {
let detailsObj = jsonpath(
"$..[?(@._pinswg_documentids_value=='" +
incidentid +
"')]",
item
);
detailsObj = item;
return (
<div
className="govuk-summary-list__row"
key={key}
>
<dd className="govuk-summary-list__value govuk-!-font-size-16 ">
{showDownloadingState ===
key && (
<div className="coverLoadingLink downloading">
{/* <img
className="data-loading-icon"
src="/assets/images/loading.gif"
alt={
router.locale ==
"cy"
? "Nôl data"
: "Fetching data"
}
/> */}
</div>
)}
{!ShowDocLinks ? (
<Link
scroll={false}
href={
detailsObj.pinswg_hashlink
}
key={key}
onClick={() => {
toggleDownLoadLink(
key
),
sendGAEvent(
"event",
"DownloadedFile",
{
caseReference:
props.caseReference,
filename:
detailsObj.pinswg_name,
}
);
}}
>
<span className="results-visually-hidden">
{t(
"case:documents-name-label"
)}
:
</span>
{_.has(
detailsObj,
"pinswg_name"
)
? detailsObj.pinswg_name
: ""}
</Link>
) : (
<>
<span className="results-visually-hidden">
{t(
"case:documents-name-label"
)}
:
</span>
{_.has(
detailsObj,
"pinswg_name"
)
? detailsObj.pinswg_name
: ""}
</>
)}
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-16">
<span className="results-visually-hidden">
{t(
"case:documents-doc-type-label"
)}
:
</span>
{router.locale == "cy"
? jsonpath(
'$..[?(@.value=="' +
detailsObj[
"pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
] +
'")].value_cy',
transLookup
)
: detailsObj[
"pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
] ||
t(
"case:summary-no-date-entered-label"
)}
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-16">
<span className="results-visually-hidden">
{t(
"case:documents-date-published-label"
)}
:
</span>
{_.has(
detailsObj,
"pinswg_latestpublisheddate"
)
? formatDates(
detailsObj.pinswg_latestpublisheddate
)
: ""}
</dd>
{/* <dd className="govuk-summary-list__value govuk-!-font-size-16">
<span className="results-visually-hidden">
{t("case:documents-size-label")}:
</span>
92
</dd> */}
</div>
);
})
)}
</dl>
<PaginationControl
showNoOfRecords={selectedOption}
currentPage={currentPage}
searchResultsObj={documentDetailsObj}
spinnerState={spinnerState}
orderBy={orderByState}
fieldSort={fieldSortState}
getDocumentResults={getDocumentResults}
/>
</div>
</div>
</>
);
};
const getDocumentTypes = useCallback(() => {
getSearchDocumentTypes(props.incidentid).then((data) => {
setDocumentTypes(data);
@@ -563,30 +1021,28 @@ const DocumentDetails = (props) => {
getDocumentResults,
]);
return (
<>
<div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h2>{t("case:documents-heading-label")}</h2>
{_.isEmpty(documentDetailsObj.value) ? (
<div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds">
<h3>
{showDocumentSearchState == false
? t("case:documents-checking-label")
: t(
"case:documents-non-available-label"
)}
</h3>
</div>
</div>
) : (
DocumentView(documentDetailsArr)
)}
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h2 className="govuk-heading-m ">
{t("case:documents-heading-label")}
</h2>
{_.isEmpty(documentDetailsObj.value) ? (
<div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds">
<h3>
{showDocumentSearchState == false
? t("case:documents-checking-label")
: t("case:documents-non-available-label")}
</h3>
</div>
</div>
</div>
) : showFilteredDocs == "true" ? (
FilteredDocumentView(documentDetailsArr)
) : (
DocumentView(documentDetailsArr)
)}
</div>
</>
</div>
);
};
+74 -47
View File
@@ -6,6 +6,7 @@ import { useRouter } from "next/router";
import { useEffect } from "react";
import { connect } from "react-redux";
import transLookup from "../../data/lookuptranslations.json";
import Documents from "./documents";
import {
createWatchedCases,
@@ -80,6 +81,7 @@ const CaseSummary = (props) => {
showMap,
currentView,
messagesObj,
docsOffline,
} = props;
const showLoginCheck =
@@ -144,11 +146,11 @@ const CaseSummary = (props) => {
let setCaseQueryObj =
currentType == "directResultsObj"
? props.searchResultsObj.searchResultsObj
? props.searchResultsObj
: props[currentType];
let setCaseDetailsObj =
currentType == "directResultsObj"
? props.searchResultsObj.searchDetailsObj
? props.searchDetailsObj
: props[currentType + "Details"];
var casesObj = {};
@@ -212,7 +214,7 @@ const CaseSummary = (props) => {
let showDetailsBlock =
showDetails == true ? (
<div>
<>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
@@ -620,49 +622,54 @@ const CaseSummary = (props) => {
))}
{!session && (
<button
className="govuk-link watchCase"
onClick={() => {
confirm(
"Trying to watch case " +
props.currentView
.caseReference
.currentReference +
"\n\nYou will now be prompted to sign in"
) &&
// signIn("email", {
// callbackUrl:
// "/myportal/case/" +
// props
// .currentView
// .caseReference
// .ticketnumber,
// });
<>
<button
className="govuk-link watchCase"
onClick={() => {
confirm(
"Trying to watch case " +
props
.currentView
.caseReference
.currentReference +
"\n\nYou will now be prompted to sign in"
) &&
// signIn("email", {
// callbackUrl:
// "/myportal/case/" +
// props
// .currentView
// .caseReference
// .ticketnumber,
// });
setCookie(
null,
"pedwWatchCase",
currentType ==
"searchResultsObj"
? detailsObj.pinswg_name
: currentType ==
"directResultsObj"
? casesObj.title
: casesObj.reference,
{
path: "/",
expires:
expDate,
}
),
signIn();
}}
title={t(
"case:watch-this-case-link"
)}
>
{t("case:watch-this-case-link")}
</button>
setCookie(
null,
"pedwWatchCase",
currentType ==
"searchResultsObj"
? detailsObj.pinswg_name
: currentType ==
"directResultsObj"
? casesObj.title
: casesObj.reference,
{
path: "/",
expires:
expDate,
}
),
signIn();
}}
title={t(
"case:watch-this-case-link"
)}
>
{t(
"case:watch-this-case-link"
)}
</button>
</>
)}
</div>
</div>
@@ -698,7 +705,16 @@ const CaseSummary = (props) => {
)}
{showSummary(casesObj, detailsObj)}
</div>
<Documents
incidentid={props.incidentid}
caseReference={props.caseReference}
searchResultsObj={props.searchResultsObj}
searchDetailsObj={props.searchDetailsObj}
documentDetailsObj={props.documentDetailsObj}
docsOffline={docsOffline}
showFilteredDocs={props.showFilteredDocs}
/>
</>
) : (
<>
<div>
@@ -1182,7 +1198,18 @@ const CaseSummary = (props) => {
const mapStateToProps = (state) => {
return {
...state,
accountDetails: state.accountDetails,
currentView: state.currentView,
search: state.search,
// searchResultsObj: state.searchResultsObj,
documentDetailsObj: state.searchResultsObj.documentDetailsObj,
formData: state.formData,
appealType: state.appealType,
form: state.form,
myCases: state.myCases,
watchedCases: state.watchedCases,
myRepresentations: state.myRepresentations,
awaitingSubmission: state.awaitingSubmission,
};
};