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")}
</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/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);
});
});
}
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/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/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;
}