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
+3
View File
@@ -61,6 +61,7 @@ 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>
{documentDetailsObj["@odata.count"] > 5 && (
<div id="recordCountSelect" className="govuk-grid-row"> <div id="recordCountSelect" className="govuk-grid-row">
<div className="govuk-form-group"> <div className="govuk-form-group">
<label className="govuk-label-s " htmlFor="sort"> <label className="govuk-label-s " htmlFor="sort">
@@ -84,6 +85,8 @@ const DocumentDetails = (props) => {
</label> </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
+5 -3
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,6 +79,7 @@ const PaginationControl = (props) => {
return ( return (
<> <>
{" "} {" "}
{pagesCount > 1 && (
<div className="govuk-!-margin-bottom-7 "> <div className="govuk-!-margin-bottom-7 ">
<div className="govuk-grid-row paginationWrapper"> <div className="govuk-grid-row paginationWrapper">
<div className="govuk-grid-column-one-quarter paginationPrevious"> <div className="govuk-grid-column-one-quarter paginationPrevious">
@@ -164,6 +165,7 @@ const PaginationControl = (props) => {
{t("common:of-label")} {pagesCount} {t("common:of-label")} {pagesCount}
</div> </div>
</div> </div>
)}
</> </>
); );
}; };
components/search/searchresults.js
+14 -5
View File
@@ -634,10 +634,16 @@ const SearchResults = (props) => {
)} )}
</p> </p>
)} )}
<div id="recordCountSelect" className="govuk-grid-row"> {resultsArr.length > 0 && (
<div id="recordCountSelect" className="">
<div className="govuk-form-group"> <div className="govuk-form-group">
<label className="govuk-label-s " htmlFor="sort"> <label
{t("search:searchresults-show-records-label-a")} className="govuk-label-s "
htmlFor="sort"
>
{t(
"search:searchresults-show-records-label-a"
)}
<select <select
onChange={(e) => { onChange={(e) => {
setSelectedOption(e.target.value); setSelectedOption(e.target.value);
@@ -653,11 +659,14 @@ const SearchResults = (props) => {
<option value="30">30</option> <option value="30">30</option>
<option value="50">50</option> <option value="50">50</option>
</select>{" "} </select>{" "}
{t("search:searchresults-show-records-label-b")} {t(
"search:searchresults-show-records-label-b"
)}
</label> </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
+4
View File
@@ -1869,7 +1869,11 @@ fade {
// record selection // record selection
#recordCountSelect { #recordCountSelect {
text-align: left;
@media screen and (min-width: 768px) {
text-align: right; text-align: right;
}
select { select {
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;