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

pagination count fix on change page size

Browse Source
This commit is contained in:
robbond
2022-02-10 17:06:51 +00:00
parent 4ae5f93e48
commit d59b59c016
8 changed files with 149 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/search/dnssearchresults.js
+12 -1
View File
@@ -1,7 +1,6 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { setCurrentReference } from "../../store/currentView/action";
import { connect } from "react-redux";
import jsonpath from "jsonpath";
import _ from "lodash";
@@ -20,6 +19,11 @@ import {
setSearchDetails,
} from "../../store/searchOutput/action";
import { getSearchDetailsPaged } from "../utils";
import {
currentViewActionTypes,
setCurrentReference,
setCurrentPage,
} from "../../store/currentView/action";
const DNSSearchResults = (props) => {
const {
@@ -30,6 +34,7 @@ const DNSSearchResults = (props) => {
setSearchResults,
setSearchDetails,
advancedSearch,
setCurrentPage,
} = props;
let { t } = useTranslation();
@@ -367,6 +372,8 @@ const DNSSearchResults = (props) => {
</ul>
</div>
</div>
{searchResultsObj["@odata.count"]}
{searchResultsObj["@odata.count"] > 5 && (
<div id="recordCountSelect" className="govuk-grid-row">
<div className="govuk-form-group">
@@ -375,6 +382,7 @@ const DNSSearchResults = (props) => {
<select
onChange={(e) => {
setSelectedOption(e.target.value);
setCurrentPage(1);
}}
value={selectedOption}
className="govuk-select"
@@ -421,6 +429,9 @@ const mapDispatchToProps = (dispatch) => {
setSearchDetails: (searchDetailsObj) => {
dispatch(setSearchDetails(searchDetailsObj));
},
setCurrentPage: (currentPage) => {
dispatch(setCurrentPage(currentPage));
},
};
};
components/search/pagination.js
+48 -10
View File
@@ -1,6 +1,9 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { useState } from "react";
import { connect } from "react-redux";
import { setCurrentPage } from "../../store/currentView/action";
const PaginationControl = (props) => {
const {
@@ -12,6 +15,7 @@ const PaginationControl = (props) => {
currentPage,
spinnerState,
getSearchPageResults,
setCurrentPage,
} = props;
let { t } = useTranslation();
@@ -32,13 +36,14 @@ const PaginationControl = (props) => {
const paginationNumbers = (currentPage, pageCount) => {
let delta;
if (pageCount <= showNoOfRecords) {
if (pageCount <= 7) {
// delta === 7: [1 2 3 4 5 6 7]
delta = 4;
delta = 7;
} else {
// delta === 2: [1 ... 4 5 6 ... 10]
// delta === 4: [1 2 3 4 5 ... 10]
delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
//delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
delta = currentPage > 4 && currentPage < pageCount - 3 ? 2 : 4;
}
const range = {
@@ -76,6 +81,7 @@ const PaginationControl = (props) => {
const paginationArray = paginationNumbers(currentPage, pagesCount);
console.log(props);
return (
<>
{" "}
@@ -83,13 +89,18 @@ const PaginationControl = (props) => {
<div className="govuk-!-margin-bottom-7 ">
<div className="govuk-grid-row paginationWrapper">
<div className="govuk-grid-column-one-quarter paginationPrevious">
{currentPage != 1 ? (
{props.currentView.currentPage != 1 ? (
<span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
onClick={() => {
spinnerState(),
setCurrentPage(
props.currentView.currentPage -
1
),
getSearchPageResults(
currentPage - 1,
props.currentView.currentPage -
1,
orderBy,
fieldSort
);
@@ -105,7 +116,7 @@ const PaginationControl = (props) => {
</div>
<div className="govuk-grid-column-one-half paginationContainer">
{paginationArray.map((e, i) =>
currentPage == i + 1 ? (
props.currentView.currentPage == e ? (
<span
key={i}
className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
@@ -125,8 +136,9 @@ const PaginationControl = (props) => {
key={i}
onClick={() => {
spinnerState(),
setCurrentPage(e),
getSearchPageResults(
i + 1,
e,
orderBy,
fieldSort
);
@@ -138,13 +150,25 @@ const PaginationControl = (props) => {
)}
</div>
<div className="govuk-grid-column-one-quarter paginationNext">
{currentPage != pagesCount ? (
{/* {"current page state: " +
props.currentView.currentPage}{" "}
<br />
{"current page: " + currentPage} <br />
{"total pages: " + pagesCount}
<br />
{/* {thisCurrentPage != currentPage &&
setThisCurrentPage(currentPage)} */}{" "}
{props.currentView.currentPage < pagesCount ? (
<span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
onClick={() => {
spinnerState(),
setCurrentPage(
props.currenView.currentPage + 1
),
getSearchPageResults(
currentPage + 1,
props.currentView.currentPage +
1,
orderBy,
fieldSort
);
@@ -170,4 +194,18 @@ const PaginationControl = (props) => {
);
};
export default PaginationControl;
const mapStateToProps = (state) => {
return {
currentView: state.currentView,
};
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentPage: (currentPage) => {
dispatch(setCurrentPage(currentPage));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(PaginationControl);
components/search/searchresults.js
+6
View File
@@ -4,6 +4,7 @@ import useTranslation from "next-translate/useTranslation";
import {
currentViewActionTypes,
setCurrentReference,
setCurrentPage,
} from "../../store/currentView/action";
import { connect } from "react-redux";
import jsonpath from "jsonpath";
@@ -58,6 +59,7 @@ const SearchResults = (props) => {
setWatchedCases,
setWatchedCasesDetails,
isLinkedCase,
setCurrentPage,
} = props;
let { t } = useTranslation();
@@ -647,6 +649,7 @@ const SearchResults = (props) => {
<select
onChange={(e) => {
setSelectedOption(e.target.value);
setCurrentPage(1);
}}
value={selectedOption}
className="govuk-select"
@@ -705,6 +708,9 @@ const mapDispatchToProps = (dispatch) => {
setWatchedCasesDetails: (watchedCasesDetails) => {
dispatch(setWatchedCasesDetails(watchedCasesDetails));
},
setCurrentPage: (currentPage) => {
dispatch(setCurrentPage(currentPage));
},
};
};