Spaces:
Paused
Paused
File size: 3,224 Bytes
9853396 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | import { Cross2Icon } from '@radix-ui/react-icons';
import { Table } from '@tanstack/react-table';
import { RefreshCw, X } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
import { DateRangePicker } from '@/components/date-range-picker';
import type { DateTimeRangeValue } from '@/utils/date-range';
interface DataTableToolbarProps<TData> {
table: Table<TData>;
dateRange?: DateTimeRangeValue;
onDateRangeChange?: (range: DateTimeRangeValue | undefined) => void;
threadIdFilter: string;
onThreadIdFilterChange: (threadId: string) => void;
onRefresh?: () => void;
showRefresh?: boolean;
autoRefresh?: boolean;
onAutoRefreshChange?: (enabled: boolean) => void;
}
export function ThreadsTableToolbar<TData>({
table,
dateRange,
onDateRangeChange,
threadIdFilter,
onThreadIdFilterChange,
onRefresh,
showRefresh = false,
autoRefresh = false,
onAutoRefreshChange,
}: DataTableToolbarProps<TData>) {
const { t } = useTranslation();
const hasDateRange = !!dateRange?.from || !!dateRange?.to;
const isFiltered = table.getState().columnFilters.length > 0 || hasDateRange || !!threadIdFilter.trim();
return (
<div className='flex items-center justify-between'>
<div className='flex flex-1 items-center space-x-2'>
<Input
placeholder={t('threads.filters.filterThreadId')}
value={threadIdFilter}
onChange={(event) => onThreadIdFilterChange(event.target.value)}
className='h-8 w-[150px] lg:w-[250px]'
/>
<DateRangePicker value={dateRange} onChange={onDateRangeChange} />
{hasDateRange && (
<Button variant='ghost' onClick={() => onDateRangeChange?.(undefined)} className='h-8 px-2' size='sm'>
<X className='h-4 w-4' />
</Button>
)}
{isFiltered && (
<Button
variant='ghost'
onClick={() => {
table.resetColumnFilters();
onDateRangeChange?.(undefined);
onThreadIdFilterChange('');
}}
className='h-8 px-2 lg:px-3'
>
{t('common.filters.reset')}
<Cross2Icon className='ml-2 h-4 w-4' />
</Button>
)}
</div>
<div className='flex items-center space-x-2'>
{showRefresh && onAutoRefreshChange && (
<div className='flex items-center space-x-2'>
<Switch checked={autoRefresh} onCheckedChange={onAutoRefreshChange} id='auto-refresh-switch' />
<label htmlFor='auto-refresh-switch' className='text-muted-foreground cursor-pointer text-sm'>
{t('common.autoRefresh')}
</label>
</div>
)}
{showRefresh && onRefresh && (
<Button variant='outline' size='sm' onClick={onRefresh}>
<RefreshCw className={`mr-2 h-4 w-4 ${autoRefresh ? 'animate-spin' : ''}`} />
{t('common.refresh')}
</Button>
)}
</div>
</div>
);
}
|