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

added fetching data notice on pagination

Browse Source
This commit is contained in:
robbond
2022-01-31 11:47:41 +00:00
parent 7841ec0cf1
commit a549687c8f
11 changed files with 569 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/case/documents.js
+34 -21
View File
@@ -75,8 +75,23 @@ const DocumentDetails = (props) => {
{t("case:documents-size-label")} {t("case:documents-size-label")}
</dd> */} </dd> */}
</div> </div>
{showSpinnerState == true ? (
{documentDetailsArr.map((item) => { <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( let detailsObj = jsonpath.query(
item, item,
"$..[?(@._pinswg_documentids_value=='" + "$..[?(@._pinswg_documentids_value=='" +
@@ -86,7 +101,8 @@ const DocumentDetails = (props) => {
detailsObj = item; detailsObj = item;
if (typeof detailsObj != "undefined") { if (typeof detailsObj != "undefined") {
var documentHistoryArr = documentHistoryObj || []; var documentHistoryArr =
documentHistoryObj || [];
return documentHistoryArr.map( return documentHistoryArr.map(
(historyItem, key) => { (historyItem, key) => {
let historyObj = jsonpath.query( let historyObj = jsonpath.query(
@@ -158,9 +174,9 @@ const DocumentDetails = (props) => {
{_.has(historyObj, [ {_.has(historyObj, [
"pinswg_publisheddate@OData.Community.Display.V1.FormattedValue", "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue",
]) ])
? historyObj[ ? formatDates(
"pinswg_publisheddate@OData.Community.Display.V1.FormattedValue" historyObj.pinswg_publisheddate
] )
: ""} : ""}
</dd> </dd>
{/* <dd className="govuk-summary-list__value govuk-!-font-size-16"> {/* <dd className="govuk-summary-list__value govuk-!-font-size-16">
@@ -176,12 +192,13 @@ const DocumentDetails = (props) => {
} }
); );
} }
})} })
)}
</dl> </dl>
<PaginationControl <PaginationControl
currentPage={currentPage} currentPage={currentPage}
searchResultsObj={documentDetailsObj} searchResultsObj={documentDetailsObj}
// spinnerState={spinnerState} spinnerState={spinnerState}
getDocumentResults={getDocumentResults} getDocumentResults={getDocumentResults}
/> />
</> </>
@@ -201,7 +218,6 @@ const DocumentDetails = (props) => {
(result) => { (result) => {
setDocumentHistory(result); setDocumentHistory(result);
setDocumentSearchState(true); setDocumentSearchState(true);
return result; return result;
} }
); );
@@ -236,16 +252,13 @@ const DocumentDetails = (props) => {
const getDocumentResults = (pageNumber) => { const getDocumentResults = (pageNumber) => {
getSearchDocumentDetailsPaged(incidentid, pageNumber) getSearchDocumentDetailsPaged(incidentid, pageNumber)
.then((data) => { .then((data) => data)
//console.log(data);
setDocumentDetails(data);
return data;
})
.then((data) => { .then((data) => {
//console.log("getting details", data); //console.log("getting details", data);
setDocumentDetails(data);
return getDocumentHistory(data.value).then((data) => { return getDocumentHistory(data.value).then((data) => {
setDocumentHistory(data); setDocumentHistory(data);
//setShowSpinnerState(false); setShowSpinnerState(false);
}); });
}); });
}; };
@@ -323,13 +336,13 @@ const DocumentDetails = (props) => {
) )
: pagesCount; : pagesCount;
//const [showSpinnerState, setShowSpinnerState] = useState(false); const [showSpinnerState, setShowSpinnerState] = useState(false);
// let spinnerState = () => { let spinnerState = () => {
// showSpinnerState == true showSpinnerState == true
// ? setShowSpinnerState(false) ? setShowSpinnerState(false)
// : setShowSpinnerState(true); : setShowSpinnerState(true);
// }; };
const [showDocumentSearchState, setDocumentSearchState] = useState(false); const [showDocumentSearchState, setDocumentSearchState] = useState(false);
components/case/pagination.js
+3 -3
View File
@@ -81,7 +81,7 @@ const PaginationControl = (props) => {
<span <span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton" className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
onClick={() => { onClick={() => {
// spinnerState(), spinnerState(),
getDocumentResults(currentPage - 1); 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" className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
key={i} key={i}
onClick={() => { onClick={() => {
// spinnerState(); spinnerState();
console.log(i + 1); console.log(i + 1);
getDocumentResults(i + 1); getDocumentResults(i + 1);
}} }}
@@ -129,7 +129,7 @@ const PaginationControl = (props) => {
<span <span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton" className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
onClick={() => { onClick={() => {
// spinnerState(), spinnerState(),
getDocumentResults(currentPage + 1); getDocumentResults(currentPage + 1);
}} }}
> >
components/search/dnssearchresults.js
+28 -12
View File
@@ -38,13 +38,13 @@ const DNSSearchResults = (props) => {
var resultsArr = searchResultsObj.value || []; var resultsArr = searchResultsObj.value || [];
//const [showSpinnerState, setShowSpinnerState] = useState(false); const [showSpinnerState, setShowSpinnerState] = useState(false);
// let spinnerState = () => { let spinnerState = () => {
// showSpinnerState == true showSpinnerState == true
// ? setShowSpinnerState(false) ? setShowSpinnerState(false)
// : setShowSpinnerState(true); : setShowSpinnerState(true);
// }; };
const ResultsView = (resultsArr) => { const ResultsView = (resultsArr) => {
return ( return (
@@ -70,7 +70,23 @@ const DNSSearchResults = (props) => {
</dd> </dd>
</div> </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( let detailsObj = jsonpath.query(
searchDetailsObj, searchDetailsObj,
"$..value[?(@.pinswg_name=='" + "$..value[?(@.pinswg_name=='" +
@@ -221,12 +237,13 @@ const DNSSearchResults = (props) => {
</dd> </dd>
</div> </div>
); );
})} })
)}
</dl> </dl>
<PaginationControl <PaginationControl
currentPage={currentPage} currentPage={currentPage}
searchResultsObj={searchResultsObj} searchResultsObj={searchResultsObj}
// spinnerState={spinnerState} spinnerState={spinnerState}
getSearchPageResults={getSearchPageResults} getSearchPageResults={getSearchPageResults}
/> />
</div> </div>
@@ -260,14 +277,13 @@ const DNSSearchResults = (props) => {
getBasicDNSSearchPaged(pageNumber) getBasicDNSSearchPaged(pageNumber)
.then((data) => { .then((data) => {
setSearchResults(data);
return data; return data;
}) })
.then((data) => { .then((data) => {
//console.log("getting details", data); setSearchResults(data);
return getSearchDetailsPaged(data).then((data) => { return getSearchDetailsPaged(data).then((data) => {
setSearchDetails(data); setSearchDetails(data);
//setShowSpinnerState(false); setShowSpinnerState(false);
}); });
}); });
}; };
components/search/pagination.js
+4 -4
View File
@@ -7,7 +7,7 @@ const PaginationControl = (props) => {
searchString, searchString,
searchResultsObj, searchResultsObj,
currentPage, currentPage,
// spinnerState, spinnerState,
getSearchPageResults, getSearchPageResults,
} = props; } = props;
let { t } = useTranslation(); let { t } = useTranslation();
@@ -81,7 +81,7 @@ const PaginationControl = (props) => {
<span <span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton" className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
onClick={() => { onClick={() => {
// spinnerState(), spinnerState(),
getSearchPageResults(currentPage - 1); 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" className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
key={i} key={i}
onClick={() => { onClick={() => {
// spinnerState(); spinnerState();
console.log(i + 1); console.log(i + 1);
getSearchPageResults(i + 1); getSearchPageResults(i + 1);
}} }}
@@ -129,7 +129,7 @@ const PaginationControl = (props) => {
<span <span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton" className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
onClick={() => { onClick={() => {
// spinnerState(), spinnerState(),
getSearchPageResults(currentPage + 1); getSearchPageResults(currentPage + 1);
}} }}
> >
components/search/searchresults.js
+49 -23
View File
@@ -66,13 +66,13 @@ const SearchResults = (props) => {
var resultsArr = searchResultsObj.value || []; var resultsArr = searchResultsObj.value || [];
// const [showSpinnerState, setShowSpinnerState] = useState(false); const [showSpinnerState, setShowSpinnerState] = useState(false);
// let spinnerState = () => { let spinnerState = () => {
// showSpinnerState == true showSpinnerState == true
// ? setShowSpinnerState(false) ? setShowSpinnerState(false)
// : setShowSpinnerState(true); : setShowSpinnerState(true);
// }; };
const cookies = parseCookies(); 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> <dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action"></dd>
)} )}
</div> </div>
{showSpinnerState == true ? (
{resultsArr.map((item, key) => { <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( let detailsObj = jsonpath.query(
searchDetailsObj, searchDetailsObj,
"$..value[?(@.pinswg_name=='" + item.title + "')]" "$..value[?(@.pinswg_name=='" +
item.title +
"')]"
); );
detailsObj = detailsObj[0]; detailsObj = detailsObj[0];
return ( 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 "> <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
<Link <Link
href={ href={
@@ -261,7 +281,10 @@ const SearchResults = (props) => {
) && ) &&
detailsObj.pinswg_siteaddressline2 != detailsObj.pinswg_siteaddressline2 !=
null && <br />} null && <br />}
{_.has(detailsObj, "pinswg_siteaddresstown") {_.has(
detailsObj,
"pinswg_siteaddresstown"
)
? detailsObj.pinswg_siteaddresstown ? detailsObj.pinswg_siteaddresstown
: ""} : ""}
{_.has( {_.has(
@@ -351,7 +374,9 @@ const SearchResults = (props) => {
</dd> </dd>
<dd className="govuk-summary-list__value govuk-!-font-size-16"> <dd className="govuk-summary-list__value govuk-!-font-size-16">
<span className="results-visually-hidden"> <span className="results-visually-hidden">
{t("search:searchresults-status-label")} {t(
"search:searchresults-status-label"
)}
: :
</span> </span>
@@ -370,7 +395,8 @@ const SearchResults = (props) => {
</dd> </dd>
{myportal == true && ( {myportal == true && (
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-summary-list__action"> <dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-summary-list__action">
{isWatchedCase(item.incidentid).length > {isWatchedCase(item.incidentid)
.length >
0 == 0 ==
true ? ( true ? (
<span <span
@@ -379,7 +405,8 @@ const SearchResults = (props) => {
deleteItem( deleteItem(
isWatchedCase( isWatchedCase(
item.incidentid item.incidentid
)[0].pinswg_watchlistid, )[0]
.pinswg_watchlistid,
"watchedCases" "watchedCases"
); );
@@ -415,12 +442,14 @@ const SearchResults = (props) => {
)} )}
</div> </div>
); );
})} })
)}
</dl> </dl>
<PaginationControl <PaginationControl
currentPage={currentPage} currentPage={currentPage}
searchResultsObj={searchResultsObj} searchResultsObj={searchResultsObj}
// spinnerState={spinnerState} spinnerState={spinnerState}
getSearchPageResults={getSearchPageResults} getSearchPageResults={getSearchPageResults}
/> />
</> </>
@@ -457,16 +486,13 @@ const SearchResults = (props) => {
); );
getAdvancedSearchPaged(searchoObj, pageNumber) getAdvancedSearchPaged(searchoObj, pageNumber)
.then((data) => { .then((data) => data)
//console.log(data);
setSearchResults(data);
return data;
})
.then((data) => { .then((data) => {
//console.log("getting details", data); //console.log("getting details", data);
setSearchResults(data);
return getSearchDetailsPaged(data).then((data) => { return getSearchDetailsPaged(data).then((data) => {
setSearchDetails(data); setSearchDetails(data);
//setShowSpinnerState(false); setShowSpinnerState(false);
}); });
}); });
} else { } else {
@@ -480,7 +506,7 @@ const SearchResults = (props) => {
//console.log("getting details", data); //console.log("getting details", data);
return getSearchDetailsPaged(data).then((data) => { return getSearchDetailsPaged(data).then((data) => {
setSearchDetails(data); setSearchDetails(data);
//setShowSpinnerState(false); setShowSpinnerState(false);
}); });
}); });
} }
locales/cy/common.json
+1
View File
@@ -46,6 +46,7 @@
"breadcrumb-case-reference": "Cyfeirnod Achos", "breadcrumb-case-reference": "Cyfeirnod Achos",
"spinner-loading": "Llwytho...", "spinner-loading": "Llwytho...",
"spinner-searching": "Chwilio...", "spinner-searching": "Chwilio...",
"spinner-fetching-data": "Nôl data",
"logged-out-title": "Rydych chi wedi allgofnodi", "logged-out-title": "Rydych chi wedi allgofnodi",
"logged-out-link": "Dychwelwch i'r porth Gwaith Achos Cynllunio", "logged-out-link": "Dychwelwch i'r porth Gwaith Achos Cynllunio",
"404-not-found-title": "404 - heb ei ddarganfod", "404-not-found-title": "404 - heb ei ddarganfod",
locales/en/common.json
+1
View File
@@ -46,6 +46,7 @@
"breadcrumb-case-reference": "Case Reference", "breadcrumb-case-reference": "Case Reference",
"spinner-loading": "Loading...", "spinner-loading": "Loading...",
"spinner-searching": "Searching...", "spinner-searching": "Searching...",
"spinner-fetching-data": "Fetching data",
"logged-out-title": "You have been logged out", "logged-out-title": "You have been logged out",
"logged-out-link": "Return to Planning Casework portal", "logged-out-link": "Return to Planning Casework portal",
"404-not-found-title": "404 - not found", "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 return axios
.get( .get(
WEBAPI_URL + queryUrl, // + hashAPIPath(queryUrl), WEBAPI_URL + queryUrl, // + hashAPIPath(queryUrl),
pages/myportal/advancedsearchresults.js
+2
View File
@@ -20,6 +20,7 @@ import {
setSearchDetails, setSearchDetails,
setSearchResults, setSearchResults,
} from "../../store/searchOutput/action"; } from "../../store/searchOutput/action";
import { setSearch } from "../../store/search/action";
import { wrapper } from "../../store/store"; import { wrapper } from "../../store/store";
import { import {
setWatchedCases, setWatchedCases,
@@ -88,6 +89,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
store.dispatch(setSearchDetails(searchDetailsObj)); store.dispatch(setSearchDetails(searchDetailsObj));
store.dispatch(setWatchedCases(watchedCases)); store.dispatch(setWatchedCases(watchedCases));
store.dispatch(setWatchedCasesDetails(watchedCasesDetails)); 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-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px);
} }
.data-loading-icon {
position: relative;
top: 10px;
left: 10px;
}