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/case/documents.js
+8 -2
View File
@@ -9,6 +9,7 @@ import PaginationControl from "./pagination";
import LoadingOverlay from "react-loading-overlay";
import CryptoJS from "crypto-js";
import { setCurrentPage } from "../../store/currentView/action";
import {
getBasicSearch,
getBasicSearchDetails,
@@ -38,6 +39,7 @@ const DocumentDetails = (props) => {
documentHistoryObj,
setDocumentDetails,
setDocumentHistory,
setCurrentPage,
} = props;
const router = useRouter();
@@ -65,10 +67,11 @@ const DocumentDetails = (props) => {
<div id="recordCountSelect" className="govuk-grid-row">
<div className="govuk-form-group">
<label className="govuk-label-s " htmlFor="sort">
Show
{t("search:searchresults-show-records-label-a")}
<select
onChange={(e) => {
setSelectedOption(e.target.value);
setCurrentPage(1);
}}
value={selectedOption}
className="govuk-select"
@@ -81,7 +84,7 @@ const DocumentDetails = (props) => {
<option value="30">30</option>
<option value="50">50</option>
</select>{" "}
records
{t("search:searchresults-show-records-label-b")}
</label>
</div>
</div>
@@ -489,6 +492,9 @@ const mapDispatchToProps = (dispatch) => {
setDocumentHistory: (historyObj) => {
dispatch(setDocumentHistory(historyObj));
},
setCurrentPage: (currentPage) => {
dispatch(setCurrentPage(currentPage));
},
};
};
components/case/pagination.js
+50 -16
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,
getDocumentResults,
setCurrentPage,
} = props;
let { t } = useTranslation();
@@ -32,13 +36,14 @@ const PaginationControl = (props) => {
const paginationNumbers = (currentPage, pageCount) => {
//console.log(currentPage);
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 = {
@@ -78,7 +83,7 @@ const PaginationControl = (props) => {
return (
<>
{pagesCount > 1 ? (
{pagesCount > 1 && (
<div className="govuk-!-margin-bottom-7 ">
<div className="govuk-grid-row paginationWrapper">
<div className="govuk-grid-column-one-quarter paginationPrevious">
@@ -87,8 +92,13 @@ const PaginationControl = (props) => {
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
onClick={() => {
spinnerState(),
setCurrentPage(
props.currentView.currentPage -
1
),
getDocumentResults(
currentPage - 1,
props.currentView.currentPage -
1,
orderBy,
fieldSort
);
@@ -104,7 +114,7 @@ const PaginationControl = (props) => {
</div>
<div className="govuk-grid-column-one-half paginationContainer">
{paginationArray.map((e, i) =>
currentPage == i + 1 ? (
props.currentView.currentPage == i + 1 ? (
<span
key={i}
className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
@@ -124,11 +134,12 @@ const PaginationControl = (props) => {
key={i}
onClick={() => {
spinnerState();
getDocumentResults(
i + 1,
orderBy,
fieldSort
);
setCurrentPage(e),
getDocumentResults(
e,
orderBy,
fieldSort
);
}}
>
{e}
@@ -137,13 +148,24 @@ 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 /> */}
{props.currentView.currentPage < pagesCount ? (
<span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
onClick={() => {
spinnerState(),
setCurrentPage(
props.currentView.currentPage +
1
),
getDocumentResults(
currentPage + 1,
props.currentView.currentPage +
1,
orderBy,
fieldSort
);
@@ -164,11 +186,23 @@ const PaginationControl = (props) => {
{t("common:of-label")} {pagesCount}
</div>
</div>
) : (
""
)}
</>
);
};
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/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));
},
};
};