From 2c064d5aff586cf7956269acd6fa67b7d471d36d Mon Sep 17 00:00:00 2001 From: Ephraim Atta-Duncan Date: Thu, 5 Jun 2025 11:41:26 +0000 Subject: [PATCH] chore: minor changes --- .../template-page-view-documents-table.tsx | 6 + .../tables/documents-table-empty-state.tsx | 4 +- .../app/components/tables/documents-table.tsx | 109 +++++-- .../tables/documents-table/data-table.tsx | 288 ------------------ .../_authenticated+/documents._index.tsx | 2 +- .../documents.f.$folderId._index.tsx | 2 +- .../server-only/document/find-documents.ts | 113 +++---- packages/ui/primitives/data-table.tsx | 167 ---------- .../data-table/data-table-faceted-filter.tsx | 16 +- .../data-table/data-table-single-filter.tsx | 3 +- .../ui/primitives/data-table/data-table.tsx | 3 +- .../data-table/utils/time-filters.ts | 6 +- 12 files changed, 169 insertions(+), 550 deletions(-) delete mode 100644 apps/remix/app/components/tables/documents-table/data-table.tsx delete mode 100644 packages/ui/primitives/data-table.tsx diff --git a/apps/remix/app/components/general/template/template-page-view-documents-table.tsx b/apps/remix/app/components/general/template/template-page-view-documents-table.tsx index dd7a5cd93..2d856641c 100644 --- a/apps/remix/app/components/general/template/template-page-view-documents-table.tsx +++ b/apps/remix/app/components/general/template/template-page-view-documents-table.tsx @@ -218,6 +218,9 @@ export const TemplatePageViewDocumentsTable = ({ cell: ({ row }) => , size: 140, filterFn: (row, id, value) => { + if (!value || !Array.isArray(value) || value.length === 0) { + return true; + } return value.includes(row.getValue(id)); }, }, @@ -265,6 +268,9 @@ export const TemplatePageViewDocumentsTable = ({ ), filterFn: (row, id, value) => { + if (!value || !Array.isArray(value) || value.length === 0) { + return true; + } return value.includes(row.getValue(id)); }, }, diff --git a/apps/remix/app/components/tables/documents-table-empty-state.tsx b/apps/remix/app/components/tables/documents-table-empty-state.tsx index e81e399a7..d77dcd83d 100644 --- a/apps/remix/app/components/tables/documents-table-empty-state.tsx +++ b/apps/remix/app/components/tables/documents-table-empty-state.tsx @@ -1,6 +1,6 @@ import { msg } from '@lingui/core/macro'; import { useLingui } from '@lingui/react'; -import { Bird, CheckCircle2 } from 'lucide-react'; +import { Bird, CheckCircle2, XCircle } from 'lucide-react'; import { match } from 'ts-pattern'; import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status'; @@ -33,7 +33,7 @@ export const DocumentsTableEmptyState = ({ status }: DocumentsTableEmptyStatePro .with(ExtendedDocumentStatus.REJECTED, () => ({ title: msg`No rejected documents`, message: msg`There are no rejected documents. Documents that have been declined will appear here.`, - icon: CheckCircle2, + icon: XCircle, })) .with(ExtendedDocumentStatus.INBOX, () => ({ title: msg`Your inbox is empty`, diff --git a/apps/remix/app/components/tables/documents-table.tsx b/apps/remix/app/components/tables/documents-table.tsx index bc36577b7..b3d281cf5 100644 --- a/apps/remix/app/components/tables/documents-table.tsx +++ b/apps/remix/app/components/tables/documents-table.tsx @@ -1,62 +1,113 @@ import { useMemo, useTransition } from 'react'; +import { i18n } from '@lingui/core'; import { msg } from '@lingui/core/macro'; import { useLingui } from '@lingui/react'; import { Loader } from 'lucide-react'; import { DateTime } from 'luxon'; -import { Link } from 'react-router'; +import { Link, useSearchParams } from 'react-router'; import { match } from 'ts-pattern'; import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params'; import { useSession } from '@documenso/lib/client-only/providers/session'; import { isDocumentCompleted } from '@documenso/lib/utils/document'; import { formatDocumentsPath } from '@documenso/lib/utils/teams'; -import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/schema'; +import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status'; +import type { TFindDocumentsInternalResponse } from '@documenso/trpc/server/document-router/schema'; import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table'; -import { DataTable } from '@documenso/ui/primitives/data-table'; import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination'; +import { DataTable } from '@documenso/ui/primitives/data-table/data-table'; +import { + type TimePeriod, + isDateInPeriod, +} from '@documenso/ui/primitives/data-table/utils/time-filters'; import { Skeleton } from '@documenso/ui/primitives/skeleton'; import { TableCell } from '@documenso/ui/primitives/table'; import { DocumentStatus } from '~/components/general/document/document-status'; +import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip'; import { useOptionalCurrentTeam } from '~/providers/team'; -import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip'; import { DocumentsTableActionButton } from './documents-table-action-button'; import { DocumentsTableActionDropdown } from './documents-table-action-dropdown'; +import { DocumentsTableEmptyState } from './documents-table-empty-state'; -export type DocumentsTableProps = { - data?: TFindDocumentsResponse; +export type DataTableProps = { + data?: TFindDocumentsInternalResponse; isLoading?: boolean; isLoadingError?: boolean; onMoveDocument?: (documentId: number) => void; }; -type DocumentsTableRow = TFindDocumentsResponse['data'][number]; +type DocumentsTableRow = TFindDocumentsInternalResponse['data'][number]; -export const DocumentsTable = ({ +export function DocumentsDataTable({ data, isLoading, isLoadingError, onMoveDocument, -}: DocumentsTableProps) => { - const { _, i18n } = useLingui(); - +}: DataTableProps) { + const { _ } = useLingui(); const team = useOptionalCurrentTeam(); const [isPending, startTransition] = useTransition(); - const updateSearchParams = useUpdateSearchParams(); + const [searchParams] = useSearchParams(); + + const handleStatusFilterChange = (values: string[]) => { + startTransition(() => { + if (values.length === 0) { + updateSearchParams({ status: undefined, page: undefined }); + } else { + updateSearchParams({ status: values.join(','), page: undefined }); + } + }); + }; + + const currentStatus = searchParams.get('status'); + const selectedStatusValues = currentStatus ? currentStatus.split(',').filter(Boolean) : []; + + const handleResetFilters = () => { + startTransition(() => { + updateSearchParams({ status: undefined, period: undefined, page: undefined }); + }); + }; + + const isStatusFiltered = selectedStatusValues.length > 0; + + const handleTimePeriodFilterChange = (values: string[]) => { + startTransition(() => { + if (values.length === 0) { + updateSearchParams({ period: undefined, page: undefined }); + } else { + updateSearchParams({ period: values[0], page: undefined }); + } + }); + }; + + const currentPeriod = searchParams.get('period'); + const selectedTimePeriodValues = currentPeriod ? [currentPeriod] : []; + const isTimePeriodFiltered = selectedTimePeriodValues.length > 0; const columns = useMemo(() => { return [ { - header: _(msg`Created`), + header: 'Created', accessorKey: 'createdAt', cell: ({ row }) => i18n.date(row.original.createdAt, { ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }), + filterFn: (row, id, value) => { + const createdAt = row.getValue(id) as Date; + if (!value || !Array.isArray(value) || value.length === 0) { + return true; + } + + const period = value[0] as TimePeriod; + return isDateInPeriod(createdAt, period); + }, }, { header: _(msg`Title`), + accessorKey: 'title', cell: ({ row }) => , }, { @@ -79,6 +130,12 @@ export const DocumentsTable = ({ accessorKey: 'status', cell: ({ row }) => , size: 140, + filterFn: (row, id, value) => { + if (!value || !Array.isArray(value) || value.length === 0) { + return true; + } + return value.includes(row.getValue(id)); + }, }, { header: _(msg`Actions`), @@ -112,18 +169,30 @@ export const DocumentsTable = ({ totalPages: 1, }; + const getEmptyStateStatus = (): ExtendedDocumentStatus => { + if (selectedStatusValues.length > 0) { + return selectedStatusValues[0] as ExtendedDocumentStatus; + } + return ExtendedDocumentStatus.ALL; + }; + return (
), }} + emptyState={{ + enable: !isLoading && !isLoadingError, + component: , + }} > {(table) => } @@ -163,7 +236,7 @@ export const DocumentsTable = ({ )}
); -}; +} type DataTableTitleProps = { row: DocumentsTableRow; diff --git a/apps/remix/app/components/tables/documents-table/data-table.tsx b/apps/remix/app/components/tables/documents-table/data-table.tsx deleted file mode 100644 index 435246c62..000000000 --- a/apps/remix/app/components/tables/documents-table/data-table.tsx +++ /dev/null @@ -1,288 +0,0 @@ -import { useMemo, useTransition } from 'react'; - -import { i18n } from '@lingui/core'; -import { msg } from '@lingui/core/macro'; -import { useLingui } from '@lingui/react'; -import { Loader } from 'lucide-react'; -import { DateTime } from 'luxon'; -import { Link, useSearchParams } from 'react-router'; -import { match } from 'ts-pattern'; - -import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params'; -import { useSession } from '@documenso/lib/client-only/providers/session'; -import { isDocumentCompleted } from '@documenso/lib/utils/document'; -import { formatDocumentsPath } from '@documenso/lib/utils/teams'; -import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status'; -import type { TFindDocumentsInternalResponse } from '@documenso/trpc/server/document-router/schema'; -import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table'; -import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination'; -import { DataTable } from '@documenso/ui/primitives/data-table/data-table'; -import { - type TimePeriod, - isDateInPeriod, -} from '@documenso/ui/primitives/data-table/utils/time-filters'; -import { Skeleton } from '@documenso/ui/primitives/skeleton'; -import { TableCell } from '@documenso/ui/primitives/table'; - -import { DocumentStatus } from '~/components/general/document/document-status'; -import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip'; -import { useOptionalCurrentTeam } from '~/providers/team'; - -import { DocumentsTableActionButton } from '../documents-table-action-button'; -import { DocumentsTableActionDropdown } from '../documents-table-action-dropdown'; -import { DocumentsTableEmptyState } from '../documents-table-empty-state'; - -export type DataTableProps = { - data?: TFindDocumentsInternalResponse; - isLoading?: boolean; - isLoadingError?: boolean; - onMoveDocument?: (documentId: number) => void; -}; - -type DocumentsTableRow = TFindDocumentsInternalResponse['data'][number]; - -export function DocumentsDataTable({ - data, - isLoading, - isLoadingError, - onMoveDocument, -}: DataTableProps) { - const { _ } = useLingui(); - const team = useOptionalCurrentTeam(); - const [isPending, startTransition] = useTransition(); - const updateSearchParams = useUpdateSearchParams(); - const [searchParams] = useSearchParams(); - - const handleStatusFilterChange = (values: string[]) => { - startTransition(() => { - if (values.length === 0) { - updateSearchParams({ status: undefined, page: undefined }); - } else { - updateSearchParams({ status: values.join(','), page: undefined }); - } - }); - }; - - const currentStatus = searchParams.get('status'); - const selectedStatusValues = currentStatus ? currentStatus.split(',').filter(Boolean) : []; - - const handleResetFilters = () => { - startTransition(() => { - updateSearchParams({ status: undefined, period: undefined, page: undefined }); - }); - }; - - const isStatusFiltered = selectedStatusValues.length > 0; - - const handleTimePeriodFilterChange = (values: string[]) => { - startTransition(() => { - if (values.length === 0) { - updateSearchParams({ period: undefined, page: undefined }); - } else { - updateSearchParams({ period: values[0], page: undefined }); - } - }); - }; - - const currentPeriod = searchParams.get('period'); - const selectedTimePeriodValues = currentPeriod ? [currentPeriod] : []; - const isTimePeriodFiltered = selectedTimePeriodValues.length > 0; - - const columns = useMemo(() => { - return [ - { - header: 'Created', - accessorKey: 'createdAt', - cell: ({ row }) => - i18n.date(row.original.createdAt, { ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }), - filterFn: (row, id, value) => { - const createdAt = row.getValue(id) as Date; - if (!value || !Array.isArray(value) || value.length === 0) { - return true; - } - - const period = value[0] as TimePeriod; - return isDateInPeriod(createdAt, period); - }, - }, - { - header: _(msg`Title`), - accessorKey: 'title', - cell: ({ row }) => , - }, - { - id: 'sender', - header: _(msg`Sender`), - cell: ({ row }) => row.original.user.name ?? row.original.user.email, - }, - { - header: _(msg`Recipient`), - accessorKey: 'recipient', - cell: ({ row }) => ( - - ), - }, - { - header: _(msg`Status`), - accessorKey: 'status', - cell: ({ row }) => , - size: 140, - filterFn: (row, id, value) => { - return value.includes(row.getValue(id)); - }, - }, - { - header: _(msg`Actions`), - cell: ({ row }) => - (!row.original.deletedAt || isDocumentCompleted(row.original.status)) && ( -
- - onMoveDocument(row.original.id) : undefined} - /> -
- ), - }, - ] satisfies DataTableColumnDef[]; - }, [team, onMoveDocument]); - - const onPaginationChange = (page: number, perPage: number) => { - startTransition(() => { - updateSearchParams({ - page, - perPage, - }); - }); - }; - - const results = data ?? { - data: [], - perPage: 10, - currentPage: 1, - totalPages: 1, - }; - - const getEmptyStateStatus = (): ExtendedDocumentStatus => { - if (selectedStatusValues.length > 0) { - return selectedStatusValues[0] as ExtendedDocumentStatus; - } - return ExtendedDocumentStatus.ALL; - }; - - return ( -
- - - - - - - - -
- -
- - - - - - - - - ), - }} - emptyState={{ - enable: !isLoading && !isLoadingError, - component: , - }} - > - {(table) => } - - - {isPending && ( -
- -
- )} -
- ); -} - -type DataTableTitleProps = { - row: DocumentsTableRow; - teamUrl?: string; -}; - -export const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => { - const { user } = useSession(); - - const recipient = row.recipients.find((recipient) => recipient.email === user.email); - - const isOwner = row.user.id === user.id; - const isRecipient = !!recipient; - const isCurrentTeamDocument = teamUrl && row.team?.url === teamUrl; - - const documentsPath = formatDocumentsPath(isCurrentTeamDocument ? teamUrl : undefined); - const formatPath = row.folderId - ? `${documentsPath}/f/${row.folderId}/${row.id}` - : `${documentsPath}/${row.id}`; - - return match({ - isOwner, - isRecipient, - isCurrentTeamDocument, - }) - .with({ isOwner: true }, { isCurrentTeamDocument: true }, () => ( - - {row.title} - - )) - .with({ isRecipient: true }, () => ( - - {row.title} - - )) - .otherwise(() => ( - - {row.title} - - )); -}; diff --git a/apps/remix/app/routes/_authenticated+/documents._index.tsx b/apps/remix/app/routes/_authenticated+/documents._index.tsx index 4beeda361..cb0367208 100644 --- a/apps/remix/app/routes/_authenticated+/documents._index.tsx +++ b/apps/remix/app/routes/_authenticated+/documents._index.tsx @@ -26,7 +26,7 @@ import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialo import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper'; import { DocumentUploadDropzone } from '~/components/general/document/document-upload'; import { FolderCard } from '~/components/general/folder/folder-card'; -import { DocumentsDataTable } from '~/components/tables/documents-table/data-table'; +import { DocumentsDataTable } from '~/components/tables/documents-table'; import { useOptionalCurrentTeam } from '~/providers/team'; import { appMetaTags } from '~/utils/meta'; diff --git a/apps/remix/app/routes/_authenticated+/documents.f.$folderId._index.tsx b/apps/remix/app/routes/_authenticated+/documents.f.$folderId._index.tsx index 239ae3cc2..5acc43e21 100644 --- a/apps/remix/app/routes/_authenticated+/documents.f.$folderId._index.tsx +++ b/apps/remix/app/routes/_authenticated+/documents.f.$folderId._index.tsx @@ -24,7 +24,7 @@ import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialo import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper'; import { DocumentUploadDropzone } from '~/components/general/document/document-upload'; import { FolderCard } from '~/components/general/folder/folder-card'; -import { DocumentsDataTable } from '~/components/tables/documents-table/data-table'; +import { DocumentsDataTable } from '~/components/tables/documents-table'; import { useOptionalCurrentTeam } from '~/providers/team'; import { appMetaTags } from '~/utils/meta'; diff --git a/packages/lib/server-only/document/find-documents.ts b/packages/lib/server-only/document/find-documents.ts index ee0379b73..6711685e9 100644 --- a/packages/lib/server-only/document/find-documents.ts +++ b/packages/lib/server-only/document/find-documents.ts @@ -11,8 +11,6 @@ import { DocumentVisibility } from '../../types/document-visibility'; import { type FindResultResponse } from '../../types/search-params'; import { maskRecipientTokensForDocument } from '../../utils/mask-recipient-tokens-for-document'; -export type PeriodSelectorValue = '' | TimePeriod; - export type FindDocumentsOptions = { userId: number; teamId?: number; @@ -25,7 +23,7 @@ export type FindDocumentsOptions = { column: keyof Omit; direction: 'asc' | 'desc'; }; - period?: PeriodSelectorValue; + period?: TimePeriod; senderIds?: number[]; query?: string; folderId?: string; @@ -236,58 +234,71 @@ export const findDocuments = async ({ if (period && period !== 'all-time') { const now = DateTime.now(); - let startDate: DateTime; - let endDate: DateTime; - switch (period) { - case 'today': - startDate = now.startOf('day'); - endDate = now.endOf('day'); - break; - case 'yesterday': - startDate = now.minus({ days: 1 }).startOf('day'); - endDate = now.minus({ days: 1 }).endOf('day'); - break; - case 'this-week': - startDate = now.startOf('week'); - endDate = now.endOf('week'); - break; - case 'last-week': - startDate = now.minus({ weeks: 1 }).startOf('week'); - endDate = now.minus({ weeks: 1 }).endOf('week'); - break; - case 'this-month': - startDate = now.startOf('month'); - endDate = now.endOf('month'); - break; - case 'last-month': - startDate = now.minus({ months: 1 }).startOf('month'); - endDate = now.minus({ months: 1 }).endOf('month'); - break; - case 'this-quarter': - startDate = now.startOf('quarter'); - endDate = now.endOf('quarter'); - break; - case 'last-quarter': - startDate = now.minus({ quarters: 1 }).startOf('quarter'); - endDate = now.minus({ quarters: 1 }).endOf('quarter'); - break; - case 'this-year': - startDate = now.startOf('year'); - endDate = now.endOf('year'); - break; - case 'last-year': - startDate = now.minus({ years: 1 }).startOf('year'); - endDate = now.minus({ years: 1 }).endOf('year'); - break; - default: - startDate = now.startOf('day'); - endDate = now.endOf('day'); - } + const { startDate, endDate } = match(period) + .with('today', () => ({ + startDate: now.startOf('day'), + endDate: now.startOf('day').plus({ days: 1 }), + })) + .with('yesterday', () => { + const yesterday = now.minus({ days: 1 }); + return { + startDate: yesterday.startOf('day'), + endDate: yesterday.startOf('day').plus({ days: 1 }), + }; + }) + .with('this-week', () => ({ + startDate: now.startOf('week'), + endDate: now.startOf('week').plus({ weeks: 1 }), + })) + .with('last-week', () => { + const lastWeek = now.minus({ weeks: 1 }); + return { + startDate: lastWeek.startOf('week'), + endDate: lastWeek.startOf('week').plus({ weeks: 1 }), + }; + }) + .with('this-month', () => ({ + startDate: now.startOf('month'), + endDate: now.startOf('month').plus({ months: 1 }), + })) + .with('last-month', () => { + const lastMonth = now.minus({ months: 1 }); + return { + startDate: lastMonth.startOf('month'), + endDate: lastMonth.startOf('month').plus({ months: 1 }), + }; + }) + .with('this-quarter', () => ({ + startDate: now.startOf('quarter'), + endDate: now.startOf('quarter').plus({ quarters: 1 }), + })) + .with('last-quarter', () => { + const lastQuarter = now.minus({ quarters: 1 }); + return { + startDate: lastQuarter.startOf('quarter'), + endDate: lastQuarter.startOf('quarter').plus({ quarters: 1 }), + }; + }) + .with('this-year', () => ({ + startDate: now.startOf('year'), + endDate: now.startOf('year').plus({ years: 1 }), + })) + .with('last-year', () => { + const lastYear = now.minus({ years: 1 }); + return { + startDate: lastYear.startOf('year'), + endDate: lastYear.startOf('year').plus({ years: 1 }), + }; + }) + .otherwise(() => ({ + startDate: now.startOf('day'), + endDate: now.startOf('day').plus({ days: 1 }), + })); whereClause.createdAt = { gte: startDate.toJSDate(), - lte: endDate.toJSDate(), + lt: endDate.toJSDate(), }; } diff --git a/packages/ui/primitives/data-table.tsx b/packages/ui/primitives/data-table.tsx deleted file mode 100644 index d27dab0aa..000000000 --- a/packages/ui/primitives/data-table.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import React, { useMemo } from 'react'; - -import { Trans } from '@lingui/react/macro'; -import type { - ColumnDef, - PaginationState, - Table as TTable, - Updater, - VisibilityState, -} from '@tanstack/react-table'; -import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'; - -import { Skeleton } from './skeleton'; -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table'; - -export type DataTableChildren = (_table: TTable) => React.ReactNode; - -export type { ColumnDef as DataTableColumnDef } from '@tanstack/react-table'; - -export interface DataTableProps { - columns: ColumnDef[]; - columnVisibility?: VisibilityState; - data: TData[]; - perPage?: number; - currentPage?: number; - totalPages?: number; - onPaginationChange?: (_page: number, _perPage: number) => void; - onClearFilters?: () => void; - hasFilters?: boolean; - children?: DataTableChildren; - skeleton?: { - enable: boolean; - rows: number; - component?: React.ReactNode; - }; - error?: { - enable: boolean; - component?: React.ReactNode; - }; -} - -export function DataTable({ - columns, - columnVisibility, - data, - error, - perPage, - currentPage, - totalPages, - skeleton, - hasFilters, - onClearFilters, - onPaginationChange, - children, -}: DataTableProps) { - const pagination = useMemo(() => { - if (currentPage !== undefined && perPage !== undefined) { - return { - pageIndex: currentPage - 1, - pageSize: perPage, - }; - } - - return { - pageIndex: 0, - pageSize: 0, - }; - }, [currentPage, perPage]); - - const manualPagination = Boolean(currentPage !== undefined && totalPages !== undefined); - - const onTablePaginationChange = (updater: Updater) => { - if (typeof updater === 'function') { - const newState = updater(pagination); - - onPaginationChange?.(newState.pageIndex + 1, newState.pageSize); - } else { - onPaginationChange?.(updater.pageIndex + 1, updater.pageSize); - } - }; - - const table = useReactTable({ - data, - columns, - getCoreRowModel: getCoreRowModel(), - state: { - pagination: manualPagination ? pagination : undefined, - columnVisibility, - }, - manualPagination, - pageCount: totalPages, - onPaginationChange: onTablePaginationChange, - }); - - return ( - <> -
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender(header.column.columnDef.header, header.getContext())} - - ); - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : error?.enable ? ( - - {error.component ?? ( - - Something went wrong. - - )} - - ) : skeleton?.enable ? ( - Array.from({ length: skeleton.rows }).map((_, i) => ( - {skeleton.component ?? } - )) - ) : ( - - -

- No results found -

- - {hasFilters && onClearFilters !== undefined && ( - - )} - - - )} - -
-
- - {children &&
{children(table)}
} - - ); -} diff --git a/packages/ui/primitives/data-table/data-table-faceted-filter.tsx b/packages/ui/primitives/data-table/data-table-faceted-filter.tsx index ea0270028..2cea97be4 100644 --- a/packages/ui/primitives/data-table/data-table-faceted-filter.tsx +++ b/packages/ui/primitives/data-table/data-table-faceted-filter.tsx @@ -64,7 +64,7 @@ export function DataTableFacetedFilter({ key={option.value} className={cn( 'rounded-sm border-none px-2 py-0.5 font-normal', - option.bgColor ? option.bgColor : 'variant-secondary', + option.bgColor ? option.bgColor : 'bg-secondary', )} > {option.label} @@ -130,20 +130,6 @@ export function DataTableFacetedFilter({ ); })} - {/* Option to clear filters, disabled for now since it makes the ui clanky. */} - {/* {selectedValues.size > 0 && ( - <> - - - column?.setFilterValue(undefined)} - className="justify-center text-center" - > - Clear filters - - - - )} */} diff --git a/packages/ui/primitives/data-table/data-table-single-filter.tsx b/packages/ui/primitives/data-table/data-table-single-filter.tsx index 2512015b5..275cf5b94 100644 --- a/packages/ui/primitives/data-table/data-table-single-filter.tsx +++ b/packages/ui/primitives/data-table/data-table-single-filter.tsx @@ -44,8 +44,7 @@ export function DataTableSingleFilter({ selectedValues, }: DataTableSingleFilterProps) { const filterValue = column?.getFilterValue() as string[] | undefined; - const selectedValue = - selectedValues?.[0] || (filterValue && filterValue.length > 0 ? filterValue[0] : undefined); + const selectedValue = selectedValues?.[0] || (filterValue?.[0] ?? undefined); const selectedOption = options.find((option) => option.value === selectedValue); const handleValueChange = (value: string) => { diff --git a/packages/ui/primitives/data-table/data-table.tsx b/packages/ui/primitives/data-table/data-table.tsx index 14698631f..9c43edf26 100644 --- a/packages/ui/primitives/data-table/data-table.tsx +++ b/packages/ui/primitives/data-table/data-table.tsx @@ -29,7 +29,6 @@ import { DataTableToolbar } from './data-table-toolbar'; interface DataTableProps { columns: ColumnDef[]; data: TData[]; - columnVisibility?: VisibilityState; perPage?: number; currentPage?: number; totalPages?: number; @@ -126,7 +125,7 @@ export function DataTable({ pagination: manualPagination ? pagination : undefined, }, manualPagination, - pageCount: totalPages, + pageCount: manualPagination ? totalPages : undefined, initialState: { pagination: { pageSize: 10, diff --git a/packages/ui/primitives/data-table/utils/time-filters.ts b/packages/ui/primitives/data-table/utils/time-filters.ts index 2acf7aa3a..95f1b084d 100644 --- a/packages/ui/primitives/data-table/utils/time-filters.ts +++ b/packages/ui/primitives/data-table/utils/time-filters.ts @@ -101,15 +101,15 @@ export function getDateRangeForPeriod( } export function isDateInPeriod(date: Date, period: TimePeriod): boolean { - const dateTime = DateTime.fromJSDate(date); - if (period === 'all-time') { return true; } + const dateTime = DateTime.fromJSDate(date); const range = getDateRangeForPeriod(period); + if (!range) { - return true; + return false; } return dateTime >= range.start && dateTime <= range.end;