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

select number records returned

Browse Source
This commit is contained in:
robbond
2022-02-01 11:36:14 +00:00
parent a17385d037
commit c932f57bf3
16 changed files with 212 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/search/dnssearchresults.js
+32 -1
View File
@@ -7,7 +7,7 @@ import jsonpath from "jsonpath";
import _ from "lodash";
import transLookup from "../../data/lookuptranslations.json";
import PaginationControl from "./pagination";
import { useState } from "react";
import { useState, useEffect } from "react";
import LoadingOverlay from "react-loading-overlay";
import {
getBasicDNSSearchPaged,
@@ -48,6 +48,7 @@ const DNSSearchResults = (props) => {
const [orderByState, setOrderbyState] = useState("createdon");
const [fieldSortState, setfieldSortState] = useState("asc");
const [selectedOption, setSelectedOption] = useState(10);
const ResultsView = (resultsArr) => {
return (
@@ -273,6 +274,7 @@ const DNSSearchResults = (props) => {
)}
</dl>
<PaginationControl
showNoOfRecords={selectedOption}
currentPage={currentPage}
searchResultsObj={searchResultsObj}
orderBy={orderByState}
@@ -335,6 +337,12 @@ const DNSSearchResults = (props) => {
setShowSpinnerState(true);
};
useEffect(() => {
if (selectedOption) {
setShowSpinnerState(true);
getSearchPageResults(1, orderByState, fieldSortState);
}
}, [selectedOption]);
return (
<>
<div className="govuk-grid-row">
@@ -354,6 +362,29 @@ const DNSSearchResults = (props) => {
</ul>
</div>
</div>
<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"
>
<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>
{resultsArr.length > 0 ? (
ResultsView(resultsArr)
) : (
components/search/pagination.js
+6 -3
View File
@@ -4,6 +4,7 @@ import useTranslation from "next-translate/useTranslation";
const PaginationControl = (props) => {
const {
showNoOfRecords,
orderBy,
fieldSort,
searchString,
@@ -17,7 +18,9 @@ const PaginationControl = (props) => {
const router = useRouter();
const { locale } = router;
const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10);
const pagesCount = Math.ceil(
searchResultsObj["@odata.count"] / showNoOfRecords
);
const getRange = (start, end) => {
//console.log(start, end);
@@ -29,9 +32,9 @@ const PaginationControl = (props) => {
const paginationNumbers = (currentPage, pageCount) => {
//console.log(currentPage);
let delta;
if (pageCount <= 10) {
if (pageCount <= showNoOfRecords) {
// delta === 7: [1 2 3 4 5 6 7]
delta = 10;
delta = showNoOfRecords;
} else {
// delta === 2: [1 ... 4 5 6 ... 10]
// delta === 4: [1 2 3 4 5 ... 10]
components/search/searchresults.js
+45 -2
View File
@@ -67,6 +67,7 @@ const SearchResults = (props) => {
var resultsArr = searchResultsObj.value || [];
const [showSpinnerState, setShowSpinnerState] = useState(false);
const [selectedOption, setSelectedOption] = useState(10);
let spinnerState = () => {
showSpinnerState == true
@@ -494,6 +495,7 @@ const SearchResults = (props) => {
</dl>
<PaginationControl
showNoOfRecords={selectedOption}
currentPage={currentPage}
searchResultsObj={searchResultsObj}
orderBy={orderByState}
@@ -534,7 +536,13 @@ const SearchResults = (props) => {
...searchString.map(([key, val]) => ({ [key]: val }))
);
getAdvancedSearchPaged(searchoObj, pageNumber, orderBy, fieldSort)
getAdvancedSearchPaged(
searchoObj,
pageNumber,
orderBy,
fieldSort,
selectedOption
)
.then((data) => data)
.then((data) => {
//console.log("getting details", data);
@@ -545,7 +553,13 @@ const SearchResults = (props) => {
});
});
} else {
getBasicSearchPaged(searchString, pageNumber, orderBy, fieldSort)
getBasicSearchPaged(
searchString,
pageNumber,
orderBy,
fieldSort,
selectedOption
)
.then((data) => data)
.then((data) => {
//console.log("getting details", data);
@@ -571,6 +585,12 @@ const SearchResults = (props) => {
setShowSpinnerState(true);
};
useEffect(() => {
if (selectedOption) {
setShowSpinnerState(true);
getSearchPageResults(1, orderByState, fieldSortState);
}
}, [selectedOption]);
// console.log(
// "page is here ",
// currentPage,
@@ -610,6 +630,29 @@ 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"
>
<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>
{resultsArr.length > 0 ? (
ResultsView(resultsArr)
) : (