mirror of
https://github.com/documenso/documenso.git
synced 2025-11-17 02:01:33 +10:00
wip: create document workflow
This commit is contained in:
Mythie
163
apps/web/src/components/forms/edit-document/add-fields.tsx
Normal file
163
apps/web/src/components/forms/edit-document/add-fields.tsx
Normal file
@ -0,0 +1,163 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
import { Caveat } from 'next/font/google';
|
||||
|
||||
import { Check, ChevronsUpDown } from 'lucide-react';
|
||||
import { Control, FieldErrors, UseFormWatch } from 'react-hook-form';
|
||||
|
||||
import { cn } from '@documenso/ui/lib/utils';
|
||||
import { Button } from '@documenso/ui/primitives/button';
|
||||
import { Card, CardContent } from '@documenso/ui/primitives/card';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
} from '@documenso/ui/primitives/command';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
|
||||
|
||||
import { TEditDocumentFormSchema } from './types';
|
||||
|
||||
const fontCaveat = Caveat({
|
||||
weight: ['500'],
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
variable: '--font-caveat',
|
||||
});
|
||||
|
||||
export type AddFieldsFormProps = {
|
||||
className?: string;
|
||||
control: Control<TEditDocumentFormSchema>;
|
||||
watch: UseFormWatch<TEditDocumentFormSchema>;
|
||||
errors: FieldErrors<TEditDocumentFormSchema>;
|
||||
isSubmitting: boolean;
|
||||
};
|
||||
|
||||
export const AddFieldsFormPartial = ({
|
||||
className,
|
||||
control: _control,
|
||||
watch,
|
||||
errors: _errors,
|
||||
isSubmitting: _isSubmitting,
|
||||
}: AddFieldsFormProps) => {
|
||||
const signers = watch('signers');
|
||||
|
||||
const [selectedSigner, setSelectedSigner] = useState(() => signers[0]);
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col', className)}>
|
||||
<h3 className="text-2xl font-semibold">Edit Document</h3>
|
||||
|
||||
<p className="mt-2 text-sm text-black/30">Add all relevant fields for each recipient.</p>
|
||||
|
||||
<hr className="mb-8 mt-4" />
|
||||
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className="justify-between bg-white font-normal text-slate-500"
|
||||
>
|
||||
{selectedSigner.name && (
|
||||
<span>
|
||||
{selectedSigner.name} ({selectedSigner.email})
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!selectedSigner.name && <span>{selectedSigner.email}</span>}
|
||||
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent className="p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput />
|
||||
<CommandEmpty />
|
||||
|
||||
<CommandGroup>
|
||||
{signers.map((signer, index) => (
|
||||
<CommandItem key={index} onSelect={() => setSelectedSigner(signer)}>
|
||||
<Check
|
||||
className={cn('mr-2 h-4 w-4', {
|
||||
'opacity-0': signer !== selectedSigner,
|
||||
'opacity-100': signer === selectedSigner,
|
||||
})}
|
||||
/>
|
||||
{signer.name && (
|
||||
<span>
|
||||
{signer.name} ({signer.email})
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!signer.name && <span>{signer.email}</span>}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<div className="-mx-2 mt-8 flex-1 overflow-y-scroll px-2">
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-8">
|
||||
<button className="group h-full w-full">
|
||||
<Card className="group-focus:border-primary h-full w-full cursor-pointer">
|
||||
<CardContent className="flex flex-col items-center justify-center px-6 py-4">
|
||||
<p
|
||||
className={cn(
|
||||
'text-3xl font-medium text-slate-500 group-focus:text-slate-900',
|
||||
fontCaveat.className,
|
||||
)}
|
||||
>
|
||||
{selectedSigner.name || 'Signature'}
|
||||
</p>
|
||||
|
||||
<p className="mt-2 text-center text-xs text-slate-500">Signature</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</button>
|
||||
|
||||
<button className="group h-full w-full">
|
||||
<Card className="group-focus:border-primary h-full w-full cursor-pointer">
|
||||
<CardContent className="flex flex-col items-center justify-center px-6 py-4">
|
||||
<p className={cn('text-xl font-medium text-slate-500 group-focus:text-slate-900')}>
|
||||
{'Email'}
|
||||
</p>
|
||||
|
||||
<p className="mt-2 text-xs text-slate-500">Email</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</button>
|
||||
|
||||
<button className="group h-full w-full">
|
||||
<Card className="group-focus:border-primary h-full w-full cursor-pointer">
|
||||
<CardContent className="flex flex-col items-center justify-center px-6 py-4">
|
||||
<p className={cn('text-xl font-medium text-slate-500 group-focus:text-slate-900')}>
|
||||
{'Name'}
|
||||
</p>
|
||||
|
||||
<p className="mt-2 text-xs text-slate-500">Name</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</button>
|
||||
|
||||
<button className="group h-full w-full">
|
||||
<Card className="group-focus:border-primary h-full w-full cursor-pointer">
|
||||
<CardContent className="flex flex-col items-center justify-center px-6 py-4">
|
||||
<p className={cn('text-xl font-medium text-slate-500 group-focus:text-slate-900')}>
|
||||
{'Date'}
|
||||
</p>
|
||||
|
||||
<p className="mt-2 text-xs text-slate-500">Date</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
125
apps/web/src/components/forms/edit-document/add-signers.tsx
Normal file
125
apps/web/src/components/forms/edit-document/add-signers.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
'use client';
|
||||
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { Plus, Trash } from 'lucide-react';
|
||||
import { Control, Controller, FieldErrors, useFieldArray } from 'react-hook-form';
|
||||
|
||||
import { cn } from '@documenso/ui/lib/utils';
|
||||
import { Button } from '@documenso/ui/primitives/button';
|
||||
import { Input } from '@documenso/ui/primitives/input';
|
||||
import { Label } from '@documenso/ui/primitives/label';
|
||||
|
||||
import { FormErrorMessage } from '~/components/form/form-error-message';
|
||||
|
||||
import { TEditDocumentFormSchema } from './types';
|
||||
|
||||
export type AddSignersFormProps = {
|
||||
className?: string;
|
||||
control: Control<TEditDocumentFormSchema>;
|
||||
errors: FieldErrors<TEditDocumentFormSchema>;
|
||||
isSubmitting: boolean;
|
||||
};
|
||||
|
||||
export const AddSignersFormPartial = ({
|
||||
className,
|
||||
control,
|
||||
errors,
|
||||
isSubmitting,
|
||||
}: AddSignersFormProps) => {
|
||||
const {
|
||||
append,
|
||||
fields: signers,
|
||||
remove,
|
||||
} = useFieldArray({
|
||||
control,
|
||||
name: 'signers',
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col', className)}>
|
||||
<h3 className="text-2xl font-semibold">Add Signers</h3>
|
||||
|
||||
<p className="mt-2 text-sm text-black/30">Add the people who will sign the document.</p>
|
||||
|
||||
<hr className="mb-8 mt-4" />
|
||||
|
||||
<div className="-mx-2 flex flex-1 flex-col overflow-y-scroll px-2">
|
||||
<div className="flex w-full flex-col gap-y-4">
|
||||
<AnimatePresence>
|
||||
{signers.map((field, index) => (
|
||||
<motion.div key={field.id} className="flex flex-wrap items-end gap-x-4">
|
||||
<div className="flex-1">
|
||||
<Label htmlFor={`signer-${index}-email`}>Email</Label>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name={`signers.${index}.email`}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
id={`signer-${index}-email`}
|
||||
type="email"
|
||||
className="mt-2 bg-white"
|
||||
disabled={isSubmitting}
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<Label htmlFor={`signer-${index}-name`}>Name</Label>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name={`signers.${index}.name`}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
id={`signer-${index}-name`}
|
||||
type="text"
|
||||
className="mt-2 bg-white"
|
||||
disabled={isSubmitting}
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80"
|
||||
disabled={isSubmitting}
|
||||
onClick={() => remove(index)}
|
||||
>
|
||||
<Trash className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<FormErrorMessage className="mt-2" error={errors.signers?.[index]?.email} />
|
||||
<FormErrorMessage className="mt-2" error={errors.signers?.[index]?.name} />
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
type="button"
|
||||
disabled={isSubmitting}
|
||||
onClick={() =>
|
||||
append({
|
||||
email: '',
|
||||
name: '',
|
||||
})
|
||||
}
|
||||
>
|
||||
<Plus className="-ml-1 mr-2 h-5 w-5" />
|
||||
Add Signer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
13
apps/web/src/components/forms/edit-document/types.ts
Normal file
13
apps/web/src/components/forms/edit-document/types.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
export const ZEditDocumentFormSchema = z.object({
|
||||
signers: z.array(
|
||||
z.object({
|
||||
id: z.number().optional(),
|
||||
email: z.string().min(1).email(),
|
||||
name: z.string(),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
export type TEditDocumentFormSchema = z.infer<typeof ZEditDocumentFormSchema>;
|
||||
Reference in New Issue
Block a user