🚸 drag and drop field ux, api

apps/web/components/editor/pdf-editor.tsx

@@ -6,10 +6,11 @@ import { Button } from "@documenso/ui";
 import short from "short-uuid";
 import toast from "react-hot-toast";
 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 { classNames } from "@documenso/lib";
 import Draggable from "react-draggable";
+import Logo from "../logo";
 const stc = require("string-to-color");
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
@@ -22,13 +23,22 @@ export default function PDFEditor(props: any) {
   );
   const noRecipients = props?.document?.Recipient?.length === 0;
   const [fields, setFields] = useState<any[]>(props.document.Field);
+  const [adding, setAdding] = useState(false);
   const router = useRouter();
+  const fieldTypes = [
+    { name: "Signature" },
+    { name: "Text" },
+    { name: "Date" },
+  ];
+  const [selectedFieldType, setSelectedFieldType] = useState(
+    fieldTypes[0].name
+  );
 
   function onPositionChangedHandler(position: any, id: any) {
     if (!position) return;
     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);
 
     // no instant redraw neccessary, postion information for saving or later rerender is enough
@@ -50,6 +60,7 @@ export default function PDFEditor(props: any) {
 
   return (
     <>
+      <div>
         <PDFViewer
           readonly={false}
           document={props.document}
@@ -57,29 +68,27 @@ export default function PDFEditor(props: any) {
           onPositionChanged={onPositionChangedHandler}
           onDelete={onDeleteHandler}
           pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
+          onMouseUp={(e: any, page: number) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (adding) {
+              console.log("adding to page " + page);
+              addField(e, page);
+              setAdding(false);
+            }
+          }}
           onMouseDown={(e: any, page: number) => {
-          var rect = e.target.getBoundingClientRect();
+            addField(e, page);
-          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));
-          });
           }}
         ></PDFViewer>
-      <div hidden={noRecipients} className="fixed left-0 top-1/3 max-w-xs">
+        <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"
+        >
           <Listbox value={selectedRecipient} onChange={setSelectedRecipient}>
             {({ open }) => (
               <div className="relative mt-1 mb-2">
-              <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">
+                <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"
@@ -110,7 +119,9 @@ export default function PDFEditor(props: any) {
                         key={recipient?.id}
                         className={({ active }) =>
                           classNames(
-                          active ? "text-white bg-neon-dark" : "text-gray-900",
+                            active
+                              ? "text-white bg-neon-dark"
+                              : "text-gray-900",
                             "relative cursor-default select-none py-2 pl-3 pr-9"
                           )
                         }
@@ -157,43 +168,80 @@ export default function PDFEditor(props: any) {
               </div>
             )}
           </Listbox>
+          <hr className="m-3 border-slate-300"></hr>
           <div>
-          <Draggable>
+            <RadioGroup
-            <div
+              value={selectedFieldType}
-              className="ml-1 cursor-move p-3 border-2 border-slate-200 my-2 rounded-md"
+              onChange={setSelectedFieldType}
-              color="secondary"
+              onMouseDown={() => {
+                setAdding(true);
+              }}
+            >
+              <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"
+                                className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3 align-middle"
                                 style={{
                                   background: stc(selectedRecipient?.email),
                                 }}
                               />
-              Add Signature Field
+                              <span className="align-middle">
+                                {" "}
+                                {fieldType.name}
+                              </span>
+                            </RadioGroup.Label>
+                          </span>
+                        </span>
+                      </>
+                    )}
+                  </RadioGroup.Option>
+                ))}
               </div>
-          </Draggable>
+            </RadioGroup>
-          <div color="secondary" className="ml-1 ">
-            <span
-              className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
-              style={{
-                background: stc(selectedRecipient?.email),
-              }}
-            />
-            Add Date Field
-          </div>
-          <div color="secondary" className="ml-1 cursor-move">
-            <span
-              className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3"
-              style={{
-                background: stc(selectedRecipient?.email),
-              }}
-            />
-            Add Text Field
           </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> {

apps/web/components/editor/pdf-viewer.jsx

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

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

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