Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-16 09:41:35 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: add envelope editor

Browse Source
This commit is contained in:
David Nguyen
2025-10-12 23:35:54 +11:00
parent bf89bc781b
commit 0da8e7dbc6
307 changed files with 24657 additions and 3681 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
apps/remix/app/components/tables/admin-document-jobs-table.tsx Normal file
View File

@ -0,0 +1,136 @@
import { useMemo } from 'react';
import { useLingui } from '@lingui/react/macro';
import { Trans } from '@lingui/react/macro';
import { useSearchParams } from 'react-router';
import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
import { trpc } from '@documenso/trpc/react';
import { Button } from '@documenso/ui/primitives/button';
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 { Skeleton } from '@documenso/ui/primitives/skeleton';
import { TableCell } from '@documenso/ui/primitives/table';
export const AdminDocumentJobsTable = ({ envelopeId }: { envelopeId: string }) => {
const { t, i18n } = useLingui();
const [searchParams] = useSearchParams();
const updateSearchParams = useUpdateSearchParams();
const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
const { data, isLoading, isLoadingError, refetch, isFetching } =
trpc.admin.document.findJobs.useQuery({
envelopeId: envelopeId,
page: parsedSearchParams.page,
perPage: parsedSearchParams.perPage,
});
const onPaginationChange = (page: number, perPage: number) => {
updateSearchParams({
page,
perPage,
});
};
const results = data ?? {
data: [],
perPage: 10,
currentPage: 1,
totalPages: 1,
};
const columns = useMemo(() => {
return [
{
header: t`Name`,
accessorKey: 'name',
},
{
header: t`Status`,
accessorKey: 'status',
},
{
header: t`Submitted`,
accessorKey: 'submittedAt',
cell: ({ row }) => i18n.date(row.original.submittedAt),
},
{
header: t`Retried`,
accessorKey: 'retried',
},
{
header: t`Last Retried`,
accessorKey: 'lastRetriedAt',
cell: ({ row }) =>
row.original.lastRetriedAt ? i18n.date(row.original.lastRetriedAt) : 'N/A',
},
{
header: t`Completed`,
accessorKey: 'completedAt',
cell: ({ row }) => (row.original.completedAt ? i18n.date(row.original.completedAt) : 'N/A'),
},
] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
}, []);
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold">
<Trans>Background Jobs</Trans>
</h2>
<Button variant="outline" size="sm" loading={isFetching} onClick={async () => refetch()}>
<Trans>Reload</Trans>
</Button>
</div>
<DataTable
columns={columns}
data={results.data}
perPage={results.perPage}
currentPage={results.currentPage}
totalPages={results.totalPages}
onPaginationChange={onPaginationChange}
error={{
enable: isLoadingError,
}}
skeleton={{
enable: isLoading,
rows: 3,
component: (
<>
<TableCell className="py-4 pr-4">
<Skeleton className="h-4 w-20 rounded-full" />
</TableCell>
<TableCell>
<Skeleton className="h-4 w-12 rounded-full" />
</TableCell>
<TableCell>
<Skeleton className="h-4 w-12 rounded-full" />
</TableCell>
<TableCell>
<Skeleton className="h-4 w-12 rounded-full" />
</TableCell>
<TableCell>
<Skeleton className="h-4 w-12 rounded-full" />
</TableCell>
<TableCell>
<Skeleton className="h-4 w-12 rounded-full" />
</TableCell>
</>
),
}}
>
{(table) =>
results.totalPages > 1 && (
<DataTablePagination additionalInformation="VisibleCount" table={table} />
)
}
</DataTable>
</div>
);
};

2
apps/remix/app/components/tables/documents-table-action-button.tsx
View File

@ -40,7 +40,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
const isCurrentTeamDocument = team && row.team?.url === team.url;
const documentsPath = formatDocumentsPath(team.url);
const formatPath = `${documentsPath}/${row.id}/edit`;
const formatPath = `${documentsPath}/${row.envelopeId}/edit`;
const onDownloadClick = async () => {
try {

53
apps/remix/app/components/tables/documents-table-action-dropdown.tsx
View File

@ -72,7 +72,7 @@ export const DocumentsTableActionDropdown = ({
const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
const documentsPath = formatDocumentsPath(team.url);
const formatPath = `${documentsPath}/${row.id}/edit`;
const formatPath = `${documentsPath}/${row.envelopeId}/edit`;
const onDownloadClick = async () => {
try {
@ -139,32 +139,35 @@ export const DocumentsTableActionDropdown = ({
<Trans>Action</Trans>
</DropdownMenuLabel>
{!isDraft && recipient && recipient?.role !== RecipientRole.CC && (
<DropdownMenuItem disabled={!recipient || isComplete} asChild>
<Link to={`/sign/${recipient?.token}`}>
{recipient?.role === RecipientRole.VIEWER && (
<>
<EyeIcon className="mr-2 h-4 w-4" />
<Trans>View</Trans>
</>
)}
{!isDraft &&
recipient &&
recipient?.role !== RecipientRole.CC &&
recipient?.role !== RecipientRole.ASSISTANT && (
<DropdownMenuItem disabled={!recipient || isComplete} asChild>
<Link to={`/sign/${recipient?.token}`}>
{recipient?.role === RecipientRole.VIEWER && (
<>
<EyeIcon className="mr-2 h-4 w-4" />
<Trans>View</Trans>
</>
)}
{recipient?.role === RecipientRole.SIGNER && (
<>
<Pencil className="mr-2 h-4 w-4" />
<Trans>Sign</Trans>
</>
)}
{recipient?.role === RecipientRole.SIGNER && (
<>
<Pencil className="mr-2 h-4 w-4" />
<Trans>Sign</Trans>
</>
)}
{recipient?.role === RecipientRole.APPROVER && (
<>
<CheckCircle className="mr-2 h-4 w-4" />
<Trans>Approve</Trans>
</>
)}
</Link>
</DropdownMenuItem>
)}
{recipient?.role === RecipientRole.APPROVER && (
<>
<CheckCircle className="mr-2 h-4 w-4" />
<Trans>Approve</Trans>
</>
)}
</Link>
</DropdownMenuItem>
)}
<DropdownMenuItem disabled={!canManageDocument || isComplete} asChild>
<Link to={formatPath}>

2
apps/remix/app/components/tables/documents-table-title.tsx
View File

@ -28,7 +28,7 @@ export const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
})
.with({ isOwner: true }, { isCurrentTeamDocument: true }, () => (
<Link
to={`${documentsPath}/${row.id}`}
to={`${documentsPath}/${row.envelopeId}`}
title={row.title}
className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
>

2
apps/remix/app/components/tables/documents-table.tsx
View File

@ -180,7 +180,7 @@ const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
const isCurrentTeamDocument = teamUrl && row.team?.url === teamUrl;
const documentsPath = formatDocumentsPath(teamUrl);
const formatPath = `${documentsPath}/${row.id}`;
const formatPath = `${documentsPath}/${row.envelopeId}`;
return match({
isOwner,

36
apps/remix/app/components/tables/templates-table-action-dropdown.tsx
View File

@ -6,7 +6,6 @@ import { Copy, Edit, FolderIcon, MoreHorizontal, Share2Icon, Trash2, Upload } fr
import { Link } from 'react-router';
import { useSession } from '@documenso/lib/client-only/providers/session';
import type { Template } from '@documenso/prisma/types/template-legacy-schema';
import {
DropdownMenu,
DropdownMenuContent,
@ -22,7 +21,13 @@ import { TemplateDuplicateDialog } from '../dialogs/template-duplicate-dialog';
import { TemplateMoveToFolderDialog } from '../dialogs/template-move-to-folder-dialog';
export type TemplatesTableActionDropdownProps = {
row: Template & {
row: {
id: number;
userId: number;
teamId: number;
title: string;
folderId?: string | null;
envelopeId: string;
directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
recipients: Recipient[];
};
@ -40,14 +45,13 @@ export const TemplatesTableActionDropdown = ({
const { user } = useSession();
const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [isTemplateDirectLinkDialogOpen, setTemplateDirectLinkDialogOpen] = useState(false);
const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
const [isMoveToFolderDialogOpen, setMoveToFolderDialogOpen] = useState(false);
const isOwner = row.userId === user.id;
const isTeamTemplate = row.teamId === teamId;
const formatPath = `${templateRootPath}/${row.id}/edit`;
const formatPath = `${templateRootPath}/${row.envelopeId}/edit`;
return (
<DropdownMenu>
@ -73,10 +77,20 @@ export const TemplatesTableActionDropdown = ({
<Trans>Duplicate</Trans>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTemplateDirectLinkDialogOpen(true)}>
<Share2Icon className="mr-2 h-4 w-4" />
<Trans>Direct link</Trans>
</DropdownMenuItem>
<TemplateDirectLinkDialog
templateId={row.id}
recipients={row.recipients}
directLink={row.directLink}
trigger={
<div
data-testid="template-direct-link"
className="hover:bg-accent hover:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors"
>
<Share2Icon className="mr-2 h-4 w-4" />
<Trans>Direct link</Trans>
</div>
}
/>
<DropdownMenuItem onClick={() => setMoveToFolderDialogOpen(true)}>
<FolderIcon className="mr-2 h-4 w-4" />
@ -109,12 +123,6 @@ export const TemplatesTableActionDropdown = ({
onOpenChange={setDuplicateDialogOpen}
/>
<TemplateDirectLinkDialog
template={row}
open={isTemplateDirectLinkDialogOpen}
onOpenChange={setTemplateDirectLinkDialogOpen}
/>
<TemplateDeleteDialog
id={row.id}
open={isDeleteDialogOpen}

2
apps/remix/app/components/tables/templates-table.tsx
View File

@ -56,7 +56,7 @@ export const TemplatesTable = ({
const formatTemplateLink = (row: TemplatesTableRow) => {
const path = formatTemplatesPath(team.url);
return `${path}/${row.id}`;
return `${path}/${row.envelopeId}`;
};
const columns = useMemo(() => {