mirror of
https://github.com/documenso/documenso.git
synced 2025-11-14 08:42:12 +10:00
♻️ field type and field recipient to own component
This commit is contained in:
Timur Ercan
76
apps/web/components/editor/field-type-selector.tsx
Normal file
76
apps/web/components/editor/field-type-selector.tsx
Normal file
@ -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 (
|
||||||
|
<RadioGroup
|
||||||
|
value={selectedFieldType}
|
||||||
|
onChange={(e: any) => {
|
||||||
|
setSelectedFieldType(e);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{fieldTypes.map((fieldType) => (
|
||||||
|
<RadioGroup.Option
|
||||||
|
onMouseDown={() => {
|
||||||
|
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 }) => (
|
||||||
|
<>
|
||||||
|
<span className="flex items-center">
|
||||||
|
<span className="flex flex-col text-sm">
|
||||||
|
<RadioGroup.Label
|
||||||
|
as="span"
|
||||||
|
className="font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3 align-middle"
|
||||||
|
style={{
|
||||||
|
background: stc(props.selectedRecipient?.email),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span className="align-middle">
|
||||||
|
{" "}
|
||||||
|
{
|
||||||
|
fieldTypes.filter((e) => e.id === fieldType.id)[0]
|
||||||
|
.name
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</RadioGroup.Label>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</RadioGroup.Option>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</RadioGroup>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,13 +1,13 @@
|
|||||||
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
|
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
import { Fragment, useState } from "react";
|
import { useState } from "react";
|
||||||
import { FieldType } from "@prisma/client";
|
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 { createOrUpdateField, deleteField } from "@documenso/lib/api";
|
||||||
import { createField } from "@documenso/features/editor";
|
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 stc = require("string-to-color");
|
||||||
|
|
||||||
const PDFViewer = dynamic(() => import("./pdf-viewer"), {
|
const PDFViewer = dynamic(() => import("./pdf-viewer"), {
|
||||||
@ -16,19 +16,10 @@ const PDFViewer = dynamic(() => import("./pdf-viewer"), {
|
|||||||
|
|
||||||
export default function PDFEditor(props: any) {
|
export default function PDFEditor(props: any) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [selectedRecipient, setSelectedRecipient]: any = useState(
|
|
||||||
props?.document?.Recipient[0]
|
|
||||||
);
|
|
||||||
const noRecipients = props?.document?.Recipient?.length === 0;
|
|
||||||
const [fields, setFields] = useState<any[]>(props.document.Field);
|
const [fields, setFields] = useState<any[]>(props.document.Field);
|
||||||
const fieldTypes = [
|
const [selectedRecipient, setSelectedRecipient]: any = useState();
|
||||||
{ name: "Signature" },
|
const [selectedFieldType, setSelectedFieldType] = useState();
|
||||||
{ name: "Text" },
|
const noRecipients = props?.document.Recipient.length === 0;
|
||||||
{ name: "Date" },
|
|
||||||
];
|
|
||||||
const [selectedFieldType, setSelectedFieldType] = useState(
|
|
||||||
fieldTypes[0].name
|
|
||||||
);
|
|
||||||
|
|
||||||
function onPositionChangedHandler(position: any, id: any) {
|
function onPositionChangedHandler(position: any, id: any) {
|
||||||
if (!position) return;
|
if (!position) return;
|
||||||
@ -77,154 +68,28 @@ export default function PDFEditor(props: any) {
|
|||||||
hidden={noRecipients}
|
hidden={noRecipients}
|
||||||
className="fixed left-0 top-1/3 max-w-xs border border-slate-300 bg-white py-4 pr-5 rounded-md"
|
className="fixed left-0 top-1/3 max-w-xs border border-slate-300 bg-white py-4 pr-5 rounded-md"
|
||||||
>
|
>
|
||||||
<Listbox value={selectedRecipient} onChange={setSelectedRecipient}>
|
<RecipientSelector
|
||||||
{({ open }) => (
|
recipients={props?.document?.Recipient}
|
||||||
<div className="relative mt-1 mb-2">
|
onChange={setSelectedRecipient}
|
||||||
<Listbox.Button className="select-none relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm">
|
/>
|
||||||
<span className="flex items-center">
|
|
||||||
<span
|
|
||||||
className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
|
|
||||||
style={{ background: stc(selectedRecipient?.email) }}
|
|
||||||
/>
|
|
||||||
<span className="ml-3 block truncate">
|
|
||||||
{`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
|
||||||
<ChevronUpDownIcon
|
|
||||||
className="h-5 w-5 text-gray-400"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</Listbox.Button>
|
|
||||||
|
|
||||||
<Transition
|
|
||||||
show={open}
|
|
||||||
as={Fragment}
|
|
||||||
leave="transition ease-in duration-100"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
|
||||||
{props?.document?.Recipient?.map((recipient: any) => (
|
|
||||||
<Listbox.Option
|
|
||||||
key={recipient?.id}
|
|
||||||
className={({ active }) =>
|
|
||||||
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 }) => (
|
|
||||||
<>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span
|
|
||||||
className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
|
|
||||||
style={{
|
|
||||||
background: stc(recipient?.email),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
className={classNames(
|
|
||||||
selected ? "font-semibold" : "font-normal",
|
|
||||||
"ml-3 block truncate"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{selected ? (
|
|
||||||
<span
|
|
||||||
className={classNames(
|
|
||||||
active ? "text-white" : "text-neon-dark",
|
|
||||||
"absolute inset-y-0 right-0 flex items-center pr-4"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<CheckIcon
|
|
||||||
className="h-5 w-5"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Listbox.Option>
|
|
||||||
))}
|
|
||||||
</Listbox.Options>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Listbox>
|
|
||||||
<hr className="m-3 border-slate-300"></hr>
|
<hr className="m-3 border-slate-300"></hr>
|
||||||
<div>
|
<FieldTypeSelector
|
||||||
<RadioGroup
|
selectedRecipient={selectedRecipient}
|
||||||
value={selectedFieldType}
|
onChange={setSelectedFieldType}
|
||||||
onChange={setSelectedFieldType}
|
/>
|
||||||
>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{fieldTypes.map((fieldType) => (
|
|
||||||
<RadioGroup.Option
|
|
||||||
onMouseDown={() => {
|
|
||||||
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 }) => (
|
|
||||||
<>
|
|
||||||
<span className="flex items-center">
|
|
||||||
<span className="flex flex-col text-sm">
|
|
||||||
<RadioGroup.Label
|
|
||||||
as="span"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3 align-middle"
|
|
||||||
style={{
|
|
||||||
background: stc(selectedRecipient?.email),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span className="align-middle">
|
|
||||||
{" "}
|
|
||||||
{fieldType.name}
|
|
||||||
</span>
|
|
||||||
</RadioGroup.Label>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</RadioGroup.Option>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</RadioGroup>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
function addField(
|
function addField(e: any, page: number) {
|
||||||
e: any,
|
|
||||||
page: number,
|
|
||||||
type: FieldType = FieldType.SIGNATURE
|
|
||||||
) {
|
|
||||||
const signatureField = createField(
|
const signatureField = createField(
|
||||||
e,
|
e,
|
||||||
page,
|
page,
|
||||||
selectedRecipient,
|
selectedRecipient,
|
||||||
FieldType.SIGNATURE
|
selectedFieldType
|
||||||
);
|
);
|
||||||
|
// toast.success("Adding " + selectedFieldType);
|
||||||
|
|
||||||
createOrUpdateField(props?.document, signatureField).then((res) => {
|
createOrUpdateField(props?.document, signatureField).then((res) => {
|
||||||
setFields(fields.concat(res));
|
setFields(fields.concat(res));
|
||||||
|
|||||||
101
apps/web/components/editor/recipient-selector.tsx
Normal file
101
apps/web/components/editor/recipient-selector.tsx
Normal file
@ -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 (
|
||||||
|
<Listbox
|
||||||
|
value={selectedRecipient}
|
||||||
|
onChange={(e: any) => {
|
||||||
|
setSelectedRecipient(e);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{({ open }) => (
|
||||||
|
<div className="relative mt-1 mb-2">
|
||||||
|
<Listbox.Button className="select-none relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm">
|
||||||
|
<span className="flex items-center">
|
||||||
|
<span
|
||||||
|
className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
|
||||||
|
style={{ background: stc(selectedRecipient?.email) }}
|
||||||
|
/>
|
||||||
|
<span className="ml-3 block truncate">
|
||||||
|
{`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||||
|
<ChevronUpDownIcon
|
||||||
|
className="h-5 w-5 text-gray-400"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</Listbox.Button>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
show={open}
|
||||||
|
as={Fragment}
|
||||||
|
leave="transition ease-in duration-100"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||||
|
{props?.recipients.map((recipient: any) => (
|
||||||
|
<Listbox.Option
|
||||||
|
key={recipient?.id}
|
||||||
|
className={({ active }) =>
|
||||||
|
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 }) => (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span
|
||||||
|
className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
|
||||||
|
style={{
|
||||||
|
background: stc(recipient?.email),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className={classNames(
|
||||||
|
selected ? "font-semibold" : "font-normal",
|
||||||
|
"ml-3 block truncate"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selected ? (
|
||||||
|
<span
|
||||||
|
className={classNames(
|
||||||
|
active ? "text-white" : "text-neon-dark",
|
||||||
|
"absolute inset-y-0 right-0 flex items-center pr-4"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CheckIcon className="h-5 w-5" aria-hidden="true" />
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Listbox.Option>
|
||||||
|
))}
|
||||||
|
</Listbox.Options>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Listbox>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user