From 986030cc38cbb0d7c8cb4fbbab49a02a3c8628c0 Mon Sep 17 00:00:00 2001 From: Ephraim Atta-Duncan Date: Sun, 18 Feb 2024 16:01:03 +0000 Subject: [PATCH] chore: failed attempt at adding custom field labels I have spent all day on it and for some reason, I can't figure it out --- .../field/set-fields-for-document.ts | 1 + .../migration.sql | 2 + packages/prisma/schema.prisma | 19 ++-- packages/trpc/server/field-router/router.ts | 1 + packages/trpc/server/field-router/schema.ts | 1 + .../primitives/document-flow/add-fields.tsx | 94 +++++++++++++++---- .../document-flow/add-fields.types.ts | 1 + .../primitives/document-flow/field-item.tsx | 7 +- packages/ui/primitives/document-flow/types.ts | 1 + 9 files changed, 101 insertions(+), 26 deletions(-) create mode 100644 packages/prisma/migrations/20240218142427_add_field_label/migration.sql diff --git a/packages/lib/server-only/field/set-fields-for-document.ts b/packages/lib/server-only/field/set-fields-for-document.ts index 7916de554..2f7809b2c 100644 --- a/packages/lib/server-only/field/set-fields-for-document.ts +++ b/packages/lib/server-only/field/set-fields-for-document.ts @@ -20,6 +20,7 @@ export interface SetFieldsForDocumentOptions { pageY: number; pageWidth: number; pageHeight: number; + label: string; }[]; requestMetadata?: RequestMetadata; } diff --git a/packages/prisma/migrations/20240218142427_add_field_label/migration.sql b/packages/prisma/migrations/20240218142427_add_field_label/migration.sql new file mode 100644 index 000000000..50522d002 --- /dev/null +++ b/packages/prisma/migrations/20240218142427_add_field_label/migration.sql @@ -0,0 +1,2 @@ +-- AlterTable +ALTER TABLE "Field" ADD COLUMN "label" TEXT; diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma index 2887cd6d2..618fccee3 100644 --- a/packages/prisma/schema.prisma +++ b/packages/prisma/schema.prisma @@ -210,15 +210,15 @@ model DocumentData { } model DocumentMeta { - id String @id @default(cuid()) - subject String? - message String? - timezone String? @default("Etc/UTC") @db.Text - password String? - dateFormat String? @default("yyyy-MM-dd hh:mm a") @db.Text - documentId Int @unique - document Document @relation(fields: [documentId], references: [id], onDelete: Cascade) - redirectUrl String? + id String @id @default(cuid()) + subject String? + message String? + timezone String? @default("Etc/UTC") @db.Text + password String? + dateFormat String? @default("yyyy-MM-dd hh:mm a") @db.Text + documentId Int @unique + document Document @relation(fields: [documentId], references: [id], onDelete: Cascade) + redirectUrl String? } enum ReadStatus { @@ -283,6 +283,7 @@ model Field { documentId Int? templateId Int? recipientId Int? + label String? type FieldType page Int positionX Decimal @default(0) diff --git a/packages/trpc/server/field-router/router.ts b/packages/trpc/server/field-router/router.ts index 4df1b1ddc..7d291ecce 100644 --- a/packages/trpc/server/field-router/router.ts +++ b/packages/trpc/server/field-router/router.ts @@ -33,6 +33,7 @@ export const fieldRouter = router({ pageY: field.pageY, pageWidth: field.pageWidth, pageHeight: field.pageHeight, + label: field.label, })), requestMetadata: extractNextApiRequestMetadata(ctx.req), }); diff --git a/packages/trpc/server/field-router/schema.ts b/packages/trpc/server/field-router/schema.ts index 9bd576667..8ce82ef66 100644 --- a/packages/trpc/server/field-router/schema.ts +++ b/packages/trpc/server/field-router/schema.ts @@ -15,6 +15,7 @@ export const ZAddFieldsMutationSchema = z.object({ pageY: z.number().min(0), pageWidth: z.number().min(0), pageHeight: z.number().min(0), + label: z.string(), }), ), }); diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx index a6266d1aa..a63d967ff 100644 --- a/packages/ui/primitives/document-flow/add-fields.tsx +++ b/packages/ui/primitives/document-flow/add-fields.tsx @@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Caveat } from 'next/font/google'; +import { Label } from '@radix-ui/react-label'; import { Check, ChevronsUpDown, Info } from 'lucide-react'; import { useFieldArray, useForm } from 'react-hook-form'; @@ -20,6 +21,7 @@ import { cn } from '../../lib/utils'; import { Button } from '../button'; import { Card, CardContent } from '../card'; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../command'; +import { Input } from '../input'; import { Popover, PopoverContent, PopoverTrigger } from '../popover'; import { useStep } from '../stepper'; import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'; @@ -32,6 +34,7 @@ import { DocumentFlowFormContainerStep, } from './document-flow-root'; import { FieldItem } from './field-item'; +import type { TDocumentFlowFormSchema } from './types'; import { type DocumentFlowStep, FRIENDLY_FIELD_TYPE } from './types'; const fontCaveat = Caveat({ @@ -47,6 +50,8 @@ const DEFAULT_WIDTH_PERCENT = 15; const MIN_HEIGHT_PX = 60; const MIN_WIDTH_PX = 200; +type ActiveField = TDocumentFlowFormSchema['fields'][0]; + export type AddFieldsFormProps = { documentFlow: DocumentFlowStep; hideRecipients?: boolean; @@ -69,6 +74,7 @@ export const AddFieldsFormPartial = ({ control, handleSubmit, formState: { isSubmitting }, + setValue, } = useForm({ defaultValues: { fields: fields.map((field) => ({ @@ -82,11 +88,23 @@ export const AddFieldsFormPartial = ({ pageHeight: Number(field.height), signerEmail: recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '', + label: field.label ?? '', })), }, }); + // const addLabelForm = useForm({ + // defaultValues: { + // label: '', + // }, + // }); + + // const onCustomLabelFormSubmit = (data: TAddCustomLabelFormSchema) => { + // console.log('Custom label', data); + // }; + const onFormSubmit = handleSubmit(onSubmit); + // const onAddCustomLabelFormSubmit = addLabelForm.handleSubmit(onCustomLabelFormSubmit); const { append, @@ -101,6 +119,8 @@ export const AddFieldsFormPartial = ({ const [selectedField, setSelectedField] = useState(null); const [selectedSigner, setSelectedSigner] = useState(null); const [showRecipientsSelector, setShowRecipientsSelector] = useState(false); + const [activeField, setActiveField] = useState(null); + const [fieldLabel, setFieldLabel] = useState | null>({}); const hasSelectedSignerBeenSent = selectedSigner?.sendStatus === SendStatus.SENT; @@ -186,12 +206,13 @@ export const AddFieldsFormPartial = ({ pageWidth: fieldPageWidth, pageHeight: fieldPageHeight, signerEmail: selectedSigner.email, + label: activeField?.label ?? fieldLabel?.[activeField?.formId ?? ''] ?? '', }); setIsFieldWithinBounds(false); setSelectedField(null); }, - [append, isWithinPageBounds, selectedField, selectedSigner, getPage], + [append, isWithinPageBounds, selectedField, selectedSigner, activeField, fieldLabel, getPage], ); const onFieldResize = useCallback( @@ -257,7 +278,7 @@ export const AddFieldsFormPartial = ({ window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mouseup', onMouseClick); }; - }, [onMouseClick, onMouseMove, selectedField]); + }, [onMouseClick, onMouseMove, selectedField, activeField]); useEffect(() => { const observer = new MutationObserver((_mutations) => { @@ -311,6 +332,8 @@ export const AddFieldsFormPartial = ({ ); }, [recipientsByRole]); + console.log(localFields[0].label); + return ( <> )} - {localFields.map((field, index) => ( - onFieldResize(options, index)} - onMove={(options) => onFieldMove(options, index)} - onRemove={() => remove(index)} - /> - ))} + {localFields.map((field, index) => { + return ( + onFieldResize(options, index)} + onClick={(field) => { + setActiveField(field); + }} + onMove={(options) => onFieldMove(options, index)} + onRemove={() => remove(index)} + /> + ); + })} {!hideRecipients && ( @@ -462,7 +490,7 @@ export const AddFieldsFormPartial = ({ )} -
+
+ + {activeField && ( +
+ +
+ { + setFieldLabel((prev) => ({ + ...prev, + [activeField.formId]: e.target.value, + })); + + setValue( + 'fields', + localFields.map((field) => { + if (field.formId === activeField.formId) { + return { + ...field, + label: fieldLabel?.[activeField.formId] ?? activeField.label ?? '', + }; + } + return field; + }), + ); + }} + /> +
+
+ )}
diff --git a/packages/ui/primitives/document-flow/add-fields.types.ts b/packages/ui/primitives/document-flow/add-fields.types.ts index e7a509632..04fdf28d3 100644 --- a/packages/ui/primitives/document-flow/add-fields.types.ts +++ b/packages/ui/primitives/document-flow/add-fields.types.ts @@ -14,6 +14,7 @@ export const ZAddFieldsFormSchema = z.object({ pageY: z.number().min(0), pageWidth: z.number().min(0), pageHeight: z.number().min(0), + label: z.string().min(1), }), ), }); diff --git a/packages/ui/primitives/document-flow/field-item.tsx b/packages/ui/primitives/document-flow/field-item.tsx index 716768c18..418d26e5a 100644 --- a/packages/ui/primitives/document-flow/field-item.tsx +++ b/packages/ui/primitives/document-flow/field-item.tsx @@ -23,6 +23,7 @@ export type FieldItemProps = { minWidth?: number; onResize?: (_node: HTMLElement) => void; onMove?: (_node: HTMLElement) => void; + onClick?: (field: Field) => void; onRemove?: () => void; }; @@ -35,6 +36,7 @@ export const FieldItem = ({ onResize, onMove, onRemove, + onClick, }: FieldItemProps) => { const [active, setActive] = useState(false); const [coords, setCoords] = useState({ @@ -106,7 +108,10 @@ export const FieldItem = ({ width: coords.pageWidth, }} bounds={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`} - onDragStart={() => setActive(true)} + onDragStart={() => { + setActive(true); + onClick?.(field); + }} onResizeStart={() => setActive(true)} onResizeStop={(_e, _d, ref) => { setActive(false); diff --git a/packages/ui/primitives/document-flow/types.ts b/packages/ui/primitives/document-flow/types.ts index 82f5706e6..077fcdbeb 100644 --- a/packages/ui/primitives/document-flow/types.ts +++ b/packages/ui/primitives/document-flow/types.ts @@ -30,6 +30,7 @@ export const ZDocumentFlowFormSchema = z.object({ pageY: z.number().min(0), pageWidth: z.number().min(0), pageHeight: z.number().min(0), + label: z.string().optional(), }), ),