watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-08 06:37:18 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Fixed search field disappearing when results are empty. Closes #2879.

Browse source
This commit is contained in:
Mike Cao 2024-08-22 03:10:48 -07:00
parent 2c0ba65ba0
commit 9b88611a38
6 changed files with 31 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/components/common/DataTable.tsx
View file

@ -1,11 +1,12 @@
import { ReactNode } from 'react';
import classNames from 'classnames';
import { Banner, Loading, SearchField } from 'react-basics';
import { Loading, SearchField } from 'react-basics';
import { useMessages, useNavigation } from 'components/hooks';
import Empty from 'components/common/Empty';
import Pager from 'components/common/Pager';
import { PagedQueryResult } from 'lib/types';
import styles from './DataTable.module.css';
import { LoadingPanel } from 'components/common/LoadingPanel';
const DEFAULT_SEARCH_DELAY = 600;
@ -14,6 +15,7 @@ export interface DataTableProps {
searchDelay?: number;
allowSearch?: boolean;
allowPaging?: boolean;
renderEmpty?: () => ReactNode;
children: ReactNode | ((data: any) => ReactNode);
}
@ -22,6 +24,7 @@ export function DataTable({
searchDelay = 600,
allowSearch = true,
allowPaging = true,
renderEmpty,
children,
}: DataTableProps) {
const { formatMessage, labels, messages } = useMessages();
@ -29,7 +32,7 @@ export function DataTable({
result,
params,
setParams,
query: { error, isLoading },
query: { error, isLoading, isFetched },
} = queryResult || {};
const { page, pageSize, count, data } = result || {};
const { query } = params || {};
@ -46,10 +49,6 @@ export function DataTable({
router.push(renderUrl({ page }));
};
if (error) {
return <Banner variant="error">{formatMessage(messages.error)}</Banner>;
}
return (
<>
{allowSearch && (hasData || query) && (
@ -62,23 +61,27 @@ export function DataTable({
placeholder={formatMessage(labels.search)}
/>
)}
<div
className={classNames(styles.body, { [styles.status]: isLoading || noResults || !hasData })}
>
{hasData ? (typeof children === 'function' ? children(result) : children) : null}
{isLoading && <Loading position="page" />}
{!isLoading && !hasData && !query && <Empty />}
{!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
</div>
{allowPaging && hasData && (
<Pager
className={styles.pager}
page={page}
pageSize={pageSize}
count={count}
onPageChange={handlePageChange}
/>
)}
<LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}>
<div
className={classNames(styles.body, {
[styles.status]: isLoading || noResults || !hasData,
})}
>
{hasData ? (typeof children === 'function' ? children(result) : children) : null}
{isLoading && <Loading position="page" />}
{!isLoading && !hasData && !query && (renderEmpty ? renderEmpty() : <Empty />)}
{!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
</div>
{allowPaging && hasData && (
<Pager
className={styles.pager}
page={page}
pageSize={pageSize}
count={count}
onPageChange={handlePageChange}
/>
)}
</LoadingPanel>
</>
);
}