adjusted pagination and dropdown
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user