mirror of
https://github.com/documenso/documenso.git
synced 2025-11-17 18:21:32 +10:00
feat: attachments
This commit is contained in:
Catalin Pit
@ -0,0 +1,63 @@
|
||||
import { Trans } from '@lingui/react/macro';
|
||||
import { LinkIcon } from 'lucide-react';
|
||||
|
||||
import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
|
||||
import { Button } from '@documenso/ui/primitives/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@documenso/ui/primitives/dialog';
|
||||
|
||||
export type DocumentSigningAttachmentsDialogProps = {
|
||||
document: DocumentAndSender;
|
||||
};
|
||||
|
||||
export const DocumentSigningAttachmentsDialog = ({
|
||||
document,
|
||||
}: DocumentSigningAttachmentsDialogProps) => {
|
||||
const attachments = document.attachments ?? [];
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Trans>Attachments</Trans>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent position="center">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
<Trans>Attachments</Trans>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
<Trans>View all attachments for this document.</Trans>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="mt-2 flex flex-col gap-2">
|
||||
{attachments.length === 0 && (
|
||||
<span className="text-muted-foreground text-sm">
|
||||
<Trans>No attachments available.</Trans>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{attachments.map((attachment, idx) => (
|
||||
<a
|
||||
key={attachment.id || idx}
|
||||
href={attachment.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:bg-muted/50 flex items-center gap-2 rounded px-2 py-1"
|
||||
>
|
||||
<LinkIcon className="h-4 w-4" />
|
||||
<span className="truncate">{attachment.label}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@ -24,6 +24,7 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
|
||||
import { ElementVisible } from '@documenso/ui/primitives/element-visible';
|
||||
import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
|
||||
|
||||
import { DocumentSigningAttachmentsDialog } from '~/components/general/document-signing/document-signing-attachments-dialog';
|
||||
import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
|
||||
import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
|
||||
import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
|
||||
@ -85,7 +86,7 @@ export const DocumentSigningPageView = ({
|
||||
{document.title}
|
||||
</h1>
|
||||
|
||||
<div className="mt-2.5 flex flex-wrap items-center justify-between gap-x-6">
|
||||
<div className="mt-2.5 flex flex-wrap items-center justify-between gap-x-6 gap-y-4">
|
||||
<div className="max-w-[50ch]">
|
||||
<span className="text-muted-foreground truncate" title={senderName}>
|
||||
{senderName} {senderEmail}
|
||||
@ -132,7 +133,10 @@ export const DocumentSigningPageView = ({
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<DocumentSigningRejectDialog document={document} token={recipient.token} />
|
||||
<div className="flex gap-2">
|
||||
<DocumentSigningAttachmentsDialog document={document} />
|
||||
<DocumentSigningRejectDialog document={document} token={recipient.token} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid grid-cols-12 gap-y-8 lg:gap-x-8 lg:gap-y-0">
|
||||
|
||||
@ -0,0 +1,192 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Trans, useLingui } from '@lingui/react/macro';
|
||||
import { Trash } from 'lucide-react';
|
||||
import { useFieldArray, useForm } from 'react-hook-form';
|
||||
|
||||
import { nanoid } from '@documenso/lib/universal/id';
|
||||
import { AttachmentType } from '@documenso/prisma/generated/types';
|
||||
import { trpc } from '@documenso/trpc/react';
|
||||
import type { TSetDocumentAttachmentsSchema } from '@documenso/trpc/server/document-router/set-document-attachments.types';
|
||||
import { ZSetDocumentAttachmentsSchema } from '@documenso/trpc/server/document-router/set-document-attachments.types';
|
||||
import { Button } from '@documenso/ui/primitives/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@documenso/ui/primitives/dialog';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@documenso/ui/primitives/form/form';
|
||||
import { Input } from '@documenso/ui/primitives/input';
|
||||
import { useToast } from '@documenso/ui/primitives/use-toast';
|
||||
|
||||
export type AttachmentFormProps = {
|
||||
documentId: number;
|
||||
};
|
||||
|
||||
export const AttachmentForm = ({ documentId }: AttachmentFormProps) => {
|
||||
const { t } = useLingui();
|
||||
const { toast } = useToast();
|
||||
|
||||
const { data: attachmentsData, refetch: refetchAttachments } =
|
||||
trpc.document.attachments.find.useQuery({
|
||||
documentId,
|
||||
});
|
||||
|
||||
const { mutateAsync: setDocumentAttachments } = trpc.document.attachments.set.useMutation();
|
||||
|
||||
const defaultAttachments = [
|
||||
{
|
||||
id: nanoid(12),
|
||||
label: '',
|
||||
url: '',
|
||||
type: AttachmentType.LINK,
|
||||
},
|
||||
];
|
||||
|
||||
const form = useForm<TSetDocumentAttachmentsSchema>({
|
||||
resolver: zodResolver(ZSetDocumentAttachmentsSchema),
|
||||
defaultValues: {
|
||||
documentId,
|
||||
attachments: attachmentsData ?? defaultAttachments,
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
fields: attachments,
|
||||
append: appendAttachment,
|
||||
remove: removeAttachment,
|
||||
} = useFieldArray({
|
||||
control: form.control,
|
||||
name: 'attachments',
|
||||
});
|
||||
|
||||
const onAddAttachment = () => {
|
||||
appendAttachment({
|
||||
id: nanoid(12),
|
||||
label: '',
|
||||
url: '',
|
||||
type: AttachmentType.LINK,
|
||||
});
|
||||
};
|
||||
|
||||
const onRemoveAttachment = (index: number) => {
|
||||
removeAttachment(index);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (attachmentsData && attachmentsData.length > 0) {
|
||||
form.setValue('attachments', attachmentsData);
|
||||
}
|
||||
}, [attachmentsData]);
|
||||
|
||||
const onSubmit = async (data: TSetDocumentAttachmentsSchema) => {
|
||||
try {
|
||||
await setDocumentAttachments({
|
||||
documentId,
|
||||
attachments: data.attachments,
|
||||
});
|
||||
|
||||
toast({
|
||||
title: t`Attachment(s) updated`,
|
||||
description: t`The attachment(s) have been updated successfully`,
|
||||
});
|
||||
|
||||
await refetchAttachments();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
toast({
|
||||
title: t`Something went wrong`,
|
||||
description: t`We encountered an unknown error while attempting to create the attachments.`,
|
||||
variant: 'destructive',
|
||||
duration: 5000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Trans>Attachments</Trans>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent position="center">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
<Trans>Attachments</Trans>
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<fieldset disabled={form.formState.isSubmitting} className="space-y-4">
|
||||
{attachments.map((attachment, index) => (
|
||||
<div key={attachment.id} className="flex items-end gap-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`attachments.${index}.label`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel required>
|
||||
<Trans>Label</Trans>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder={t`Attachment label`} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`attachments.${index}.url`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel required>
|
||||
<Trans>URL</Trans>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="https://..." />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onRemoveAttachment(index)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</fieldset>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button type="button" variant="outline" onClick={onAddAttachment}>
|
||||
<Trans>Add</Trans>
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
<Trans>Save</Trans>
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,192 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Trans, useLingui } from '@lingui/react/macro';
|
||||
import { Trash } from 'lucide-react';
|
||||
import { useFieldArray, useForm } from 'react-hook-form';
|
||||
|
||||
import { nanoid } from '@documenso/lib/universal/id';
|
||||
import { AttachmentType } from '@documenso/prisma/generated/types';
|
||||
import { trpc } from '@documenso/trpc/react';
|
||||
import type { TSetTemplateAttachmentsSchema } from '@documenso/trpc/server/template-router/set-template-attachments.types';
|
||||
import { ZSetTemplateAttachmentsSchema } from '@documenso/trpc/server/template-router/set-template-attachments.types';
|
||||
import { Button } from '@documenso/ui/primitives/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@documenso/ui/primitives/dialog';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@documenso/ui/primitives/form/form';
|
||||
import { Input } from '@documenso/ui/primitives/input';
|
||||
import { useToast } from '@documenso/ui/primitives/use-toast';
|
||||
|
||||
export type AttachmentFormProps = {
|
||||
templateId: number;
|
||||
};
|
||||
|
||||
export const AttachmentForm = ({ templateId }: AttachmentFormProps) => {
|
||||
const { toast } = useToast();
|
||||
const { t } = useLingui();
|
||||
|
||||
const { data: attachmentsData, refetch: refetchAttachments } =
|
||||
trpc.template.attachments.find.useQuery({
|
||||
templateId,
|
||||
});
|
||||
|
||||
const { mutateAsync: setTemplateAttachments } = trpc.template.attachments.set.useMutation();
|
||||
|
||||
const defaultAttachments = [
|
||||
{
|
||||
id: nanoid(12),
|
||||
label: '',
|
||||
url: '',
|
||||
type: AttachmentType.LINK,
|
||||
},
|
||||
];
|
||||
|
||||
const form = useForm<TSetTemplateAttachmentsSchema>({
|
||||
resolver: zodResolver(ZSetTemplateAttachmentsSchema),
|
||||
defaultValues: {
|
||||
templateId,
|
||||
attachments: attachmentsData ?? defaultAttachments,
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
fields: attachments,
|
||||
append: appendAttachment,
|
||||
remove: removeAttachment,
|
||||
} = useFieldArray({
|
||||
control: form.control,
|
||||
name: 'attachments',
|
||||
});
|
||||
|
||||
const onAddAttachment = () => {
|
||||
appendAttachment({
|
||||
id: nanoid(12),
|
||||
label: '',
|
||||
url: '',
|
||||
type: AttachmentType.LINK,
|
||||
});
|
||||
};
|
||||
|
||||
const onRemoveAttachment = (index: number) => {
|
||||
removeAttachment(index);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (attachmentsData && attachmentsData.length > 0) {
|
||||
form.setValue('attachments', attachmentsData);
|
||||
}
|
||||
}, [attachmentsData]);
|
||||
|
||||
const onSubmit = async (data: TSetTemplateAttachmentsSchema) => {
|
||||
try {
|
||||
await setTemplateAttachments({
|
||||
templateId,
|
||||
attachments: data.attachments,
|
||||
});
|
||||
|
||||
toast({
|
||||
title: t`Attachment(s) updated`,
|
||||
description: t`The attachment(s) have been updated successfully`,
|
||||
});
|
||||
|
||||
await refetchAttachments();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
toast({
|
||||
title: t`Something went wrong`,
|
||||
description: t`We encountered an unknown error while attempting to create the attachments.`,
|
||||
variant: 'destructive',
|
||||
duration: 5000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Trans>Attachments</Trans>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent position="center">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
<Trans>Attachments</Trans>
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<fieldset disabled={form.formState.isSubmitting} className="space-y-4">
|
||||
{attachments.map((attachment, index) => (
|
||||
<div key={attachment.id} className="flex items-end gap-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`attachments.${index}.label`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel required>
|
||||
<Trans>Label</Trans>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder={t`Attachment label`} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`attachments.${index}.url`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel required>
|
||||
<Trans>URL</Trans>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder={t`https://...`} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onRemoveAttachment(index)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</fieldset>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button type="button" variant="outline" onClick={onAddAttachment}>
|
||||
<Trans>Add</Trans>
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
<Trans>Save</Trans>
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@ -46,7 +46,9 @@ export const TemplatesTableActionDropdown = ({
|
||||
const isOwner = row.userId === user.id;
|
||||
const isTeamTemplate = row.teamId === teamId;
|
||||
|
||||
const formatPath = `${templateRootPath}/${row.id}/edit`;
|
||||
const formatPath = row.folderId
|
||||
? `${templateRootPath}/f/${row.folderId}/${row.id}/edit`
|
||||
: `${templateRootPath}/${row.id}/edit`;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
|
||||
Reference in New Issue
Block a user