From e1d57e6d2994e7691afd319e2dcbff8e0104cd88 Mon Sep 17 00:00:00 2001 From: Ephraim Atta-Duncan Date: Sun, 25 Jun 2023 15:14:48 +0000 Subject: [PATCH] feat: add recipients avatars on all tables --- .../src/app/(dashboard)/dashboard/page.tsx | 104 +----------------- .../app/(dashboard)/documents/data-table.tsx | 12 +- .../avatar/{index.tsx => stack-avatar.tsx} | 0 .../avatar/stack-avatars-with-tooltip.tsx | 90 +++++++++++++++ .../(dashboard)/avatar/stack-avatars.tsx | 2 +- .../server-only/document/find-documents.ts | 7 +- packages/lib/types/document-with-recipient.ts | 5 + 7 files changed, 110 insertions(+), 110 deletions(-) rename apps/web/src/components/(dashboard)/avatar/{index.tsx => stack-avatar.tsx} (100%) create mode 100644 apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx create mode 100644 packages/lib/types/document-with-recipient.ts diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx index 5be73eb6d..a9d650eb6 100644 --- a/apps/web/src/app/(dashboard)/dashboard/page.tsx +++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx @@ -2,12 +2,9 @@ import Link from 'next/link'; import { Clock, File, FileCheck } from 'lucide-react'; -import { initials } from '@documenso/lib/client-only/recipient-initials'; -import { type } from '@documenso/lib/client-only/recipient-type'; import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session'; import { findDocuments } from '@documenso/lib/server-only/document/find-documents'; import { getStats } from '@documenso/lib/server-only/document/get-stats'; -import { Recipient } from '@documenso/prisma/client'; import { Table, TableBody, @@ -16,15 +13,8 @@ import { TableHeader, TableRow, } from '@documenso/ui/primitives/table'; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from '@documenso/ui/primitives/tooltip'; -import { StackAvatar } from '~/components/(dashboard)/avatar'; -import { StackAvatars } from '~/components/(dashboard)/avatar/stack-avatars'; +import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip'; import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card'; import { DocumentStatus } from '~/components/formatter/document-status'; import { LocaleDate } from '~/components/formatter/locale-date'; @@ -78,21 +68,6 @@ export default async function DashboardPage() { {results.data.map((document) => { - const waitingRecipients = document.Recipient.filter( - (recipient) => - recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED', - ); - - const completedRecipients = document.Recipient.filter( - (recipient) => - recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED', - ); - - const uncompletedRecipients = document.Recipient.filter( - (recipient) => - recipient.sendStatus === 'NOT_SENT' && recipient.signingStatus === 'NOT_SIGNED', - ); - return ( {document.id} @@ -106,82 +81,7 @@ export default async function DashboardPage() { - - - - - - -
- {completedRecipients.length > 0 && ( -
-

Completed

- {completedRecipients.map((recipient: Recipient) => ( -
- - - {recipient.email} - -
- ))} -
- )} - - {waitingRecipients.length > 0 && ( -
-

Waiting

- {waitingRecipients.map((recipient: Recipient) => ( -
- - - {recipient.email} - -
- ))} -
- )} - - {uncompletedRecipients.length > 0 && ( -
-

Uncompleted

- {uncompletedRecipients.map((recipient: Recipient) => ( -
- - - {recipient.email} - -
- ))} -
- )} -
- - - + diff --git a/apps/web/src/app/(dashboard)/documents/data-table.tsx b/apps/web/src/app/(dashboard)/documents/data-table.tsx index 58b6eb1ac..264b3596e 100644 --- a/apps/web/src/app/(dashboard)/documents/data-table.tsx +++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx @@ -7,16 +7,17 @@ import Link from 'next/link'; import { Loader } from 'lucide-react'; import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params'; +import { DocumentWithReciepient } from '@documenso/lib/types/document-with-recipient'; import { FindResultSet } from '@documenso/lib/types/find-result-set'; -import { Document } from '@documenso/prisma/client'; import { DataTable } from '@documenso/ui/primitives/data-table'; import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination'; +import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip'; import { DocumentStatus } from '~/components/formatter/document-status'; import { LocaleDate } from '~/components/formatter/locale-date'; export type DocumentsDataTableProps = { - results: FindResultSet; + results: FindResultSet; }; export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => { @@ -49,6 +50,13 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => { ), }, + { + header: 'Recipient', + accessorKey: 'recipient', + cell: ({ row }) => { + return ; + }, + }, { header: 'Status', accessorKey: 'status', diff --git a/apps/web/src/components/(dashboard)/avatar/index.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx similarity index 100% rename from apps/web/src/components/(dashboard)/avatar/index.tsx rename to apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx new file mode 100644 index 000000000..8a918fce0 --- /dev/null +++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx @@ -0,0 +1,90 @@ +import { initials } from '@documenso/lib/client-only/recipient-initials'; +import { type } from '@documenso/lib/client-only/recipient-type'; +import { Recipient } from '@documenso/prisma/client'; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@documenso/ui/primitives/tooltip'; + +import { StackAvatar } from './stack-avatar'; +import { StackAvatars } from './stack-avatars'; + +export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[] }) => { + const waitingRecipients = recipients.filter( + (recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED', + ); + + const completedRecipients = recipients.filter( + (recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED', + ); + + const uncompletedRecipients = recipients.filter( + (recipient) => recipient.sendStatus === 'NOT_SENT' && recipient.signingStatus === 'NOT_SIGNED', + ); + + return ( + + + + + + +
+ {completedRecipients.length > 0 && ( +
+

Completed

+ {completedRecipients.map((recipient: Recipient) => ( +
+ + {recipient.email} +
+ ))} +
+ )} + + {waitingRecipients.length > 0 && ( +
+

Waiting

+ {waitingRecipients.map((recipient: Recipient) => ( +
+ + {recipient.email} +
+ ))} +
+ )} + + {uncompletedRecipients.length > 0 && ( +
+

Uncompleted

+ {uncompletedRecipients.map((recipient: Recipient) => ( +
+ + {recipient.email} +
+ ))} +
+ )} +
+ + + + ); +}; diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx index 69c2fae7e..c8d63bb82 100644 --- a/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx +++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx @@ -4,7 +4,7 @@ import { initials } from '@documenso/lib/client-only/recipient-initials'; import { type } from '@documenso/lib/client-only/recipient-type'; import { Recipient } from '@documenso/prisma/client'; -import { StackAvatar } from '.'; +import { StackAvatar } from './stack-avatar'; export function StackAvatars({ recipients }: { recipients: Recipient[] }) { const renderStackAvatars = (recipients: Recipient[]) => { diff --git a/packages/lib/server-only/document/find-documents.ts b/packages/lib/server-only/document/find-documents.ts index 005b6614a..60fe8a5b3 100644 --- a/packages/lib/server-only/document/find-documents.ts +++ b/packages/lib/server-only/document/find-documents.ts @@ -1,6 +1,7 @@ import { prisma } from '@documenso/prisma'; -import { Document, DocumentStatus, Prisma, Recipient } from '@documenso/prisma/client'; +import { Document, DocumentStatus, Prisma } from '@documenso/prisma/client'; +import { DocumentWithReciepient } from '../../types/document-with-recipient'; import { FindResultSet } from '../../types/find-result-set'; export interface FindDocumentsOptions { @@ -15,10 +16,6 @@ export interface FindDocumentsOptions { }; } -export type DocumentWithReciepient = Document & { - Recipient: Recipient[]; -}; - export const findDocuments = async ({ userId, term, diff --git a/packages/lib/types/document-with-recipient.ts b/packages/lib/types/document-with-recipient.ts new file mode 100644 index 000000000..208fb2b68 --- /dev/null +++ b/packages/lib/types/document-with-recipient.ts @@ -0,0 +1,5 @@ +import { Document, Recipient } from '@documenso/prisma/client'; + +export type DocumentWithReciepient = Document & { + Recipient: Recipient[]; +};