144 lines
3.4 KiB
TypeScript
144 lines
3.4 KiB
TypeScript
import { ActionIcon, Box, Group, Text } from '@mantine/core';
|
|
import { createColumnHelper } from '@tanstack/react-table';
|
|
import { FaFilter, FaTrash } from 'react-icons/fa';
|
|
import type { SearchHistoryItem } from 'types';
|
|
|
|
const columnHelper = createColumnHelper<SearchHistoryItem>();
|
|
export const SearchHistoryColumns = (
|
|
setSelectedItem: React.Dispatch<React.SetStateAction<SearchHistoryItem | undefined>>,
|
|
deleteItemOpen: () => void,
|
|
filtersEnabled: boolean,
|
|
setFiltersEnabled: React.Dispatch<React.SetStateAction<boolean>>,
|
|
) => [
|
|
columnHelper.accessor('id', {
|
|
cell: ({ row }: any) => (
|
|
<Group gap={0} justify='center'>
|
|
<ActionIcon
|
|
color={'red'}
|
|
c={'black'}
|
|
onClick={() => {
|
|
setSelectedItem(row.original);
|
|
deleteItemOpen();
|
|
}}
|
|
>
|
|
<FaTrash />
|
|
</ActionIcon>
|
|
</Group>
|
|
),
|
|
header: () => (
|
|
<Group gap={0} justify='center'>
|
|
<Box
|
|
w={'1.75rem'}
|
|
h={'1.75rem'}
|
|
style={{
|
|
borderRadius: 4,
|
|
backgroundColor: 'var(--mantine-color-accent-0)',
|
|
alignContent: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
setFiltersEnabled(!filtersEnabled);
|
|
}}
|
|
>
|
|
<FaFilter />
|
|
</Box>
|
|
</Group>
|
|
),
|
|
meta: {
|
|
filterVariant: 'counter',
|
|
},
|
|
size: 32,
|
|
maxSize: 32,
|
|
enableSorting: false,
|
|
}),
|
|
columnHelper.accessor('prefix', {
|
|
id: 'prefix',
|
|
cell: ({ cell }: any) => (
|
|
<Group justify='center'>
|
|
<Text>{cell.getValue()}</Text>
|
|
</Group>
|
|
),
|
|
header: () => <Text fw={600}>Prefix</Text>,
|
|
meta: {
|
|
filterVariant: 'mantineSelect',
|
|
},
|
|
filterFn: (row, id, value) => {
|
|
if (value === null) return true;
|
|
return row.getValue(id) === value;
|
|
},
|
|
size: 32,
|
|
maxSize: 32,
|
|
}),
|
|
columnHelper.accessor('provider', {
|
|
id: 'provider',
|
|
cell: ({ cell }: any) => (
|
|
<Text mx={8} style={{ textAlign: 'center' }}>
|
|
{cell.getValue()}
|
|
</Text>
|
|
),
|
|
header: () => <Text fw={600}>Provider</Text>,
|
|
meta: {
|
|
filterVariant: 'mantineSelect',
|
|
},
|
|
size: 128,
|
|
maxSize: 128,
|
|
}),
|
|
columnHelper.accessor('searchTerm', {
|
|
id: 'searchTerm',
|
|
cell: ({ cell }: any) => (
|
|
<Group
|
|
style={{
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
}}
|
|
>
|
|
<Text w={'100%'} mx={8} style={{ justifySelf: 'center' }}>
|
|
{cell.getValue()}
|
|
</Text>
|
|
</Group>
|
|
),
|
|
header: () => <Text fw={600}>Search String</Text>,
|
|
meta: {
|
|
filterVariant: 'text',
|
|
},
|
|
maxSize: 1920,
|
|
}),
|
|
columnHelper.accessor('dateTimeStamp', {
|
|
id: 'dateTimeStamp',
|
|
cell: ({ cell }: any) => {
|
|
const m = new Date(cell.getValue());
|
|
const year = `${m.getFullYear()}`.slice(-2);
|
|
const month = `0${m.getMonth() + 1}`.slice(-2);
|
|
const day = `0${m.getDate()}`.slice(-2);
|
|
const hours = `0${m.getHours()}`.slice(-2);
|
|
const minutes = `0${m.getMinutes()}`.slice(-2);
|
|
const dateString = `${month}/${day}/${year} ${hours}:${minutes}`;
|
|
|
|
return (
|
|
<Group justify='center'>
|
|
<Text mx={8}>{dateString}</Text>
|
|
</Group>
|
|
);
|
|
},
|
|
header: () => <Text fw={600}>Time Stamp</Text>,
|
|
meta: {
|
|
filterVariant: 'range',
|
|
},
|
|
filterFn: (row, id, value) => {
|
|
const startDate = new Date(value[0]);
|
|
const endDate = new Date(value[1]);
|
|
const cellDate = new Date(row.getValue(id));
|
|
if (value[0] && value[1]) {
|
|
return cellDate >= startDate && cellDate <= endDate;
|
|
}
|
|
return true;
|
|
},
|
|
size: 132,
|
|
maxSize: 132,
|
|
minSize: 132,
|
|
}),
|
|
];
|