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
+47 -13
View File
@@ -748,6 +748,38 @@ const Breadcrumbs = (props) => {
</li>
</>
)}
{router.pathname ==
"/myportal/dns/[developmentName]" && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={
router.locale != "en"
? router.locale + "/fymhorth"
: "/myportal"
}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
<Link
href={"/myportal/dnsapplications"}
className="govuk-breadcrumbs__link"
>
{t("dnsCommon:service-name")}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
{t("common:breadcrumb-case-reference")}:{" "}
{
props.props.currentView.caseReference
.currentReference
}
</li>
</>
)}
{router.pathname == "/case" && (
<>
<li className="govuk-breadcrumbs__list-item">
@@ -909,14 +941,23 @@ const Breadcrumbs = (props) => {
</li>
</>
)}
{router.pathname == "/dns/[developmentName]" && (
{router.pathname == "/dnsapplications" && (
<>
<li className="govuk-breadcrumbs__list-item">
{t("dnsCommon:service-name")}
</li>
</>
)}
{router.pathname == "/dnsdetails" && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={
router.locale == "en"
? router.locale + "/../../dns"
: "/../../dns"
router.locale != "en"
? router.locale +
"/dnsapplications"
: "/dnsapplications"
}
className="govuk-breadcrumbs__link"
>
@@ -932,19 +973,12 @@ const Breadcrumbs = (props) => {
</li>
</>
)}
{router.pathname == "/dnsapplications" && (
<>
<li className="govuk-breadcrumbs__list-item">
{t("dnsCommon:service-name")}
</li>
</>
)}
{router.pathname == "/dnsdetails" && (
{router.pathname == "/dns/[developmentName]" && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={
router.locale == "en"
router.locale != "en"
? router.locale +
"/dnsapplications"
: "/dnsapplications"
+3 -8
View File
@@ -34,17 +34,12 @@ const Case = (props) => {
searchDetailsObj={props.searchDetailsObj}
searchString={props.searchString}
incidentid={props.incidentid}
showMap={props.showMap}
showMap={props.showMaps}
currentView={props.currentView}
messagesObj={props.messagesObj}
/>
<Documents
incidentid={props.incidentid}
caseReference={props.caseReference}
searchResultsObj={props.searchResultsObj}
searchDetailsObj={props.searchDetailsObj}
documentDetailsObj={props.documentDetailsObj}
docsOffline={props.props.docsOffline}
documentDetailsObj={props.documentDetailsObj}
showFilteredDocs={props.showFilteredDocs}
/>
{showRepresentations == true && (
<RepresentationList
+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,
};
};
+8 -8
View File
@@ -310,14 +310,14 @@ const DNSSearchResults = (props) => {
<Link
href={
router.locale == "cy"
? (myportal == true
? "/fymhorth"
: "") +
"/manyliondns"
: (myportal == true
? "/myportal"
: "") +
"/dnsdetails"
? myportal == true
? "/fymhorth/dns"
: "/dns"
: myportal == true
? "/myportal/dns/" +
item.ticketnumber
: "/dns/" +
item.ticketnumber
}
className="govuk-link--no-underline"
onClick={() => {
+10 -7
View File
@@ -242,7 +242,8 @@ const SearchResults = (props) => {
'")]',
searchDetailsObj
);
detailsObj = detailsObj[0];
detailsObj = detailsObj[0] || {};
return (
<div
className="govuk-summary-list__row"
@@ -285,12 +286,14 @@ const SearchResults = (props) => {
"showLoginCheck":
props.showLoginCheck,
"specialistProcess":
detailsObj.pinswg_speacialistcaseprocess !=
null ||
detailsObj.pinswg_specialistcaseprocess !=
null
? detailsObj.pinswg_speacialistcaseprocess ||
detailsObj.pinswg_specialistcaseprocess
detailsObj.hasOwnProperty(
"pinswg_speacialistcaseprocess"
)
? detailsObj.pinswg_speacialistcaseprocess
: detailsObj.hasOwnProperty(
"pinswg_specialistcaseprocess"
)
? detailsObj.pinswg_specialistcaseprocess
: "",
});
}}