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

adjusted pagination and dropdown

Browse Source
This commit is contained in:
robbond
2022-02-08 16:35:34 +00:00
parent 7671a6dc5e
commit 27062717b8
6 changed files with 146 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.local
+6 -6
View File
@@ -4,7 +4,7 @@ ACCESS_TOKEN_ENDPOINT = https://login.microsoftonline.com/
//ESNR Tenant //ESNR Tenant
TENANT = a8d860de-d5e1-45af-8376-d93f02e6b502 TENANT = a8d860de-d5e1-45af-8376-d93f02e6b502
//WGO Tenant //WGO Tenant
//TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5 TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
GRANT_TYPE = "client_credentials" GRANT_TYPE = "client_credentials"
HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459cc3715832136d84f68818d3a96399467b52143e273d4f3bf4ae190848891535421cd6c HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459cc3715832136d84f68818d3a96399467b52143e273d4f3bf4ae190848891535421cd6c
@@ -37,11 +37,11 @@ RELAYPATH = "test-pedw-hc"
//Prod Oauth WGO //Prod Oauth WGO
//CLIENT_ID = 3e4141a3-1fbd-454e-98f0-7f3a4f14a3cc CLIENT_ID = 3e4141a3-1fbd-454e-98f0-7f3a4f14a3cc
//CLIENT_SECRET = mJN7Q~lFu.xFGa5KCc.zwIm_fJAWxajyQaFo~ CLIENT_SECRET = mJN7Q~lFu.xFGa5KCc.zwIm_fJAWxajyQaFo~
//RELAY_ROOT = https://prod-pedw-ns.servicebus.windows.net/prod-pedw-hc/ RELAY_ROOT = https://prod-pedw-ns.servicebus.windows.net/prod-pedw-hc/
//RELAYURI = "prod-pedw-ns.servicebus.windows.net" RELAYURI = "prod-pedw-ns.servicebus.windows.net"
//RELAYPATH = "prod-pedw-hc" RELAYPATH = "prod-pedw-hc"
GOOGLE_TAG_MANAGER = GTM-T78CBC3 GOOGLE_TAG_MANAGER = GTM-T78CBC3
components/case/documents.js
+25 -22
View File
@@ -61,29 +61,32 @@ const DocumentDetails = (props) => {
? t("case:documents-count-label-2") ? t("case:documents-count-label-2")
: t("case:documents-count-label-2a")} : t("case:documents-count-label-2a")}
</p> </p>
<div id="recordCountSelect" className="govuk-grid-row"> {documentDetailsObj["@odata.count"] > 5 && (
<div className="govuk-form-group"> <div id="recordCountSelect" className="govuk-grid-row">
<label className="govuk-label-s " htmlFor="sort"> <div className="govuk-form-group">
Show <label className="govuk-label-s " htmlFor="sort">
<select Show
onChange={(e) => { <select
setSelectedOption(e.target.value); onChange={(e) => {
}} setSelectedOption(e.target.value);
value={selectedOption} }}
className="govuk-select" value={selectedOption}
id="showNumberOfRecords" className="govuk-select"
name="showNumberOfRecords" id="showNumberOfRecords"
> name="showNumberOfRecords"
<option value="5">5</option> >
<option value="10">10</option> <option value="5">5</option>
<option value="20">20</option> <option value="10">10</option>
<option value="30">30</option> <option value="20">20</option>
<option value="50">50</option> <option value="30">30</option>
</select>{" "} <option value="50">50</option>
records </select>{" "}
</label> records
</label>
</div>
</div> </div>
</div> )}
<dl className="documentList govuk-summary-list govuk-!-margin-bottom-9 results"> <dl className="documentList govuk-summary-list govuk-!-margin-bottom-9 results">
<div className="govuk-summary-list__row results-headings"> <div className="govuk-summary-list__row results-headings">
<dd className="govuk-summary-list__key govuk-!-font-size-16 "> <dd className="govuk-summary-list__key govuk-!-font-size-16 ">
components/case/pagination.js
+2 -2
View File
@@ -34,11 +34,11 @@ const PaginationControl = (props) => {
let delta; let delta;
if (pageCount <= showNoOfRecords) { if (pageCount <= showNoOfRecords) {
// delta === 7: [1 2 3 4 5 6 7] // delta === 7: [1 2 3 4 5 6 7]
delta = showNoOfRecords; delta = 4;
} else { } else {
// delta === 2: [1 ... 4 5 6 ... 10] // delta === 2: [1 ... 4 5 6 ... 10]
// delta === 4: [1 2 3 4 5 ... 10] // delta === 4: [1 2 3 4 5 ... 10]
delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 6; delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
} }
const range = { const range = {
components/search/pagination.js
+77 -75
View File
@@ -30,15 +30,15 @@ const PaginationControl = (props) => {
}; };
const paginationNumbers = (currentPage, pageCount) => { const paginationNumbers = (currentPage, pageCount) => {
//console.log(currentPage);
let delta; let delta;
if (pageCount <= showNoOfRecords) { if (pageCount <= showNoOfRecords) {
// delta === 7: [1 2 3 4 5 6 7] // delta === 7: [1 2 3 4 5 6 7]
delta = showNoOfRecords; delta = 4;
} else { } else {
// delta === 2: [1 ... 4 5 6 ... 10] // delta === 2: [1 ... 4 5 6 ... 10]
// delta === 4: [1 2 3 4 5 ... 10] // delta === 4: [1 2 3 4 5 ... 10]
delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 6; delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
} }
const range = { const range = {
@@ -79,91 +79,93 @@ const PaginationControl = (props) => {
return ( return (
<> <>
{" "} {" "}
<div className="govuk-!-margin-bottom-7 "> {pagesCount > 1 && (
<div className="govuk-grid-row paginationWrapper"> <div className="govuk-!-margin-bottom-7 ">
<div className="govuk-grid-column-one-quarter paginationPrevious"> <div className="govuk-grid-row paginationWrapper">
{currentPage != 1 ? ( <div className="govuk-grid-column-one-quarter paginationPrevious">
<span {currentPage != 1 ? (
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
onClick={() => {
spinnerState(),
getSearchPageResults(
currentPage - 1,
orderBy,
fieldSort
);
}}
>
{t("common:previous-link-button")}
</span>
) : (
<span className="govuk-body leftTextButton govuk-!-font-weight-bold">
{t("common:previous-link-button")}
</span>
)}
</div>
<div className="govuk-grid-column-one-half paginationContainer">
{paginationArray.map((e, i) =>
currentPage == i + 1 ? (
<span <span
key={i} className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
>
{e}
</span>
) : e == "..." ? (
<span
key={i}
className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
>
{e}
</span>
) : (
<span
className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
key={i}
onClick={() => { onClick={() => {
spinnerState(), spinnerState(),
getSearchPageResults( getSearchPageResults(
i + 1, currentPage - 1,
orderBy, orderBy,
fieldSort fieldSort
); );
}} }}
> >
{e} {t("common:previous-link-button")}
</span> </span>
) ) : (
)} <span className="govuk-body leftTextButton govuk-!-font-weight-bold">
{t("common:previous-link-button")}
</span>
)}
</div>
<div className="govuk-grid-column-one-half paginationContainer">
{paginationArray.map((e, i) =>
currentPage == i + 1 ? (
<span
key={i}
className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
>
{e}
</span>
) : e == "..." ? (
<span
key={i}
className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
>
{e}
</span>
) : (
<span
className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
key={i}
onClick={() => {
spinnerState(),
getSearchPageResults(
i + 1,
orderBy,
fieldSort
);
}}
>
{e}
</span>
)
)}
</div>
<div className="govuk-grid-column-one-quarter paginationNext">
{currentPage != pagesCount ? (
<span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
onClick={() => {
spinnerState(),
getSearchPageResults(
currentPage + 1,
orderBy,
fieldSort
);
}}
>
{t("common:next-link-button")}
</span>
) : (
<span className="govuk-body rightTextButton govuk-!-font-weight-bold">
{" "}
{t("common:next-link-button")}
</span>
)}
</div>
</div> </div>
<div className="govuk-grid-column-one-quarter paginationNext"> <div className="govuk-body-s mobilePageCount">
{currentPage != pagesCount ? ( {t("common:pages-label")} {currentPage}{" "}
<span {t("common:of-label")} {pagesCount}
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
onClick={() => {
spinnerState(),
getSearchPageResults(
currentPage + 1,
orderBy,
fieldSort
);
}}
>
{t("common:next-link-button")}
</span>
) : (
<span className="govuk-body rightTextButton govuk-!-font-weight-bold">
{" "}
{t("common:next-link-button")}
</span>
)}
</div> </div>
</div> </div>
<div className="govuk-body-s mobilePageCount"> )}
{t("common:pages-label")} {currentPage}{" "}
{t("common:of-label")} {pagesCount}
</div>
</div>
</> </>
); );
}; };
components/search/searchresults.js
+31 -22
View File
@@ -634,30 +634,39 @@ const SearchResults = (props) => {
)} )}
</p> </p>
)} )}
<div id="recordCountSelect" className="govuk-grid-row"> {resultsArr.length > 0 && (
<div className="govuk-form-group"> <div id="recordCountSelect" className="">
<label className="govuk-label-s " htmlFor="sort"> <div className="govuk-form-group">
{t("search:searchresults-show-records-label-a")} <label
<select className="govuk-label-s "
onChange={(e) => { htmlFor="sort"
setSelectedOption(e.target.value);
}}
value={selectedOption}
className="govuk-select"
id="showNumberOfRecords"
name="showNumberOfRecords"
> >
<option value="5">5</option> {t(
<option value="10">10</option> "search:searchresults-show-records-label-a"
<option value="20">20</option> )}
<option value="30">30</option> <select
<option value="50">50</option> onChange={(e) => {
</select>{" "} setSelectedOption(e.target.value);
{t("search:searchresults-show-records-label-b")} }}
</label> 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> )}
{resultsArr.length > 0 ? ( {resultsArr.length > 5 ? (
ResultsView(resultsArr) ResultsView(resultsArr)
) : ( ) : (
<div className="govuk-grid-row"> <div className="govuk-grid-row">
styles/sass/welshgov/_application.scss
+5 -1
View File
@@ -1869,7 +1869,11 @@ fade {
// record selection // record selection
#recordCountSelect { #recordCountSelect {
text-align: right; text-align: left;
@media screen and (min-width: 768px) {
text-align: right;
}
select { select {
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;