mirror of
https://github.com/documenso/documenso.git
synced 2025-11-13 16:23:06 +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 { 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<any[]>(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"
|
||||
>
|
||||
<Listbox value={selectedRecipient} onChange={setSelectedRecipient}>
|
||||
{({ 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?.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>
|
||||
<RecipientSelector
|
||||
recipients={props?.document?.Recipient}
|
||||
onChange={setSelectedRecipient}
|
||||
/>
|
||||
<hr className="m-3 border-slate-300"></hr>
|
||||
<div>
|
||||
<RadioGroup
|
||||
value={selectedFieldType}
|
||||
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>
|
||||
<FieldTypeSelector
|
||||
selectedRecipient={selectedRecipient}
|
||||
onChange={setSelectedFieldType}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
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));
|
||||
|
||||
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