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

🚸 drag and drop field ux, api

Browse Source
This commit is contained in:
Timur Ercan
2023-02-22 20:09:30 +01:00
parent f6e000c80f
commit 6e17f8c217
3 changed files with 190 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
apps/web/components/editor/pdf-editor.tsx
View File

@ -6,10 +6,11 @@ import { Button } from "@documenso/ui";
import short from "short-uuid"; import short from "short-uuid";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { FieldType } from "@prisma/client"; import { FieldType } from "@prisma/client";
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, RadioGroup, Transition } from "@headlessui/react";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline"; import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
import { classNames } from "@documenso/lib"; import { classNames } from "@documenso/lib";
import Draggable from "react-draggable"; import Draggable from "react-draggable";
import Logo from "../logo";
const stc = require("string-to-color"); const stc = require("string-to-color");
const PDFViewer = dynamic(() => import("./pdf-viewer"), { const PDFViewer = dynamic(() => import("./pdf-viewer"), {
@ -22,13 +23,22 @@ export default function PDFEditor(props: any) {
); );
const noRecipients = props?.document?.Recipient?.length === 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 [adding, setAdding] = useState(false);
const router = useRouter(); const router = useRouter();
const fieldTypes = [
{ name: "Signature" },
{ name: "Text" },
{ 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;
const movedField = fields.find((e) => e.id == id); const movedField = fields.find((e) => e.id == id);
movedField.positionX = position.x; movedField.positionX = position.x.toFixed(0);
movedField.positionY = position.y; movedField.positionY = position.y.toFixed(0);
upsertField(props.document, movedField); upsertField(props.document, movedField);
// no instant redraw neccessary, postion information for saving or later rerender is enough // no instant redraw neccessary, postion information for saving or later rerender is enough
@ -50,150 +60,188 @@ export default function PDFEditor(props: any) {
return ( return (
<> <>
<PDFViewer <div>
readonly={false} <PDFViewer
document={props.document} readonly={false}
fields={fields} document={props.document}
onPositionChanged={onPositionChangedHandler} fields={fields}
onDelete={onDeleteHandler} onPositionChanged={onPositionChangedHandler}
pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`} onDelete={onDeleteHandler}
onMouseDown={(e: any, page: number) => { pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
var rect = e.target.getBoundingClientRect(); onMouseUp={(e: any, page: number) => {
var newFieldX = e.clientX - rect.left; //x position within the element. e.preventDefault();
var newFieldY = e.clientY - rect.top; //y position within the element. e.stopPropagation();
const signatureField = { if (adding) {
id: -1, console.log("adding to page " + page);
page: page, addField(e, page);
type: FieldType.SIGNATURE, setAdding(false);
positionX: newFieldX.toFixed(0), }
positionY: newFieldY.toFixed(0), }}
Recipient: selectedRecipient, onMouseDown={(e: any, page: number) => {
}; addField(e, page);
}}
upsertField(props?.document, signatureField).then((res) => { ></PDFViewer>
setFields(fields.concat(res)); <div
}); hidden={noRecipients}
}} className="fixed left-0 top-1/3 max-w-xs border border-slate-300 bg-white py-4 pr-5 rounded-md"
></PDFViewer> >
<div hidden={noRecipients} className="fixed left-0 top-1/3 max-w-xs"> <Listbox value={selectedRecipient} onChange={setSelectedRecipient}>
<Listbox value={selectedRecipient} onChange={setSelectedRecipient}> {({ open }) => (
{({ open }) => ( <div className="relative mt-1 mb-2">
<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">
<Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm"> <span className="flex items-center">
<span className="flex items-center"> <span
<span className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
className="inline-block h-4 w-4 flex-shrink-0 rounded-full" style={{ background: stc(selectedRecipient?.email) }}
style={{ background: stc(selectedRecipient?.email) }} />
/> <span className="ml-3 block truncate">
<span className="ml-3 block truncate"> {`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
{`${selectedRecipient?.name} <${selectedRecipient?.email}>`} </span>
</span> </span>
</span> <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> <ChevronUpDownIcon
<ChevronUpDownIcon className="h-5 w-5 text-gray-400"
className="h-5 w-5 text-gray-400" aria-hidden="true"
aria-hidden="true" />
/> </span>
</span> </Listbox.Button>
</Listbox.Button>
<Transition <Transition
show={open} show={open}
as={Fragment} as={Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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"> <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) => ( {props?.document?.Recipient?.map((recipient: any) => (
<Listbox.Option <Listbox.Option
key={recipient?.id} key={recipient?.id}
className={({ active }) => className={({ active }) =>
classNames( classNames(
active ? "text-white bg-neon-dark" : "text-gray-900", active
"relative cursor-default select-none py-2 pl-3 pr-9" ? "text-white bg-neon-dark"
) : "text-gray-900",
} "relative cursor-default select-none py-2 pl-3 pr-9"
value={recipient} )
> }
{({ selected, active }) => ( value={recipient}
<> >
<div className="flex items-center"> {({ selected, active }) => (
<span <>
className="inline-block h-4 w-4 flex-shrink-0 rounded-full" <div className="flex items-center">
style={{ <span
background: stc(recipient?.email), 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> <span
) : null} className={classNames(
</> selected ? "font-semibold" : "font-normal",
)} "ml-3 block truncate"
</Listbox.Option> )}
))} >
</Listbox.Options> {`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
</Transition> </span>
</div> </div>
)}
</Listbox> {selected ? (
<div> <span
<Draggable> className={classNames(
<div active ? "text-white" : "text-neon-dark",
className="ml-1 cursor-move p-3 border-2 border-slate-200 my-2 rounded-md" "absolute inset-y-0 right-0 flex items-center pr-4"
color="secondary" )}
>
<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>
<div>
<RadioGroup
value={selectedFieldType}
onChange={setSelectedFieldType}
onMouseDown={() => {
setAdding(true);
}}
> >
<span <div className="space-y-4">
className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3" {fieldTypes.map((fieldType) => (
style={{ <RadioGroup.Option
background: stc(selectedRecipient?.email), onMouseDown={() => {
}} setSelectedFieldType(fieldType.name);
/> }}
Add Signature Field key={fieldType.name}
</div> value={fieldType.name}
</Draggable> className={({ checked, active }) =>
<div color="secondary" className="ml-1 "> classNames(
<span checked ? "border-neon border-2" : "border-transparent",
className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3" "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"
style={{ )
background: stc(selectedRecipient?.email), }
}} >
/> {({ active, checked }) => (
Add Date Field <>
</div> <span className="flex items-center">
<div color="secondary" className="ml-1 cursor-move"> <span className="flex flex-col text-sm">
<span <RadioGroup.Label
className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3" as="span"
style={{ className="font-medium text-gray-900"
background: stc(selectedRecipient?.email), >
}} <span
/> className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3 align-middle"
Add Text Field 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> </div>
</> </>
); );
function addField(e: any, page: number) {
var rect = e.target.getBoundingClientRect();
var newFieldX = e.clientX - rect.left; //x position within the element.
var newFieldY = e.clientY - rect.top; //y position within the element.
const signatureField = {
id: -1,
page: page,
type: FieldType.SIGNATURE,
positionX: newFieldX.toFixed(0),
positionY: newFieldY.toFixed(0),
Recipient: selectedRecipient,
};
upsertField(props?.document, signatureField).then((res) => {
setFields(fields.concat(res));
});
}
} }
async function upsertField(document: any, field: any): Promise<any> { async function upsertField(document: any, field: any): Promise<any> {

5
apps/web/components/editor/pdf-viewer.jsx
View File

@ -34,7 +34,7 @@ export default function PDFViewer(props) {
return ( return (
<> <>
<div hidden={loading}> <div hidden={loading} onMouseUp={props.onMouseUp}>
<div className="max-w-xs mt-6"></div> <div className="max-w-xs mt-6"></div>
<Document <Document
file={props.pdfUrl} file={props.pdfUrl}
@ -48,6 +48,9 @@ export default function PDFViewer(props) {
onMouseDown={(e) => { onMouseDown={(e) => {
props.onMouseDown(e, index); props.onMouseDown(e, index);
}} }}
onMouseUp={(e) => {
props.onMouseUp(e, index);
}}
key={short.generate().toString()} key={short.generate().toString()}
style={{ style={{
position: "relative", position: "relative",

3
apps/web/pages/api/documents/[id]/fields/index.ts
View File

@ -67,11 +67,8 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
id: +body.id, id: +body.id,
}, },
update: { update: {
type: body.type,
page: +body.page,
positionX: +body.positionX, positionX: +body.positionX,
positionY: +body.positionY, positionY: +body.positionY,
recipientId: body.Recipient.id,
}, },
create: { create: {
documentId: +documentId, documentId: +documentId,