feat: add data table actions

2025-11-10 04:22:32 +10:00 · 2023-08-29 14:30:57 +10:00
parent 1f8d5e45e1
commit 68a5a9da1e
6 changed files with 230 additions and 74 deletions
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx
@ -0,0 +1,65 @@
+'use client';
+
+import Link from 'next/link';
+
+import { Edit, Pencil, Share } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+import { match } from 'ts-pattern';
+
+import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type DataTableActionButtonProps = {
+  row: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
+
+  const isOwner = row.User.id === session.user.id;
+  const isRecipient = !!recipient;
+  const isDraft = row.status === DocumentStatus.DRAFT;
+  const isPending = row.status === DocumentStatus.PENDING;
+  const isComplete = row.status === DocumentStatus.COMPLETED;
+  const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+
+  return match({
+    isOwner,
+    isRecipient,
+    isDraft,
+    isPending,
+    isComplete,
+    isSigned,
+  })
+    .with({ isOwner: true, isDraft: true }, () => (
+      <Button className="w-24" asChild>
+        <Link href={`/documents/${row.id}`}>
+          <Edit className="-ml-1 mr-2 h-4 w-4" />
+          Edit
+        </Link>
+      </Button>
+    ))
+    .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
+      <Button className="w-24" asChild>
+        <Link href={`/sign/${recipient?.token}`}>
+          <Pencil className="-ml-1 mr-2 h-4 w-4" />
+          Sign
+        </Link>
+      </Button>
+    ))
+    .otherwise(() => (
+      <Button className="w-24" disabled>
+        <Share className="-ml-1 mr-2 h-4 w-4" />
+        Share
+      </Button>
+    ));
+};
--- a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx
@ -0,0 +1,133 @@
+'use client';
+
+import Link from 'next/link';
+
+import {
+  Copy,
+  Download,
+  Edit,
+  History,
+  MoreHorizontal,
+  Pencil,
+  Share,
+  Trash2,
+  XCircle,
+} from 'lucide-react';
+import { useSession } from 'next-auth/react';
+
+import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+export type DataTableActionDropdownProps = {
+  row: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
+
+  const isOwner = row.User.id === session.user.id;
+  // const isRecipient = !!recipient;
+  // const isDraft = row.status === DocumentStatus.DRAFT;
+  // const isPending = row.status === DocumentStatus.PENDING;
+  const isComplete = row.status === DocumentStatus.COMPLETED;
+  // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+
+  const onDownloadClick = () => {
+    let decodedDocument = row.document;
+
+    try {
+      decodedDocument = atob(decodedDocument);
+    } catch (err) {
+      // We're just going to ignore this error and try to download the document
+      console.error(err);
+    }
+
+    const documentBytes = Uint8Array.from(decodedDocument.split('').map((c) => c.charCodeAt(0)));
+
+    const blob = new Blob([documentBytes], {
+      type: 'application/pdf',
+    });
+
+    const link = window.document.createElement('a');
+
+    link.href = window.URL.createObjectURL(blob);
+    link.download = row.title || 'document.pdf';
+
+    link.click();
+
+    window.URL.revokeObjectURL(link.href);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <MoreHorizontal className="h-5 w-5 text-gray-500" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="w-52" align="start" forceMount>
+        <DropdownMenuLabel>Action</DropdownMenuLabel>
+
+        <DropdownMenuItem disabled={!recipient} asChild>
+          <Link href={`/sign/${recipient?.token}`}>
+            <Pencil className="mr-2 h-4 w-4" />
+            Sign
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled={!isOwner} asChild>
+          <Link href={`/documents/${row.id}`}>
+            <Edit className="mr-2 h-4 w-4" />
+            Edit
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
+          <Download className="mr-2 h-4 w-4" />
+          Download
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <Copy className="mr-2 h-4 w-4" />
+          Duplicate
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <XCircle className="mr-2 h-4 w-4" />
+          Void
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+
+        <DropdownMenuLabel>Share</DropdownMenuLabel>
+
+        <DropdownMenuItem disabled>
+          <History className="mr-2 h-4 w-4" />
+          Resend
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <Share className="mr-2 h-4 w-4" />
+          Share
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@ -4,39 +4,28 @@ import { useTransition } from 'react';

 import Link from 'next/link';

-import {
-  Copy,
-  Download,
-  Edit,
-  History,
-  Loader,
-  MoreHorizontal,
-  Pencil,
-  Share,
-  Trash2,
-  XCircle,
-} from 'lucide-react';
+import { Loader } from 'lucide-react';

 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { FindResultSet } from '@documenso/lib/types/find-result-set';
-import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
-import { Button } from '@documenso/ui/primitives/button';
+import { Document, Recipient, User } from '@documenso/prisma/client';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from '@documenso/ui/primitives/dropdown-menu';

 import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';

+import { DataTableActionButton } from './data-table-action-button';
+import { DataTableActionDropdown } from './data-table-action-dropdown';
+
 export type DocumentsDataTableProps = {
-  results: FindResultSet<DocumentWithReciepient>;
+  results: FindResultSet<
+    Document & {
+      Recipient: Recipient[];
+      User: Pick<User, 'id' | 'name' | 'email'>;
+    }
+  >;
 };

 export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
@ -64,7 +53,11 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
          {
            header: 'Title',
            cell: ({ row }) => (
-              <Link href={`/documents/${row.original.id}`} className="font-medium hover:underline">
+              <Link
+                href={`/documents/${row.original.id}`}
+                title={row.original.title}
+                className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
+              >
                {row.original.title}
              </Link>
            ),
@ -88,52 +81,10 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
          },
          {
            header: 'Actions',
-            cell: ({ row: _row }) => (
+            cell: ({ row }) => (
              <div className="flex items-center gap-x-4">
-                <Button>Action</Button>
-                <DropdownMenu>
-                  <DropdownMenuTrigger>
-                    <MoreHorizontal className="h-5 w-5 text-gray-500" />
-                  </DropdownMenuTrigger>
-
-                  <DropdownMenuContent className="w-52" align="start" forceMount>
-                    <DropdownMenuLabel>Action</DropdownMenuLabel>
-                    <DropdownMenuItem disabled>
-                      <Pencil className="mr-2 h-4 w-4" />
-                      Sign
-                    </DropdownMenuItem>
-                    <DropdownMenuItem disabled>
-                      <Edit className="mr-2 h-4 w-4" />
-                      Edit
-                    </DropdownMenuItem>
-                    <DropdownMenuItem disabled>
-                      <Download className="mr-2 h-4 w-4" />
-                      Download
-                    </DropdownMenuItem>
-                    <DropdownMenuItem disabled>
-                      <Copy className="mr-2 h-4 w-4" />
-                      Duplicate
-                    </DropdownMenuItem>
-                    <DropdownMenuItem disabled>
-                      <XCircle className="mr-2 h-4 w-4" />
-                      Void
-                    </DropdownMenuItem>
-                    <DropdownMenuItem disabled>
-                      <Trash2 className="mr-2 h-4 w-4" />
-                      Delete
-                    </DropdownMenuItem>
-
-                    <DropdownMenuLabel>Share</DropdownMenuLabel>
-                    <DropdownMenuItem disabled>
-                      <History className="mr-2 h-4 w-4" />
-                      Resend
-                    </DropdownMenuItem>
-                    <DropdownMenuItem disabled>
-                      <Share className="mr-2 h-4 w-4" />
-                      Share
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                <DataTableActionButton row={row.original} />
+                <DataTableActionDropdown row={row.original} />
              </div>
            ),
          },
--- a/packages/lib/server-only/document/find-documents.ts
+++ b/packages/lib/server-only/document/find-documents.ts
@ -3,7 +3,6 @@ import { match } from 'ts-pattern';
 import { prisma } from '@documenso/prisma';
 import { Document, Prisma, SigningStatus } from '@documenso/prisma/client';
 import { DocumentWithRecipientAndSender } from '@documenso/prisma/types/document';
-import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';

 import { FindResultSet } from '../../types/find-result-set';
@ -27,7 +26,7 @@ export const findDocuments = async ({
  page = 1,
  perPage = 10,
  orderBy,
-}: FindDocumentsOptions): Promise<FindResultSet<DocumentWithReciepient>> => {
+}: FindDocumentsOptions) => {
  const user = await prisma.user.findFirstOrThrow({
    where: {
      id: userId,
@ -145,13 +144,21 @@ export const findDocuments = async ({
    }),
  ]);

+  const maskedData = data.map((doc) => ({
+    ...doc,
+    Recipient: doc.Recipient.map((recipient) => ({
+      ...recipient,
+      token: recipient.email === user.email ? recipient.token : '',
+    })),
+  }));
+
  return {
-    data,
+    data: maskedData,
    count,
    currentPage: Math.max(page, 1),
    perPage,
    totalPages: Math.ceil(count / perPage),
-  };
+  } satisfies FindResultSet<typeof maskedData>;
 };

 export interface FindDocumentsWithRecipientAndSenderOptions {
--- a/packages/lib/types/find-result-set.ts
+++ b/packages/lib/types/find-result-set.ts
@ -1,5 +1,5 @@
 export type FindResultSet<T> = {
-  data: T[];
+  data: T extends Array<any> ? T : T[];
  count: number;
  currentPage: number;
  perPage: number;
--- a/packages/prisma/types/document-with-recipient.ts
+++ b/packages/prisma/types/document-with-recipient.ts
@ -1,5 +1,5 @@
 import { Document, Recipient } from '@documenso/prisma/client';

-export type DocumentWithReciepient = Document & {
+export type DocumentWithRecipient = Document & {
  Recipient: Recipient[];
 };