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
components/search/pagination.js
+77 -75
View File
@@ -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>
)}
</>
);
};