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

Merged PR 781: added fetching data when pagination

Browse Source 
Related work items: #7401
This commit is contained in:
Robert Bond
2022-01-31 12:10:44 +00:00
parent 7841ec0cf1 a22ca31c17
commit 8537793b7e
17 changed files with 639 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files
actions/selectQueryTypes.js
+1 -1
View File
@@ -19,7 +19,7 @@ export const getSelectQuery = (appealTypeName) => {
case "pinswg_compulsorypurchaseorderses":
return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_relevantauthorityname,pinswg_startdate,statuscode";
case "pinswg_dnses":
return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_addressline1,pinswg_addressline2,pinswg_postcode,pinswg_addresstown,_pinswg_associatedlpa_value,pinswg_addresscounty,pinswg_applicationacceptedasvalid,pinswg_applicationrejectedasinvalid,pinswg_choiceofprocedure,pinswg_confirmrequesttovaryapplication,pinswg_dateeventrequested,pinswg_dateofdecision,pinswg_dateofrequesttovarytheapplication,pinswg_dateofsubmissionofapplication,pinswg_dateprojectpublishedonwebsite,pinswg_deadlineforsubmissionofapplication,pinswg_decision,pinswg_endofrepresentationperiod,pinswg_inspectorreportsubmittedtowelshgovernment,pinswg_procedureconfirmed,pinswg_projectdescription,pinswg_projectdescription,pinswg_projectlocation,pinswg_projectlocation,pinswg_recommendation,pinswg_rejectrequesttovaryapplication,pinswg_reportdueby,pinswg_suspensiondates,pinswg_suspensionenddates,pinswg_suspensionstartdates,pinswg_validnoticeofintentiontosubmitanapplicati,pinswg_webaddress,pinswg_withdrawndate,pinswg_writtenacceptanceofnotification,statuscode";
return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_addressline1,pinswg_addressline2,pinswg_postcode,pinswg_addresstown,_pinswg_associatedlpa_value,pinswg_addresscounty,pinswg_applicationacceptedasvalid,pinswg_applicationrejectedasinvalid,pinswg_choiceofprocedure,pinswg_confirmrequesttovaryapplication,pinswg_dateeventrequested,pinswg_dateofdecision,pinswg_dateofrequesttovarytheapplication,pinswg_dateofsubmissionofapplication,pinswg_dateprojectpublishedonwebsite,pinswg_deadlineforsubmissionofapplication,pinswg_decision,pinswg_endofrepresentationperiod,pinswg_inspectorreportsubmittedtowelshgovernment,pinswg_procedureconfirmed,pinswg_projectdescription,pinswg_projectdescription,pinswg_projectlocation,pinswg_projectlocation,pinswg_recommendation,pinswg_rejectrequesttovaryapplication,pinswg_reportdueby,pinswg_suspensiondates,pinswg_suspensionenddates,pinswg_suspensionstartdates,pinswg_validnoticeofintentiontosubmitanapplicati,pinswg_webaddress,pinswg_withdrawndate,pinswg_writtenacceptanceofnotification,statuscode,pinswg_casestage";
case "pinswg_electricityacts":
return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_addressline1,pinswg_addressline2,pinswg_postcode,pinswg_addresstown,_pinswg_associatedlpa_value,pinswg_applicationacceptedasvalid,pinswg_applicationrejectedasinvalid,pinswg_confirmrequesttovaryapplication,pinswg_dateeventrequested,pinswg_dateofrequesttovarytheapplication,pinswg_dateofsubmissionofapplication,pinswg_dateprojectpublishedonwebsite,pinswg_deadlineforsubmissionofapplication,pinswg_decision,pinswg_endofrepresentationperiod,pinswg_inspectorreportsubmittedtowelshgovernment,pinswg_procedureconfirmed,pinswg_projectlocation,pinswg_recommendation,pinswg_rejectrequesttovaryapplication,pinswg_reportdueby,pinswg_suspensiondates,pinswg_validnoticeofintentiontosubmitanapplicati,pinswg_webaddress,pinswg_withdrawndate,pinswg_writtenacceptanceofnotification,statuscode";
case "pinswg_householderappealhases":
components/case/documents.js
+34 -21
View File
@@ -75,8 +75,23 @@ const DocumentDetails = (props) => {
{t("case:documents-size-label")}
</dd> */}
</div>
{documentDetailsArr.map((item) => {
{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) => {
let detailsObj = jsonpath.query(
item,
"$..[?(@._pinswg_documentids_value=='" +
@@ -86,7 +101,8 @@ const DocumentDetails = (props) => {
detailsObj = item;
if (typeof detailsObj != "undefined") {
var documentHistoryArr = documentHistoryObj || [];
var documentHistoryArr =
documentHistoryObj || [];
return documentHistoryArr.map(
(historyItem, key) => {
let historyObj = jsonpath.query(
@@ -158,9 +174,9 @@ const DocumentDetails = (props) => {
{_.has(historyObj, [
"pinswg_publisheddate@OData.Community.Display.V1.FormattedValue",
])
? historyObj[
"pinswg_publisheddate@OData.Community.Display.V1.FormattedValue"
]
? formatDates(
historyObj.pinswg_publisheddate
)
: ""}
</dd>
{/* <dd className="govuk-summary-list__value govuk-!-font-size-16">
@@ -176,12 +192,13 @@ const DocumentDetails = (props) => {
}
);
}
})}
})
)}
</dl>
<PaginationControl
currentPage={currentPage}
searchResultsObj={documentDetailsObj}
// spinnerState={spinnerState}
spinnerState={spinnerState}
getDocumentResults={getDocumentResults}
/>
</>
@@ -201,7 +218,6 @@ const DocumentDetails = (props) => {
(result) => {
setDocumentHistory(result);
setDocumentSearchState(true);
return result;
}
);
@@ -236,16 +252,13 @@ const DocumentDetails = (props) => {
const getDocumentResults = (pageNumber) => {
getSearchDocumentDetailsPaged(incidentid, pageNumber)
.then((data) => {
//console.log(data);
setDocumentDetails(data);
return data;
})
.then((data) => data)
.then((data) => {
//console.log("getting details", data);
setDocumentDetails(data);
return getDocumentHistory(data.value).then((data) => {
setDocumentHistory(data);
//setShowSpinnerState(false);
setShowSpinnerState(false);
});
});
};
@@ -323,13 +336,13 @@ const DocumentDetails = (props) => {
)
: pagesCount;
//const [showSpinnerState, setShowSpinnerState] = useState(false);
const [showSpinnerState, setShowSpinnerState] = useState(false);
// let spinnerState = () => {
// showSpinnerState == true
// ? setShowSpinnerState(false)
// : setShowSpinnerState(true);
// };
let spinnerState = () => {
showSpinnerState == true
? setShowSpinnerState(false)
: setShowSpinnerState(true);
};
const [showDocumentSearchState, setDocumentSearchState] = useState(false);
components/case/pagination.js
+3 -3
View File
@@ -81,7 +81,7 @@ const PaginationControl = (props) => {
<span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
onClick={() => {
// spinnerState(),
spinnerState(),
getDocumentResults(currentPage - 1);
}}
>
@@ -114,7 +114,7 @@ const PaginationControl = (props) => {
className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
key={i}
onClick={() => {
// spinnerState();
spinnerState();
console.log(i + 1);
getDocumentResults(i + 1);
}}
@@ -129,7 +129,7 @@ const PaginationControl = (props) => {
<span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
onClick={() => {
// spinnerState(),
spinnerState(),
getDocumentResults(currentPage + 1);
}}
>
components/case/summary.js
+24
View File
@@ -227,6 +227,30 @@ const CaseSummary = (props) => {
</dd>
</div>
)}
{detailsObj.pinswg_casestage != null && (
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{t("case:summary-case-stage-label")}
</dt>
<dd className="govuk-summary-list__value">
{router.locale == "cy"
? jsonpath.query(
transLookup,
'$..[?(@.value=="' +
detailsObj[
"pinswg_casestage@OData.Community.Display.V1.FormattedValue"
] +
'")].value_cy'
)
: detailsObj[
"pinswg_casestage@OData.Community.Display.V1.FormattedValue"
] ||
t(
"case:summary-no-date-entered-label"
)}
</dd>
</div>
)}
</dl>
</div>
</div>
components/search/dnssearchresults.js
+28 -12
View File
@@ -38,13 +38,13 @@ const DNSSearchResults = (props) => {
var resultsArr = searchResultsObj.value || [];
//const [showSpinnerState, setShowSpinnerState] = useState(false);
const [showSpinnerState, setShowSpinnerState] = useState(false);
// let spinnerState = () => {
// showSpinnerState == true
// ? setShowSpinnerState(false)
// : setShowSpinnerState(true);
// };
let spinnerState = () => {
showSpinnerState == true
? setShowSpinnerState(false)
: setShowSpinnerState(true);
};
const ResultsView = (resultsArr) => {
return (
@@ -70,7 +70,23 @@ const DNSSearchResults = (props) => {
</dd>
</div>
{resultsArr.map((item, key) => {
{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=='" +
@@ -221,12 +237,13 @@ const DNSSearchResults = (props) => {
</dd>
</div>
);
})}
})
)}
</dl>
<PaginationControl
currentPage={currentPage}
searchResultsObj={searchResultsObj}
// spinnerState={spinnerState}
spinnerState={spinnerState}
getSearchPageResults={getSearchPageResults}
/>
</div>
@@ -260,14 +277,13 @@ const DNSSearchResults = (props) => {
getBasicDNSSearchPaged(pageNumber)
.then((data) => {
setSearchResults(data);
return data;
})
.then((data) => {
//console.log("getting details", data);
setSearchResults(data);
return getSearchDetailsPaged(data).then((data) => {
setSearchDetails(data);
//setShowSpinnerState(false);
setShowSpinnerState(false);
});
});
};
components/search/pagination.js
+4 -4
View File
@@ -7,7 +7,7 @@ const PaginationControl = (props) => {
searchString,
searchResultsObj,
currentPage,
// spinnerState,
spinnerState,
getSearchPageResults,
} = props;
let { t } = useTranslation();
@@ -81,7 +81,7 @@ const PaginationControl = (props) => {
<span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
onClick={() => {
// spinnerState(),
spinnerState(),
getSearchPageResults(currentPage - 1);
}}
>
@@ -114,7 +114,7 @@ const PaginationControl = (props) => {
className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
key={i}
onClick={() => {
// spinnerState();
spinnerState();
console.log(i + 1);
getSearchPageResults(i + 1);
}}
@@ -129,7 +129,7 @@ const PaginationControl = (props) => {
<span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
onClick={() => {
// spinnerState(),
spinnerState(),
getSearchPageResults(currentPage + 1);
}}
>
components/search/searchresults.js
+49 -23
View File
@@ -66,13 +66,13 @@ const SearchResults = (props) => {
var resultsArr = searchResultsObj.value || [];
// const [showSpinnerState, setShowSpinnerState] = useState(false);
const [showSpinnerState, setShowSpinnerState] = useState(false);
// let spinnerState = () => {
// showSpinnerState == true
// ? setShowSpinnerState(false)
// : setShowSpinnerState(true);
// };
let spinnerState = () => {
showSpinnerState == true
? setShowSpinnerState(false)
: setShowSpinnerState(true);
};
const cookies = parseCookies();
@@ -178,15 +178,35 @@ const SearchResults = (props) => {
<dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action"></dd>
)}
</div>
{resultsArr.map((item, key) => {
{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 + "')]"
"$..value[?(@.pinswg_name=='" +
item.title +
"')]"
);
detailsObj = detailsObj[0];
return (
<div className="govuk-summary-list__row" key={key}>
<div
className="govuk-summary-list__row"
key={key}
>
<dd className="govuk-summary-list__value govuk-!-font-size-16 ">
<Link
href={
@@ -261,7 +281,10 @@ const SearchResults = (props) => {
) &&
detailsObj.pinswg_siteaddressline2 !=
null && <br />}
{_.has(detailsObj, "pinswg_siteaddresstown")
{_.has(
detailsObj,
"pinswg_siteaddresstown"
)
? detailsObj.pinswg_siteaddresstown
: ""}
{_.has(
@@ -351,7 +374,9 @@ const SearchResults = (props) => {
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-16">
<span className="results-visually-hidden">
{t("search:searchresults-status-label")}
{t(
"search:searchresults-status-label"
)}
:
</span>
@@ -370,7 +395,8 @@ const SearchResults = (props) => {
</dd>
{myportal == true && (
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-summary-list__action">
{isWatchedCase(item.incidentid).length >
{isWatchedCase(item.incidentid)
.length >
0 ==
true ? (
<span
@@ -379,7 +405,8 @@ const SearchResults = (props) => {
deleteItem(
isWatchedCase(
item.incidentid
)[0].pinswg_watchlistid,
)[0]
.pinswg_watchlistid,
"watchedCases"
);
@@ -415,12 +442,14 @@ const SearchResults = (props) => {
)}
</div>
);
})}
})
)}
</dl>
<PaginationControl
currentPage={currentPage}
searchResultsObj={searchResultsObj}
// spinnerState={spinnerState}
spinnerState={spinnerState}
getSearchPageResults={getSearchPageResults}
/>
</>
@@ -457,16 +486,13 @@ const SearchResults = (props) => {
);
getAdvancedSearchPaged(searchoObj, pageNumber)
.then((data) => {
//console.log(data);
setSearchResults(data);
return data;
})
.then((data) => data)
.then((data) => {
//console.log("getting details", data);
setSearchResults(data);
return getSearchDetailsPaged(data).then((data) => {
setSearchDetails(data);
//setShowSpinnerState(false);
setShowSpinnerState(false);
});
});
} else {
@@ -480,7 +506,7 @@ const SearchResults = (props) => {
//console.log("getting details", data);
return getSearchDetailsPaged(data).then((data) => {
setSearchDetails(data);
//setShowSpinnerState(false);
setShowSpinnerState(false);
});
});
}
data/lookuptranslations.json
+42
View File
@@ -499,5 +499,47 @@
"value_cy": "Penderfyniad / Adroddiad Terfyno",
"pinswg_isharedocumentlocations": 0
}
],
"pinswg_casestage": [
{
"value": "Pre-Application",
"value_cy": "Cyn Ymgeisio",
"pinswg_decision": 846040000
},
{
"value": "Acceptance",
"value_cy": "Derbyn",
"pinswg_decision": 846040001
},
{
"value": "Pre-Examiniation",
"value_cy": "Rhag-Arholiad",
"pinswg_decision": 846040001
},
{
"value": "Examination",
"value_cy": "Arholiad",
"pinswg_decision": 846040003
},
{
"value": "Recommendation",
"value_cy": "Argymhelliad",
"pinswg_decision": 846040004
},
{
"value": "Decision",
"value_cy": "Penderfyniad",
"pinswg_decision": 846040005
},
{
"value": "Post Decision",
"value_cy": "Wedi Penderfyniad",
"pinswg_decision": 846040006
},
{
"value": "Withdrawn",
"value_cy": "Tynnwyd yn ôl",
"pinswg_decision": 846040007
}
]
}
locales/cy/case.json
+1
View File
@@ -6,6 +6,7 @@
"summary-agent-label": "Asiant",
"summary-site-address-label": "Cyfeiriad y Safle",
"summary-description-label": "Disgrifiad",
"summary-case-stage-label": "Cam achos",
"summary-make-representation-label": "Cyflwyno cynrychiolaeth",
"summary-back-button-label": "Ewch yn ôl",
"summary-case-details-label": "Manylion yr Achos",
locales/cy/common.json
+1
View File
@@ -46,6 +46,7 @@
"breadcrumb-case-reference": "Cyfeirnod Achos",
"spinner-loading": "Llwytho...",
"spinner-searching": "Chwilio...",
"spinner-fetching-data": "Nôl data",
"logged-out-title": "Rydych chi wedi allgofnodi",
"logged-out-link": "Dychwelwch i'r porth Gwaith Achos Cynllunio",
"404-not-found-title": "404 - heb ei ddarganfod",
locales/en/case.json
+1
View File
@@ -6,6 +6,7 @@
"summary-agent-label": "Agent",
"summary-site-address-label": "Site Address",
"summary-description-label": "Description",
"summary-case-stage-label": "Case stage",
"summary-make-representation-label": "Make representation",
"summary-back-button-label": "Go back",
"summary-case-details-label": "Case Details",
locales/en/common.json
+1
View File
@@ -46,6 +46,7 @@
"breadcrumb-case-reference": "Case Reference",
"spinner-loading": "Loading...",
"spinner-searching": "Searching...",
"spinner-fetching-data": "Fetching data",
"logged-out-title": "You have been logged out",
"logged-out-link": "Return to Planning Casework portal",
"404-not-found-title": "404 - not found",
pages/api/documents/download/[id].js
+2
View File
@@ -58,6 +58,8 @@ export default async function ApiProxy(req, res) {
};
};
console.log(WEBAPI_URL + queryUrl);
return axios
.get(
WEBAPI_URL + queryUrl, // + hashAPIPath(queryUrl),
pages/api/endpoint/getbasicsearchdetails_api.js
+1 -1
View File
@@ -34,7 +34,7 @@ export default async function ApiProxy(req, res) {
queryUrl = queryUrl + getSelectQuery(appealTypeName);
//console.log("query: ", queryUrl, "<<<<end query");
console.log("query: ", queryUrl, "<<<<end query");
return axios
.get(
pages/myportal/advancedsearchresults.js
+2
View File
@@ -20,6 +20,7 @@ import {
setSearchDetails,
setSearchResults,
} from "../../store/searchOutput/action";
import { setSearch } from "../../store/search/action";
import { wrapper } from "../../store/store";
import {
setWatchedCases,
@@ -88,6 +89,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
store.dispatch(setSearchDetails(searchDetailsObj));
store.dispatch(setWatchedCases(watchedCases));
store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
store.dispatch(setSearch(Object.entries(query)));
}
);
public/assets/images/loading.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

styles/sass/welshgov/_application.scss
+6
View File
@@ -1824,3 +1824,9 @@ fade {
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
.data-loading-icon {
position: relative;
top: 10px;
left: 10px;
}