diff --git a/apps/web/components/editor/field-type-selector.tsx b/apps/web/components/editor/field-type-selector.tsx new file mode 100644 index 000000000..1a587f6e4 --- /dev/null +++ b/apps/web/components/editor/field-type-selector.tsx @@ -0,0 +1,76 @@ +import { useEffect, useState } from "react"; +import { RadioGroup } from "@headlessui/react"; +import { classNames } from "@documenso/lib"; +import { FieldType } from "@prisma/client"; +const stc = require("string-to-color"); + +export default function FieldTypeSelector(props: any) { + const fieldTypes = [ + { + name: "Signature", + id: FieldType.SIGNATURE, + }, + { name: "Text", id: FieldType.TEXT }, + { name: "Date", id: FieldType.DATE }, + ]; + + const [selectedFieldType, setSelectedFieldType] = useState(fieldTypes[0].id); + + useEffect(() => { + props.onChange(selectedFieldType); + }, [selectedFieldType]); + + return ( + { + setSelectedFieldType(e); + }} + > +
+ {fieldTypes.map((fieldType) => ( + { + setSelectedFieldType(fieldType.id); + }} + key={fieldType.id} + value={fieldType.id} + className={({ checked, active }) => + classNames( + checked ? "border-neon border-2" : "border-transparent", + "hover:bg-slate-100 select-none relative block cursor-pointer rounded-lg border bg-white px-3 py-2 focus:outline-none sm:flex sm:justify-between" + ) + } + > + {({ active, checked }) => ( + <> + + + + + + {" "} + { + fieldTypes.filter((e) => e.id === fieldType.id)[0] + .name + } + + + + + + )} + + ))} +
+ + ); +} diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx index 89a2bf589..d2c0fdaca 100644 --- a/apps/web/components/editor/pdf-editor.tsx +++ b/apps/web/components/editor/pdf-editor.tsx @@ -1,13 +1,13 @@ import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants"; import { useRouter } from "next/router"; import dynamic from "next/dynamic"; -import { Fragment, useState } from "react"; +import { useState } from "react"; import { FieldType } from "@prisma/client"; -import { Listbox, RadioGroup, Transition } from "@headlessui/react"; -import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline"; -import { classNames } from "@documenso/lib"; import { createOrUpdateField, deleteField } from "@documenso/lib/api"; import { createField } from "@documenso/features/editor"; +import RecipientSelector from "./recipient-selector"; +import FieldTypeSelector from "./field-type-selector"; +import toast from "react-hot-toast"; const stc = require("string-to-color"); const PDFViewer = dynamic(() => import("./pdf-viewer"), { @@ -16,19 +16,10 @@ const PDFViewer = dynamic(() => import("./pdf-viewer"), { export default function PDFEditor(props: any) { const router = useRouter(); - const [selectedRecipient, setSelectedRecipient]: any = useState( - props?.document?.Recipient[0] - ); - const noRecipients = props?.document?.Recipient?.length === 0; const [fields, setFields] = useState(props.document.Field); - const fieldTypes = [ - { name: "Signature" }, - { name: "Text" }, - { name: "Date" }, - ]; - const [selectedFieldType, setSelectedFieldType] = useState( - fieldTypes[0].name - ); + const [selectedRecipient, setSelectedRecipient]: any = useState(); + const [selectedFieldType, setSelectedFieldType] = useState(); + const noRecipients = props?.document.Recipient.length === 0; function onPositionChangedHandler(position: any, id: any) { if (!position) return; @@ -77,154 +68,28 @@ export default function PDFEditor(props: any) { hidden={noRecipients} className="fixed left-0 top-1/3 max-w-xs border border-slate-300 bg-white py-4 pr-5 rounded-md" > - - {({ open }) => ( -
- - - - - {`${selectedRecipient?.name} <${selectedRecipient?.email}>`} - - - - - - - - - {props?.document?.Recipient?.map((recipient: any) => ( - - classNames( - active - ? "text-white bg-neon-dark" - : "text-gray-900", - "relative cursor-default select-none py-2 pl-3 pr-9" - ) - } - value={recipient} - > - {({ selected, active }) => ( - <> -
- - - {`${selectedRecipient?.name} <${selectedRecipient?.email}>`} - -
- - {selected ? ( - - - ) : null} - - )} - - ))} - - -
- )} - +
-
- -
- {fieldTypes.map((fieldType) => ( - { - setSelectedFieldType(fieldType.name); - }} - key={fieldType.name} - value={fieldType.name} - className={({ checked, active }) => - classNames( - checked ? "border-neon border-2" : "border-transparent", - "hover:bg-slate-100 select-none relative block cursor-pointer rounded-lg border bg-white px-3 py-2 focus:outline-none sm:flex sm:justify-between" - ) - } - > - {({ active, checked }) => ( - <> - - - - - - {" "} - {fieldType.name} - - - - - - )} - - ))} -
- -
+ ); - function addField( - e: any, - page: number, - type: FieldType = FieldType.SIGNATURE - ) { + function addField(e: any, page: number) { const signatureField = createField( e, page, selectedRecipient, - FieldType.SIGNATURE + selectedFieldType ); + // toast.success("Adding " + selectedFieldType); createOrUpdateField(props?.document, signatureField).then((res) => { setFields(fields.concat(res)); diff --git a/apps/web/components/editor/recipient-selector.tsx b/apps/web/components/editor/recipient-selector.tsx new file mode 100644 index 000000000..a88fe78e0 --- /dev/null +++ b/apps/web/components/editor/recipient-selector.tsx @@ -0,0 +1,101 @@ +import { Fragment, useEffect, useState } from "react"; +import { Listbox, Transition } from "@headlessui/react"; +import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline"; +import { classNames } from "@documenso/lib"; +const stc = require("string-to-color"); + +export default function RecipientSelector(props: any) { + const [selectedRecipient, setSelectedRecipient]: any = useState( + props?.recipients[0] + ); + + useEffect(() => { + props.onChange(selectedRecipient); + }, [selectedRecipient]); + + return ( + { + setSelectedRecipient(e); + }} + > + {({ open }) => ( +
+ + + + + {`${selectedRecipient?.name} <${selectedRecipient?.email}>`} + + + + + + + + + {props?.recipients.map((recipient: any) => ( + + classNames( + active ? "text-white bg-neon-dark" : "text-gray-900", + "relative cursor-default select-none py-2 pl-3 pr-9" + ) + } + value={recipient} + > + {({ selected, active }) => ( + <> +
+ + + {`${selectedRecipient?.name} <${selectedRecipient?.email}>`} + +
+ + {selected ? ( + + + ) : null} + + )} + + ))} + + +
+ )} + + ); +}