yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-16 20:48:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(search) Allow users to update the number of search results per page (#5212)

Browse Source 
Co-authored-by: Chris Collins <chriscollins@Chriss-MBP-2-3.lan>
This commit is contained in:
Chris Collins 2022-06-24 19:13:09 -04:00 committed by GitHub
parent 68762a2f95
commit 4c9554e9d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
datahub-web-react/src/app/search/SearchPage.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect } from 'react'; import React, { useEffect, useState } from 'react';
import * as QueryString from 'query-string'; import * as QueryString from 'query-string';
import { useHistory, useLocation, useParams } from 'react-router'; import { useHistory, useLocation, useParams } from 'react-router';
import { Alert } from 'antd'; import { Alert } from 'antd';
@ -39,13 +39,15 @@ export const SearchPage = () => {
.filter((filter) => filter.field === ENTITY_FILTER_NAME) .filter((filter) => filter.field === ENTITY_FILTER_NAME)
.map((filter) => filter.value.toUpperCase() as EntityType); .map((filter) => filter.value.toUpperCase() as EntityType);
const [numResultsPerPage, setNumResultsPerPage] = useState(SearchCfg.RESULTS_PER_PAGE);
const { data, loading, error } = useGetSearchResultsForMultipleQuery({ const { data, loading, error } = useGetSearchResultsForMultipleQuery({
variables: { variables: {
input: { input: {
types: entityFilters, types: entityFilters,
query, query,
start: (page - 1) * SearchCfg.RESULTS_PER_PAGE, start: (page - 1) * numResultsPerPage,
count: SearchCfg.RESULTS_PER_PAGE, count: numResultsPerPage,
filters: filtersWithoutEntities, filters: filtersWithoutEntities,
}, },
}, },
@ -118,6 +120,8 @@ export const SearchPage = () => {
loading={loading} loading={loading}
onChangeFilters={onChangeFilters} onChangeFilters={onChangeFilters}
onChangePage={onChangePage} onChangePage={onChangePage}
numResultsPerPage={numResultsPerPage}
setNumResultsPerPage={setNumResultsPerPage}
/> />
</SearchablePage> </SearchablePage>
); );

14
datahub-web-react/src/app/search/SearchResults.tsx
View File

@ -137,6 +137,8 @@ interface Props {
}) => Promise<SearchResultsInterface | null | undefined>; }) => Promise<SearchResultsInterface | null | undefined>;
entityFilters: EntityType[]; entityFilters: EntityType[];
filtersWithoutEntities: FacetFilterInput[]; filtersWithoutEntities: FacetFilterInput[];
numResultsPerPage: number;
setNumResultsPerPage: (numResults: number) => void;
} }
export const SearchResults = ({ export const SearchResults = ({
@ -151,6 +153,8 @@ export const SearchResults = ({
callSearchOnVariables, callSearchOnVariables,
entityFilters, entityFilters,
filtersWithoutEntities, filtersWithoutEntities,
numResultsPerPage,
setNumResultsPerPage,
}: Props) => { }: Props) => {
const pageStart = searchResponse?.start || 0; const pageStart = searchResponse?.start || 0;
const pageSize = searchResponse?.count || 0; const pageSize = searchResponse?.count || 0;
@ -175,6 +179,10 @@ export const SearchResults = ({
onChangeFilters(newFilters); onChangeFilters(newFilters);
}; };
const updateNumResults = (_currentNum: number, newNum: number) => {
setNumResultsPerPage(newNum);
};
const history = useHistory(); const history = useHistory();
const combinedSiblingSearchResults = combineSiblingsInSearchResults(searchResponse?.searchResults); const combinedSiblingSearchResults = combineSiblingsInSearchResults(searchResponse?.searchResults);
@ -257,11 +265,13 @@ export const SearchResults = ({
<PaginationControlContainer> <PaginationControlContainer>
<Pagination <Pagination
current={page} current={page}
pageSize={SearchCfg.RESULTS_PER_PAGE} pageSize={numResultsPerPage}
total={totalResults} total={totalResults}
showLessItems showLessItems
onChange={onChangePage} onChange={onChangePage}
showSizeChanger={false} showSizeChanger={totalResults > SearchCfg.RESULTS_PER_PAGE}
onShowSizeChange={updateNumResults}
pageSizeOptions={['10', '20', '50']}
/> />
</PaginationControlContainer> </PaginationControlContainer>
{authenticatedUserUrn && ( {authenticatedUserUrn && (