🚧 fields

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

@@ -4,6 +4,8 @@ import dynamic from "next/dynamic";
 import React, { useState } from "react";
 import { Button } from "@documenso/ui";
 import short from "short-uuid";
+import toast from "react-hot-toast";
+import { FieldType } from "@prisma/client";
 const stc = require("string-to-color");
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
@@ -17,9 +19,10 @@ export default function PDFEditor(props: any) {
 
   function onPositionChangedHandler(position: any, id: any) {
     if (!position) return;
-    const newFields = [...fields];
+    const movedField = fields.find((e) => e.id == id);
-    fields.find((e) => e.id == id).positionX = position.x;
+    movedField.positionX = position.x;
-    fields.find((e) => e.id == id).positionY = position.y;
+    movedField.positionY = position.y;
+    upsertField(props.document, movedField);
 
     // no instant redraw neccessary, postion information for saving or later rerender is enough
     // setFields(newFields);
@@ -49,16 +52,18 @@ export default function PDFEditor(props: any) {
       <Button
         className="inline ml-1"
         onClick={() => {
-          setFields(
+          const signatureField = {
-            fields.concat({
+            id: -1,
-              id: short.generate().toString(),
+            page: 0,
-              page: 0,
+            type: FieldType.SIGNATURE,
-              type: "signature",
+            positionX: 0,
-              positionX: 0,
+            positionY: 0,
-              positionY: 0,
+            recipient: selectedValue,
-              recipient: selectedValue,
+          };
-            })
+
-          );
+          upsertField(props?.document, signatureField).then((res) => {
+            setFields(fields.concat(res));
+          });
         }}
       >
         Add Signature Field
@@ -78,3 +83,34 @@ export default function PDFEditor(props: any) {
     </>
   );
 }
+
+async function upsertField(document: any, field: any): Promise<any> {
+  try {
+    const created = await toast.promise(
+      fetch("/api/documents/" + document.id + "/fields", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(field),
+      }).then((res) => {
+        if (!res.ok) {
+          throw new Error(res.status.toString());
+        }
+        return res.json();
+      }),
+      {
+        loading: "Saving...",
+        success: "Saved.",
+        error: "Could not save :/",
+      },
+      {
+        id: "saving field",
+        style: {
+          minWidth: "200px",
+        },
+      }
+    );
+    return created;
+  } catch (error) {}
+}

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

@@ -42,7 +42,8 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     id: number;
     type: FieldType;
     page: number;
-    position: { x: number; y: number };
+    positionX: number;
+    positionY: number;
   } = req.body;
 
   if (!user) return;
@@ -64,15 +65,17 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
       id: +body.id,
     },
     update: {
-      positionX: +body.position.x,
+      type: body.type,
-      positionY: +body.position.y,
+      page: +body.page,
+      positionX: +body.positionX,
+      positionY: +body.positionY,
     },
     create: {
       documentId: +documentId,
       type: body.type,
       page: +body.page,
-      positionX: +body.position.x,
+      positionX: +body.positionX,
-      positionY: +body.position.y,
+      positionY: +body.positionY,
     },
   });