Merged PR 797: adjusted pagination and dropdown
adjusted pagination and dropdown Related work items: #7424, #7427
This commit is contained in:
Robert Bond
+6
-6
@@ -4,7 +4,7 @@ ACCESS_TOKEN_ENDPOINT = https://login.microsoftonline.com/
|
||||
//ESNR Tenant
|
||||
TENANT = a8d860de-d5e1-45af-8376-d93f02e6b502
|
||||
//WGO Tenant
|
||||
//TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
|
||||
TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
|
||||
GRANT_TYPE = "client_credentials"
|
||||
|
||||
HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459cc3715832136d84f68818d3a96399467b52143e273d4f3bf4ae190848891535421cd6c
|
||||
@@ -37,11 +37,11 @@ RELAYPATH = "test-pedw-hc"
|
||||
|
||||
|
||||
//Prod Oauth WGO
|
||||
//CLIENT_ID = 3e4141a3-1fbd-454e-98f0-7f3a4f14a3cc
|
||||
//CLIENT_SECRET = mJN7Q~lFu.xFGa5KCc.zwIm_fJAWxajyQaFo~
|
||||
//RELAY_ROOT = https://prod-pedw-ns.servicebus.windows.net/prod-pedw-hc/
|
||||
//RELAYURI = "prod-pedw-ns.servicebus.windows.net"
|
||||
//RELAYPATH = "prod-pedw-hc"
|
||||
CLIENT_ID = 3e4141a3-1fbd-454e-98f0-7f3a4f14a3cc
|
||||
CLIENT_SECRET = mJN7Q~lFu.xFGa5KCc.zwIm_fJAWxajyQaFo~
|
||||
RELAY_ROOT = https://prod-pedw-ns.servicebus.windows.net/prod-pedw-hc/
|
||||
RELAYURI = "prod-pedw-ns.servicebus.windows.net"
|
||||
RELAYPATH = "prod-pedw-hc"
|
||||
|
||||
|
||||
GOOGLE_TAG_MANAGER = GTM-T78CBC3
|
||||
|
||||
@@ -61,29 +61,32 @@ const DocumentDetails = (props) => {
|
||||
? t("case:documents-count-label-2")
|
||||
: t("case:documents-count-label-2a")}
|
||||
</p>
|
||||
<div id="recordCountSelect" className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label-s " htmlFor="sort">
|
||||
Show
|
||||
<select
|
||||
onChange={(e) => {
|
||||
setSelectedOption(e.target.value);
|
||||
}}
|
||||
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>{" "}
|
||||
records
|
||||
</label>
|
||||
{documentDetailsObj["@odata.count"] > 5 && (
|
||||
<div id="recordCountSelect" className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label-s " htmlFor="sort">
|
||||
Show
|
||||
<select
|
||||
onChange={(e) => {
|
||||
setSelectedOption(e.target.value);
|
||||
}}
|
||||
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>{" "}
|
||||
records
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<dl className="documentList govuk-summary-list govuk-!-margin-bottom-9 results">
|
||||
<div className="govuk-summary-list__row results-headings">
|
||||
<dd className="govuk-summary-list__key govuk-!-font-size-16 ">
|
||||
|
||||
@@ -34,11 +34,11 @@ const PaginationControl = (props) => {
|
||||
let delta;
|
||||
if (pageCount <= showNoOfRecords) {
|
||||
// delta === 7: [1 2 3 4 5 6 7]
|
||||
delta = showNoOfRecords;
|
||||
delta = 4;
|
||||
} else {
|
||||
// delta === 2: [1 ... 4 5 6 ... 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 = {
|
||||
|
||||
@@ -30,15 +30,15 @@ const PaginationControl = (props) => {
|
||||
};
|
||||
|
||||
const paginationNumbers = (currentPage, pageCount) => {
|
||||
//console.log(currentPage);
|
||||
let delta;
|
||||
|
||||
if (pageCount <= showNoOfRecords) {
|
||||
// delta === 7: [1 2 3 4 5 6 7]
|
||||
delta = showNoOfRecords;
|
||||
delta = 4;
|
||||
} else {
|
||||
// delta === 2: [1 ... 4 5 6 ... 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 = {
|
||||
@@ -79,91 +79,93 @@ const PaginationControl = (props) => {
|
||||
return (
|
||||
<>
|
||||
{" "}
|
||||
<div className="govuk-!-margin-bottom-7 ">
|
||||
<div className="govuk-grid-row paginationWrapper">
|
||||
<div className="govuk-grid-column-one-quarter paginationPrevious">
|
||||
{currentPage != 1 ? (
|
||||
<span
|
||||
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 ? (
|
||||
{pagesCount > 1 && (
|
||||
<div className="govuk-!-margin-bottom-7 ">
|
||||
<div className="govuk-grid-row paginationWrapper">
|
||||
<div className="govuk-grid-column-one-quarter paginationPrevious">
|
||||
{currentPage != 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}
|
||||
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
|
||||
onClick={() => {
|
||||
spinnerState(),
|
||||
getSearchPageResults(
|
||||
i + 1,
|
||||
currentPage - 1,
|
||||
orderBy,
|
||||
fieldSort
|
||||
);
|
||||
}}
|
||||
>
|
||||
{e}
|
||||
{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
|
||||
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 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 className="govuk-body-s mobilePageCount">
|
||||
{t("common:pages-label")} {currentPage}{" "}
|
||||
{t("common:of-label")} {pagesCount}
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-body-s mobilePageCount">
|
||||
{t("common:pages-label")} {currentPage}{" "}
|
||||
{t("common:of-label")} {pagesCount}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -634,30 +634,39 @@ const SearchResults = (props) => {
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
<div id="recordCountSelect" className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label-s " htmlFor="sort">
|
||||
{t("search:searchresults-show-records-label-a")}
|
||||
<select
|
||||
onChange={(e) => {
|
||||
setSelectedOption(e.target.value);
|
||||
}}
|
||||
value={selectedOption}
|
||||
className="govuk-select"
|
||||
id="showNumberOfRecords"
|
||||
name="showNumberOfRecords"
|
||||
{resultsArr.length > 0 && (
|
||||
<div id="recordCountSelect" className="">
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
className="govuk-label-s "
|
||||
htmlFor="sort"
|
||||
>
|
||||
<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>
|
||||
{t(
|
||||
"search:searchresults-show-records-label-a"
|
||||
)}
|
||||
<select
|
||||
onChange={(e) => {
|
||||
setSelectedOption(e.target.value);
|
||||
}}
|
||||
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>
|
||||
{resultsArr.length > 0 ? (
|
||||
)}
|
||||
{resultsArr.length > 5 ? (
|
||||
ResultsView(resultsArr)
|
||||
) : (
|
||||
<div className="govuk-grid-row">
|
||||
|
||||
@@ -1869,7 +1869,11 @@ fade {
|
||||
// record selection
|
||||
|
||||
#recordCountSelect {
|
||||
text-align: right;
|
||||
text-align: left;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
text-align: right;
|
||||
}
|
||||
select {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
|
||||
Reference in New Issue
Block a user