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

chore: implement feedback part 1

Browse Source 
new form component added for document attachments with Zod validation and TRPC integration.
This commit is contained in:
Catalin Pit
2025-07-04 16:29:57 +03:00
parent 0b03bd3fce
commit 52b474d12b
5 changed files with 241 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
packages/ui/primitives/document-flow/add-settings.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useId } from 'react';
import { useEffect } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Trans, useLingui } from '@lingui/react/macro';
@ -10,8 +10,8 @@ import {
SendStatus,
TeamMemberRole,
} from '@prisma/client';
import { InfoIcon, Plus, Trash } from 'lucide-react';
import { useFieldArray, useForm } from 'react-hook-form';
import { InfoIcon } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { match } from 'ts-pattern';
import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
@ -20,7 +20,6 @@ import { DOCUMENT_SIGNATURE_TYPES } from '@documenso/lib/constants/document';
import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
import type { TDocument } from '@documenso/lib/types/document';
import { nanoid } from '@documenso/lib/universal/id';
import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
import {
@ -45,7 +44,6 @@ import {
AccordionItem,
AccordionTrigger,
} from '@documenso/ui/primitives/accordion';
import { Button } from '@documenso/ui/primitives/button';
import {
Form,
FormControl,
@ -93,7 +91,6 @@ export const AddSettingsFormPartial = ({
onSubmit,
}: AddSettingsFormProps) => {
const { t } = useLingui();
const initialId = useId();
const organisation = useCurrentOrganisation();
@ -101,16 +98,6 @@ export const AddSettingsFormPartial = ({
documentAuth: document.authOptions,
});
const defaultAttachments = [
{
id: '',
formId: initialId,
label: '',
url: '',
type: 'LINK',
},
];
const form = useForm<TAddSettingsFormSchema>({
resolver: zodResolver(ZAddSettingsFormSchema),
defaultValues: {
@ -131,55 +118,15 @@ export const AddSettingsFormPartial = ({
language: document.documentMeta?.language ?? 'en',
signatureTypes: extractTeamSignatureSettings(document.documentMeta),
},
attachments:
document.attachments?.map((attachment) => ({
...attachment,
id: String(attachment.id),
formId: String(attachment.id),
})) ?? defaultAttachments,
},
});
const {
fields: attachments,
append: appendAttachment,
remove: removeAttachment,
} = useFieldArray({
control: form.control,
name: 'attachments',
});
const onRemoveAttachment = (index: number) => {
const attachment = attachments[index];
const formStateIndex =
form.getValues('attachments')?.findIndex((a) => a.formId === attachment.formId) ?? -1;
if (formStateIndex !== -1) {
removeAttachment(formStateIndex);
const updatedAttachments =
form.getValues('attachments')?.filter((a) => a.formId !== attachment.formId) ?? [];
form.setValue('attachments', updatedAttachments);
}
};
const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
const documentHasBeenSent = recipients.some(
(recipient) => recipient.sendStatus === SendStatus.SENT,
);
const onAddAttachment = () => {
appendAttachment({
id: nanoid(12),
formId: nanoid(12),
label: '',
url: '',
});
};
const canUpdateVisibility = match(currentTeamMemberRole)
.with(TeamMemberRole.ADMIN, () => true)
.with(
@ -526,81 +473,6 @@ export const AddSettingsFormPartial = ({
</AccordionContent>
</AccordionItem>
</Accordion>
<Accordion type="multiple" className="mt-6">
<AccordionItem value="attachments" className="border-none">
<AccordionTrigger className="text-foreground mb-2 rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
<Trans>Attachments</Trans>
</AccordionTrigger>
<AccordionContent className="text-muted-foreground -mx-1 px-1 pt-2 text-sm leading-relaxed">
<div className="flex flex-col space-y-6">
{attachments.map((attachment, index) => (
<div key={index} className="flex items-start gap-x-3">
<div className="flex-1">
<FormField
control={form.control}
name={`attachments.${index}.label`}
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
<Trans>Label</Trans>
</FormLabel>
<FormControl>
<Input className="bg-background" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex-1">
<FormField
control={form.control}
name={`attachments.${index}.url`}
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
<Trans>Location link</Trans>
</FormLabel>
<FormControl>
<Input className="bg-background" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex-none pt-8">
<button
onClick={() => onRemoveAttachment(index)}
className="hover:bg-muted rounded-md"
>
<Trash className="h-4 w-4" />
</button>
</div>
</div>
))}
<Button
type="button"
variant="outline"
className="w-full"
onClick={onAddAttachment}
>
<Plus className="mr-2 h-4 w-4" />
<Trans>Add Attachment</Trans>
</Button>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</fieldset>
</Form>
</DocumentFlowFormContainerContent>