From 45fdb8cce5eb2752e5f916f35b63ba9de1f8ea61 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Mon, 13 Feb 2023 18:04:44 +0100
Subject: [PATCH 01/24] editor component, viewer component

---
 apps/web/components/editor/field.tsx      |  4 +-
 apps/web/components/editor/pdf-editor.tsx | 69 ++++++++++++++++++++--
 apps/web/components/editor/pdf-viewer.jsx | 72 ++++-------------------
 3 files changed, 78 insertions(+), 67 deletions(-)

diff --git a/apps/web/components/editor/field.tsx b/apps/web/components/editor/field.tsx
index 60204bcd9..e0509dd81 100644
--- a/apps/web/components/editor/field.tsx
+++ b/apps/web/components/editor/field.tsx
@@ -13,7 +13,7 @@ type FieldPropsType = {
     id: string;
     recipient: string;
   };
-  onPositionChangedHandler: any;
+  onPositionChanged: any;
 };
 
 export default function Field(props: FieldPropsType) {
@@ -31,7 +31,7 @@ export default function Field(props: FieldPropsType) {
     if (!position) return;
     const { x, y } = position;
 
-    props.onPositionChangedHandler({ x, y }, props.field.id);
+    props.onPositionChanged({ x, y }, props.field.id);
   };
 
   return (
diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index 14f350f45..db187c098 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -1,19 +1,78 @@
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
-import React from "react";
+import React, { useState } from "react";
+import { Button } from "@documenso/ui";
+import short from "short-uuid";
+const stc = require("string-to-color");
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
   ssr: false,
 });
 
 export default function PDFEditor(props: any) {
+  const [selectedValue, setSelectedValue] = useState("");
+  const [fields, setFields] = useState<any[]>([]);
   const router = useRouter();
 
+  function onPositionChangedHandler(position: any, id: any) {
+    if (!position) return;
+    const newFields = [...fields];
+    fields.find((e) => e.id == id).position = position;
+
+    // no instant redraw neccessary, postion information for saving or later rerender is enough
+    // setFields(newFields);
+  }
+
   return (
-    <PDFViewer
-      document={props.document}
-      pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
-    />
+    <>
+      <select
+        className="mb-3 inline mt-1 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+        style={{ background: stc(selectedValue) }}
+        value={selectedValue}
+        onChange={(e) => setSelectedValue(e.target.value)}
+      >
+        {props?.document?.Recipient?.map((item: any) => (
+          <option
+            key={item.email + short.generate().toString()}
+            style={{
+              background: stc(
+                item.name ? `${item.name} <${item.email}>` : item.email
+              ),
+            }}
+          >
+            {item.name ? `${item.name} <${item.email}>` : item.email}
+          </option>
+        ))}
+      </select>
+      <Button
+        className="inline ml-1"
+        onClick={() => {
+          setFields(
+            fields.concat({
+              id: short.generate().toString(),
+              page: 0,
+              type: "signature",
+              position: { x: 0, y: -842 },
+              recipient: selectedValue,
+            })
+          );
+        }}
+      >
+        Add Signature Field
+      </Button>
+      <Button color="secondary" className="inline ml-1">
+        Add Date Field
+      </Button>
+      <Button color="secondary" className="inline ml-1">
+        Add Text Field
+      </Button>
+      <PDFViewer
+        document={props.document}
+        fields={fields}
+        onPositionChanged={onPositionChangedHandler}
+        pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
+      />
+    </>
   );
 }
diff --git a/apps/web/components/editor/pdf-viewer.jsx b/apps/web/components/editor/pdf-viewer.jsx
index eaea14027..01bc9fab9 100644
--- a/apps/web/components/editor/pdf-viewer.jsx
+++ b/apps/web/components/editor/pdf-viewer.jsx
@@ -2,21 +2,14 @@ import { Fragment, useState } from "react";
 import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
 import Field from "./field";
 import short from "short-uuid";
-import { Button } from "@documenso/ui";
-const stc = require("string-to-color");
 
 export default function PDFViewer(props) {
   const [file, setFile] = useState("");
-  const [selectedValue, setSelectedValue] = useState("");
   const [numPages, setNumPages] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [fields, setFields] = useState([]);
 
   function onPositionChangedHandler(position, id) {
-    if (!position) return;
-    const newFields = [...fields];
-    fields.find((e) => e.id == id).position = position;
-    // setFields(newFields);
+    props.onPositionChanged(position, id);
   }
 
   function onFileChange(event) {
@@ -36,50 +29,7 @@ export default function PDFViewer(props) {
   return (
     <>
       <div hidden={loading}>
-        <div className="max-w-xs mt-6">
-          <select
-            className="mb-3 inline mt-1 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
-            style={{ background: stc(selectedValue) }}
-            defaultValue={props?.document?.Recipient[0]}
-            value={selectedValue}
-            selectedIndex={0}
-            onChange={(e) => setSelectedValue(e.target.value)}
-          >
-            {props?.document?.Recipient?.map((item) => (
-              <option
-                key={item.email + short.generate().toString()}
-                style={{
-                  background: stc(
-                    item.name ? `${item.name} <${item.email}>` : item.email
-                  ),
-                }}
-              >
-                {item.name ? `${item.name} <${item.email}>` : item.email}
-              </option>
-            ))}
-          </select>
-        </div>
-        <Button
-          className="inline ml-1"
-          onClick={() => {
-            setFields(
-              fields.concat({
-                id: short.generate().toString(),
-                type: "signature",
-                position: { x: 0, y: -842 },
-                recipient: selectedValue,
-              })
-            );
-          }}
-        >
-          Add Signature Field
-        </Button>
-        <Button color="secondary" className="inline ml-1">
-          Add Date Field
-        </Button>
-        <Button color="secondary" className="inline ml-1">
-          Add Text Field
-        </Button>
+        <div className="max-w-xs mt-6"></div>
         <Document
           file={props.pdfUrl}
           onLoadSuccess={onDocumentLoadSuccess}
@@ -109,14 +59,16 @@ export default function PDFViewer(props) {
                     onLoadSuccess={() => setLoading(false)}
                     onRenderError={() => setLoading(false)}
                   ></Page>
-                  {fields.map((item) => (
-                    <Field
-                      key={item.id}
-                      field={item}
-                      className="absolute"
-                      onPositionChangedHandler={onPositionChangedHandler}
-                    ></Field>
-                  ))}
+                  {props?.fields
+                    .filter((item) => item.page === index)
+                    .map((item) => (
+                      <Field
+                        key={item.id}
+                        field={item}
+                        className="absolute"
+                        onPositionChanged={onPositionChangedHandler}
+                      ></Field>
+                    ))}
                 </div>
               </div>
             </Fragment>

From f5130e2b3a10ded46ee0595bbeb0b4a0709b5409 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Mon, 13 Feb 2023 18:12:03 +0100
Subject: [PATCH 02/24] field

---
 apps/web/components/editor/field.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/editor/field.tsx b/apps/web/components/editor/field.tsx
index e0509dd81..b2e3aeba6 100644
--- a/apps/web/components/editor/field.tsx
+++ b/apps/web/components/editor/field.tsx
@@ -45,7 +45,7 @@ export default function Field(props: FieldPropsType) {
       <div
         ref={nodeRef}
         style={{ background: stc(props.field.recipient) }}
-        className="cursor-move opacity-90 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute"
+        className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute"
       >
         <div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
           {/* todo icons */}

From 8fa4f3685611376c87e84f05f08fc0af5a614a6b Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Mon, 13 Feb 2023 18:12:09 +0100
Subject: [PATCH 03/24] ui

---
 apps/web/components/editor/pdf-editor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index db187c098..7ae9dd32d 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -53,7 +53,7 @@ export default function PDFEditor(props: any) {
               id: short.generate().toString(),
               page: 0,
               type: "signature",
-              position: { x: 0, y: -842 },
+              position: { x: 0, y: -600 },
               recipient: selectedValue,
             })
           );

From c5d3e9662337cd7b507ed201dda7a370c9ee65ff Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Mon, 13 Feb 2023 18:13:04 +0100
Subject: [PATCH 04/24] layout

---
 apps/web/components/editor/pdf-viewer.jsx | 46 ++++++++++-------------
 1 file changed, 20 insertions(+), 26 deletions(-)

diff --git a/apps/web/components/editor/pdf-viewer.jsx b/apps/web/components/editor/pdf-viewer.jsx
index 01bc9fab9..5a8f063f6 100644
--- a/apps/web/components/editor/pdf-viewer.jsx
+++ b/apps/web/components/editor/pdf-viewer.jsx
@@ -43,33 +43,27 @@ export default function PDFViewer(props) {
                   position: "relative",
                   background: "green",
                 }}
+                className="mx-auto w-fit"
               >
-                <div
-                  style={{
-                    width: "100%",
-                    background: "red",
-                  }}
-                >
-                  <Page
-                    className="mt-5"
-                    key={`page_${index + 1}`}
-                    pageNumber={index + 1}
-                    renderAnnotationLayer={false}
-                    renderTextLayer={false}
-                    onLoadSuccess={() => setLoading(false)}
-                    onRenderError={() => setLoading(false)}
-                  ></Page>
-                  {props?.fields
-                    .filter((item) => item.page === index)
-                    .map((item) => (
-                      <Field
-                        key={item.id}
-                        field={item}
-                        className="absolute"
-                        onPositionChanged={onPositionChangedHandler}
-                      ></Field>
-                    ))}
-                </div>
+                <Page
+                  className="mt-5"
+                  key={`page_${index + 1}`}
+                  pageNumber={index + 1}
+                  renderAnnotationLayer={false}
+                  renderTextLayer={false}
+                  onLoadSuccess={() => setLoading(false)}
+                  onRenderError={() => setLoading(false)}
+                ></Page>
+                {props?.fields
+                  .filter((item) => item.page === index)
+                  .map((item) => (
+                    <Field
+                      key={item.id}
+                      field={item}
+                      className="absolute"
+                      onPositionChanged={onPositionChangedHandler}
+                    ></Field>
+                  ))}
               </div>
             </Fragment>
           ))}

From 47b57f48d6a2edb360d14180dd561383939fefcb Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Mon, 13 Feb 2023 18:14:00 +0100
Subject: [PATCH 05/24] ui

---
 apps/web/components/editor/pdf-editor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index 7ae9dd32d..db187c098 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -53,7 +53,7 @@ export default function PDFEditor(props: any) {
               id: short.generate().toString(),
               page: 0,
               type: "signature",
-              position: { x: 0, y: -600 },
+              position: { x: 0, y: -842 },
               recipient: selectedValue,
             })
           );

From e267e11ef18c2bdb2f811fe7069ac1b56329ae12 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Mon, 13 Feb 2023 18:14:48 +0100
Subject: [PATCH 06/24] layout

---
 apps/web/components/editor/pdf-viewer.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/editor/pdf-viewer.jsx b/apps/web/components/editor/pdf-viewer.jsx
index 5a8f063f6..5a8276686 100644
--- a/apps/web/components/editor/pdf-viewer.jsx
+++ b/apps/web/components/editor/pdf-viewer.jsx
@@ -69,7 +69,7 @@ export default function PDFViewer(props) {
           ))}
         </Document>
       </div>
-      <div className="mt-10 w-[600px]" hidden={!loading}>
+      <div className="mx-auto mt-10 w-[600px]" hidden={!loading}>
         <div className="ph-item">
           <div className="ph-col-12">
             <div className="ph-picture"></div>

From 569f59520948425dc3408a0b5996ed9dedf8b779 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Mon, 13 Feb 2023 19:33:14 +0100
Subject: [PATCH 07/24] remove document data from GET documents endpoint

---
 packages/lib/query/getDocumentsForUserFromToken.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lib/query/getDocumentsForUserFromToken.ts b/packages/lib/query/getDocumentsForUserFromToken.ts
index fdf5e3087..d8874d32e 100644
--- a/packages/lib/query/getDocumentsForUserFromToken.ts
+++ b/packages/lib/query/getDocumentsForUserFromToken.ts
@@ -17,5 +17,5 @@ export const getDocumentsForUserFromToken = async (
     },
   });
 
-  return documents;
+  return documents.map((e) => ({ ...e, document: "" }));
 };

From 9f30da63d14a211265995871e3e896a037ca3a4c Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Mon, 13 Feb 2023 19:33:26 +0100
Subject: [PATCH 08/24] field and relations

---
 packages/prisma/schema.prisma | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma
index d6ffc6f33..c2e4c0e15 100644
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -15,6 +15,19 @@ model Document {
   status    DocumentStatus @default(DRAFT)
   document  String
   Recipient Recipient[]
+  Field     Field[]
+}
+
+model Field {
+  id          Int        @id @default(autoincrement())
+  documentId  Int
+  recipientId Int?
+  type        FieldType
+  page        Int
+  positionX   Int        @default(0)
+  positionY   Int        @default(0)
+  Document    Document   @relation(fields: [documentId], references: [id], onDelete: Cascade)
+  Recipient   Recipient? @relation(fields: [recipientId], references: [id], onDelete: Cascade)
 }
 
 model Recipient {
@@ -27,6 +40,7 @@ model Recipient {
   signingStatus SigningStatus @default(NOT_SIGNED)
   sendStatus    SendStatus    @default(NOT_SENT)
   Document      Document      @relation(fields: [documentId], references: [id], onDelete: Cascade)
+  Field         Field[]
 }
 
 model User {
@@ -68,6 +82,12 @@ model Session {
   user         User?    @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
+enum FieldType {
+  SIGNATURE
+  DATE
+  TEXT
+}
+
 enum IdentityProvider {
   DOCUMENSO
   GOOGLE

From fefef951f13369bf7795aede9170e9a29773a827 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Mon, 13 Feb 2023 19:43:00 +0100
Subject: [PATCH 09/24] upsert, get and delete fields

---
 .../pages/api/documents/[id]/fields/[fid].ts  | 36 ++++++++
 .../pages/api/documents/[id]/fields/index.ts  | 85 +++++++++++++++++++
 2 files changed, 121 insertions(+)
 create mode 100644 apps/web/pages/api/documents/[id]/fields/[fid].ts
 create mode 100644 apps/web/pages/api/documents/[id]/fields/index.ts

diff --git a/apps/web/pages/api/documents/[id]/fields/[fid].ts b/apps/web/pages/api/documents/[id]/fields/[fid].ts
new file mode 100644
index 000000000..4f55a4d56
--- /dev/null
+++ b/apps/web/pages/api/documents/[id]/fields/[fid].ts
@@ -0,0 +1,36 @@
+import {
+  defaultHandler,
+  defaultResponder,
+  getUserFromToken,
+} from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { NextApiRequest, NextApiResponse } from "next";
+import short from "short-uuid";
+import { Document as PrismaDocument, FieldType } from "@prisma/client";
+import { getDocument } from "@documenso/lib/query";
+
+async function deleteHandler(req: NextApiRequest, res: NextApiResponse) {
+  const user = await getUserFromToken(req, res);
+  const { fid: fieldId } = req.query;
+  const body: {
+    id: number;
+    type: FieldType;
+    page: number;
+    position: { x: number; y: number };
+  } = req.body;
+
+  if (!user) return;
+
+  if (!fieldId) {
+    res.status(400).send("Missing parameter fieldId.");
+    return;
+  }
+
+  await prisma.field.delete({ where: { id: +fieldId } });
+
+  return res.status(200).end();
+}
+
+export default defaultHandler({
+  DELETE: Promise.resolve({ default: defaultResponder(deleteHandler) }),
+});
diff --git a/apps/web/pages/api/documents/[id]/fields/index.ts b/apps/web/pages/api/documents/[id]/fields/index.ts
new file mode 100644
index 000000000..be4db31ce
--- /dev/null
+++ b/apps/web/pages/api/documents/[id]/fields/index.ts
@@ -0,0 +1,85 @@
+import {
+  defaultHandler,
+  defaultResponder,
+  getUserFromToken,
+} from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { NextApiRequest, NextApiResponse } from "next";
+import short from "short-uuid";
+import { Document as PrismaDocument, FieldType } from "@prisma/client";
+import { getDocument } from "@documenso/lib/query";
+
+async function getHandler(req: NextApiRequest, res: NextApiResponse) {
+  const user = await getUserFromToken(req, res);
+  const { id: documentId } = req.query;
+  const body: {
+    id: number;
+    type: FieldType;
+    page: number;
+    position: { x: number; y: number };
+  } = req.body;
+
+  if (!user) return;
+
+  if (!documentId) {
+    res.status(400).send("Missing parameter documentId.");
+    return;
+  }
+
+  // todo encapsulate entity ownerships checks
+
+  const fields = await prisma.field.findMany({
+    where: { documentId: +documentId },
+  });
+
+  return res.status(200).end(JSON.stringify(fields));
+}
+
+async function postHandler(req: NextApiRequest, res: NextApiResponse) {
+  const user = await getUserFromToken(req, res);
+  const { id: documentId } = req.query;
+  const body: {
+    id: number;
+    type: FieldType;
+    page: number;
+    position: { x: number; y: number };
+  } = req.body;
+
+  if (!user) return;
+
+  if (!documentId) {
+    res.status(400).send("Missing parameter documentId.");
+    return;
+  }
+
+  const document: PrismaDocument = await getDocument(+documentId, req, res);
+
+  // todo encapsulate entity ownerships checks
+  if (document.userId !== user.id) {
+    return res.status(401).send("User does not have access to this document.");
+  }
+
+  const field = await prisma.field.upsert({
+    where: {
+      id: +body.id,
+    },
+    update: {
+      positionX: +body.position.x,
+      positionY: +body.position.y,
+    },
+    create: {
+      documentId: +documentId,
+      type: body.type,
+      page: +body.page,
+      positionX: +body.position.x,
+      positionY: +body.position.y,
+    },
+  });
+
+  return res.status(201).end(JSON.stringify(field));
+}
+
+export default defaultHandler({
+  GET: Promise.resolve({ default: defaultResponder(getHandler) }),
+  POST: Promise.resolve({ default: defaultResponder(postHandler) }),
+});

From a43c1f7a91a2dcc2f2d47d6eb77663137eab766e Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 14 Feb 2023 10:58:10 +0100
Subject: [PATCH 10/24] qoc

---
 apps/web/pages/documents/[id]/index.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/web/pages/documents/[id]/index.tsx b/apps/web/pages/documents/[id]/index.tsx
index 2b1121c9b..b688a9c73 100644
--- a/apps/web/pages/documents/[id]/index.tsx
+++ b/apps/web/pages/documents/[id]/index.tsx
@@ -1,7 +1,6 @@
-import { ReactElement, useState } from "react";
+import { ReactElement } from "react";
 import Layout from "../../../components/layout";
 import { NextPageWithLayout } from "../../_app";
-import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
 import { getUserFromToken } from "@documenso/lib/server";
@@ -15,7 +14,6 @@ import {
 import { getDocument } from "@documenso/lib/query";
 import { Document as PrismaDocument } from "@prisma/client";
 import { Button, Breadcrumb } from "@documenso/ui";
-import short from "short-uuid";
 import PDFEditor from "../../../components/editor/pdf-editor";
 
 const DocumentsDetailPage: NextPageWithLayout = (props: any) => {

From 3d9bf1fb67e4e7c570ee7ba7f59c9e1007d2ea00 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 14 Feb 2023 11:12:07 +0100
Subject: [PATCH 11/24] =?UTF-8?q?=F0=9F=90=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/pages/documents/[id]/index.tsx | 24 +++++++++++++-----------
 packages/lib/query/getDocument.ts       |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/web/pages/documents/[id]/index.tsx b/apps/web/pages/documents/[id]/index.tsx
index b688a9c73..08c05acfa 100644
--- a/apps/web/pages/documents/[id]/index.tsx
+++ b/apps/web/pages/documents/[id]/index.tsx
@@ -114,21 +114,23 @@ export async function getServerSideProps(context: any) {
 
   const { id: documentId } = context.query;
 
-  const document: PrismaDocument = await getDocument(
-    +documentId,
-    context.req,
-    context.res
-  );
+  try {
+    const document: PrismaDocument = await getDocument(
+      +documentId,
+      context.req,
+      context.res
+    );
+  } catch (error) {
+    if (!document) {
+      return {
+        notFound: true,
+      };
+    }
+  }
 
   // todo optimize querys
   // todo no intersection groups
 
-  if (!document) {
-    return {
-      notFound: true,
-    };
-  }
-
   return {
     props: {
       document: document,
diff --git a/packages/lib/query/getDocument.ts b/packages/lib/query/getDocument.ts
index d19555f62..f922f4c28 100644
--- a/packages/lib/query/getDocument.ts
+++ b/packages/lib/query/getDocument.ts
@@ -12,7 +12,7 @@ export const getDocument = async (
   if (!documentId) Promise.reject("No documentId");
   if (!req || !res) Promise.reject("No res or req");
 
-  const document: PrismaDocument = await prisma.document.findFirst({
+  const document: PrismaDocument = await prisma.document.findFirstOrThrow({
     where: {
       id: documentId,
       userId: user.id,

From 3bca8327203d0f5d8e5692b8f5272a961744759f Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 14 Feb 2023 11:17:08 +0100
Subject: [PATCH 12/24] =?UTF-8?q?=F0=9F=90=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/pages/documents/[id]/index.tsx | 26 ++++++++++++-------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/apps/web/pages/documents/[id]/index.tsx b/apps/web/pages/documents/[id]/index.tsx
index 08c05acfa..eaab64c24 100644
--- a/apps/web/pages/documents/[id]/index.tsx
+++ b/apps/web/pages/documents/[id]/index.tsx
@@ -120,22 +120,20 @@ export async function getServerSideProps(context: any) {
       context.req,
       context.res
     );
+
+    // todo optimize querys
+    // todo no intersection groups
+
+    return {
+      props: {
+        document: document,
+      },
+    };
   } catch (error) {
-    if (!document) {
-      return {
-        notFound: true,
-      };
-    }
+    return {
+      notFound: true,
+    };
   }
-
-  // todo optimize querys
-  // todo no intersection groups
-
-  return {
-    props: {
-      document: document,
-    },
-  };
 }
 
 DocumentsDetailPage.getLayout = function getLayout(page: ReactElement) {

From 8f17f18d0a16b4bad4b22da311109014c2a91e22 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 14 Feb 2023 12:28:33 +0100
Subject: [PATCH 13/24] =?UTF-8?q?=F0=9F=9A=A7=20field=20positions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/editor/field.tsx      | 12 ++++++++----
 apps/web/components/editor/pdf-editor.tsx |  8 +++++---
 packages/lib/query/getDocument.ts         |  1 +
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/editor/field.tsx b/apps/web/components/editor/field.tsx
index b2e3aeba6..ace442471 100644
--- a/apps/web/components/editor/field.tsx
+++ b/apps/web/components/editor/field.tsx
@@ -10,6 +10,8 @@ type FieldPropsType = {
     color: string;
     type: string;
     position: any;
+    positionX: number;
+    positionY: number;
     id: string;
     recipient: string;
   };
@@ -18,9 +20,10 @@ type FieldPropsType = {
 
 export default function Field(props: FieldPropsType) {
   const [field, setField]: any = useState(props.field);
-  const [position, setPosition]: any = useState(
-    props.field.position || { x: 0, y: -842 }
-  );
+  const [position, setPosition]: any = useState({
+    x: props.field.positionX,
+    y: props.field.positionY,
+  });
   const nodeRef = React.createRef<HTMLDivElement>();
   const onControlledDrag = (e: any, position: any) => {
     const { x, y } = position;
@@ -41,11 +44,12 @@ export default function Field(props: FieldPropsType) {
       position={position}
       onDrag={onControlledDrag}
       onStop={onDragStop}
+      defaultPosition={{ x: 0, y: 0 }}
     >
       <div
         ref={nodeRef}
         style={{ background: stc(props.field.recipient) }}
-        className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute"
+        className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute top-0 left-0"
       >
         <div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
           {/* todo icons */}
diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index db187c098..724935b91 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -12,13 +12,14 @@ const PDFViewer = dynamic(() => import("./pdf-viewer"), {
 
 export default function PDFEditor(props: any) {
   const [selectedValue, setSelectedValue] = useState("");
-  const [fields, setFields] = useState<any[]>([]);
+  const [fields, setFields] = useState<any[]>(props.document.Field);
   const router = useRouter();
 
   function onPositionChangedHandler(position: any, id: any) {
     if (!position) return;
     const newFields = [...fields];
-    fields.find((e) => e.id == id).position = position;
+    fields.find((e) => e.id == id).positionX = position.x;
+    fields.find((e) => e.id == id).positionY = position.y;
 
     // no instant redraw neccessary, postion information for saving or later rerender is enough
     // setFields(newFields);
@@ -53,7 +54,8 @@ export default function PDFEditor(props: any) {
               id: short.generate().toString(),
               page: 0,
               type: "signature",
-              position: { x: 0, y: -842 },
+              positionX: 0,
+              positionY: 0,
               recipient: selectedValue,
             })
           );
diff --git a/packages/lib/query/getDocument.ts b/packages/lib/query/getDocument.ts
index f922f4c28..f317d624c 100644
--- a/packages/lib/query/getDocument.ts
+++ b/packages/lib/query/getDocument.ts
@@ -19,6 +19,7 @@ export const getDocument = async (
     },
     include: {
       Recipient: true,
+      Field: true,
     },
   });
 

From 6febc3d38e281322833d3eaf15f8e6f7a1905210 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 14 Feb 2023 13:06:49 +0100
Subject: [PATCH 14/24] =?UTF-8?q?=F0=9F=9A=A7=20fields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/editor/pdf-editor.tsx     | 62 +++++++++++++++----
 .../pages/api/documents/[id]/fields/index.ts  | 13 ++--
 2 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index 724935b91..3cdec78b1 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/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];
-    fields.find((e) => e.id == id).positionX = position.x;
-    fields.find((e) => e.id == id).positionY = position.y;
+    const movedField = fields.find((e) => e.id == id);
+    movedField.positionX = position.x;
+    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(
-            fields.concat({
-              id: short.generate().toString(),
-              page: 0,
-              type: "signature",
-              positionX: 0,
-              positionY: 0,
-              recipient: selectedValue,
-            })
-          );
+          const signatureField = {
+            id: -1,
+            page: 0,
+            type: FieldType.SIGNATURE,
+            positionX: 0,
+            positionY: 0,
+            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) {}
+}
diff --git a/apps/web/pages/api/documents/[id]/fields/index.ts b/apps/web/pages/api/documents/[id]/fields/index.ts
index be4db31ce..ef3944ae3 100644
--- a/apps/web/pages/api/documents/[id]/fields/index.ts
+++ b/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,
-      positionY: +body.position.y,
+      type: body.type,
+      page: +body.page,
+      positionX: +body.positionX,
+      positionY: +body.positionY,
     },
     create: {
       documentId: +documentId,
       type: body.type,
       page: +body.page,
-      positionX: +body.position.x,
-      positionY: +body.position.y,
+      positionX: +body.positionX,
+      positionY: +body.positionY,
     },
   });
 

From 61792f4ba03fbb51b56f573cb0a7b66a1928ab61 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 14 Feb 2023 13:09:43 +0100
Subject: [PATCH 15/24] =?UTF-8?q?=F0=9F=9A=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/editor/field.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/editor/field.tsx b/apps/web/components/editor/field.tsx
index ace442471..508fcc0a2 100644
--- a/apps/web/components/editor/field.tsx
+++ b/apps/web/components/editor/field.tsx
@@ -53,7 +53,7 @@ export default function Field(props: FieldPropsType) {
       >
         <div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
           {/* todo icons */}
-          Signature
+          {field.type}
           <div className="text-xs text-center">{props.field.recipient}</div>
         </div>
       </div>

From 7b3b9cfad637ff73ed12129915028a96a155bf5f Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 14 Feb 2023 13:11:10 +0100
Subject: [PATCH 16/24] Update README.md

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index df0c6a76e..37eb10ceb 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,10 @@
 
 Documenso aims to be the world's most trusted document signing tool. This trust is built by empowering you to self-host Documenso and review how it works under the hood. Join us in creating the new internet of trust.
 
+## Tools
+
+This repos uses https://gitmoji.dev/ for more expressive commit messages.
+
 ## todos
 
 - Sendgrid setup and nodemailer-sendgrid SMTP hint (import for interchangeability like SMTP)

From 09ff2a255c400c35be3ad01b98691f2154d3b435 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 14 Feb 2023 13:12:16 +0100
Subject: [PATCH 17/24] Update README.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

📝
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 37eb10ceb..59ec81c3b 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ Documenso aims to be the world's most trusted document signing tool. This trust
 
 ## Tools
 
-This repos uses https://gitmoji.dev/ for more expressive commit messages.
+This repos uses 📝 https://gitmoji.dev/ for more expressive commit messages.
 
 ## todos
 

From 39b2bf416ef290ca182c0fe8d27e05f09d788ba4 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 14 Feb 2023 14:26:54 +0100
Subject: [PATCH 18/24] =?UTF-8?q?=F0=9F=9A=A7=20fields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/editor/field.tsx | 39 +++++++++++++++++++++++++++-
 apps/web/pages/documents.tsx         |  2 --
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/editor/field.tsx b/apps/web/components/editor/field.tsx
index 508fcc0a2..507b4bae1 100644
--- a/apps/web/components/editor/field.tsx
+++ b/apps/web/components/editor/field.tsx
@@ -1,8 +1,10 @@
 import { ResizableBox, ResizeCallbackData } from "react-resizable";
 import React, { SyntheticEvent, useEffect, useState } from "react";
 import Draggable from "react-draggable";
-import { CircleStackIcon } from "@heroicons/react/24/outline";
+import { CircleStackIcon, TrashIcon } from "@heroicons/react/24/solid";
 import Logo from "../logo";
+import { IconButton } from "@documenso/ui";
+import toast from "react-hot-toast";
 const stc = require("string-to-color");
 
 type FieldPropsType = {
@@ -52,6 +54,14 @@ export default function Field(props: FieldPropsType) {
         className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute top-0 left-0"
       >
         <div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
+          <IconButton
+            icon={TrashIcon}
+            onClick={(e: any) => {
+              if (confirm("Delete field?")) {
+                deleteField(e, props.field);
+              }
+            }}
+          ></IconButton>
           {/* todo icons */}
           {field.type}
           <div className="text-xs text-center">{props.field.recipient}</div>
@@ -60,3 +70,30 @@ export default function Field(props: FieldPropsType) {
     </Draggable>
   );
 }
+
+function deleteField(event: any, field: any) {
+  if (!field.id) {
+    return;
+  }
+
+  return toast.promise(
+    fetch("/api/documents/" + 0 + "/fields/" + field.id, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(field),
+    }),
+    {
+      loading: "Deleting...",
+      success: "Deleted.",
+      error: "Could not delete :/",
+    },
+    {
+      id: "delete",
+      style: {
+        minWidth: "200px",
+      },
+    }
+  );
+}
diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx
index 0d93a726b..05030fb81 100644
--- a/apps/web/pages/documents.tsx
+++ b/apps/web/pages/documents.tsx
@@ -230,8 +230,6 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                               className="flex-shrink-0 -ml-1 mr-3 h-6 w-6 inline text-neon"
                               aria-hidden="true"
                               onClick={(event) => {
-                                event.preventDefault();
-                                event.stopPropagation();
                                 if (
                                   confirm(
                                     "Are you sure you want to delete this document"

From 6a1c75b16533c978f6466e1d29bfd3e11d8e8ad6 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 14 Feb 2023 16:56:03 +0100
Subject: [PATCH 19/24] =?UTF-8?q?=F0=9F=90=9B=20delte=20document=20button?=
 =?UTF-8?q?=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/pages/documents.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx
index 05030fb81..0d93a726b 100644
--- a/apps/web/pages/documents.tsx
+++ b/apps/web/pages/documents.tsx
@@ -230,6 +230,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                               className="flex-shrink-0 -ml-1 mr-3 h-6 w-6 inline text-neon"
                               aria-hidden="true"
                               onClick={(event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
                                 if (
                                   confirm(
                                     "Are you sure you want to delete this document"

From 2f0fd4757e4c9cd4a4593049cea19be8ff89fa0e Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 14 Feb 2023 17:04:53 +0100
Subject: [PATCH 20/24] =?UTF-8?q?=F0=9F=9A=A7=20ondelete=20to=20editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/editor/field.tsx      | 32 ++-------------
 apps/web/components/editor/pdf-editor.tsx | 49 +++++++++++++++++++++++
 apps/web/components/editor/pdf-viewer.jsx |  5 +++
 3 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/apps/web/components/editor/field.tsx b/apps/web/components/editor/field.tsx
index 507b4bae1..04e76c408 100644
--- a/apps/web/components/editor/field.tsx
+++ b/apps/web/components/editor/field.tsx
@@ -18,6 +18,7 @@ type FieldPropsType = {
     recipient: string;
   };
   onPositionChanged: any;
+  onDelete: any;
 };
 
 export default function Field(props: FieldPropsType) {
@@ -56,9 +57,9 @@ export default function Field(props: FieldPropsType) {
         <div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
           <IconButton
             icon={TrashIcon}
-            onClick={(e: any) => {
+            onClick={(event: any) => {
               if (confirm("Delete field?")) {
-                deleteField(e, props.field);
+                props.onDelete(props.field.id);
               }
             }}
           ></IconButton>
@@ -70,30 +71,3 @@ export default function Field(props: FieldPropsType) {
     </Draggable>
   );
 }
-
-function deleteField(event: any, field: any) {
-  if (!field.id) {
-    return;
-  }
-
-  return toast.promise(
-    fetch("/api/documents/" + 0 + "/fields/" + field.id, {
-      method: "DELETE",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(field),
-    }),
-    {
-      loading: "Deleting...",
-      success: "Deleted.",
-      error: "Could not delete :/",
-    },
-    {
-      id: "delete",
-      style: {
-        minWidth: "200px",
-      },
-    }
-  );
-}
diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index 3cdec78b1..81f2e9b47 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -28,6 +28,19 @@ export default function PDFEditor(props: any) {
     // setFields(newFields);
   }
 
+  function onDeleteHandler(id: any) {
+    const field = fields.find((e) => e.id == id);
+    const fieldIndex = fields.map((item) => item.id).indexOf(id);
+    console.log(fieldIndex);
+    if (fieldIndex > -1) {
+      const newFields = [...fields];
+      newFields.splice(fieldIndex, 1);
+
+      setFields(newFields);
+      deleteField(field);
+    }
+  }
+
   return (
     <>
       <select
@@ -78,6 +91,7 @@ export default function PDFEditor(props: any) {
         document={props.document}
         fields={fields}
         onPositionChanged={onPositionChangedHandler}
+        onDelete={onDeleteHandler}
         pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
       />
     </>
@@ -114,3 +128,38 @@ async function upsertField(document: any, field: any): Promise<any> {
     return created;
   } catch (error) {}
 }
+
+async function deleteField(field: any) {
+  if (!field.id) {
+    return;
+  }
+
+  try {
+    const deleted = await toast.promise(
+      fetch("/api/documents/" + 0 + "/fields/" + field.id, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(field),
+      }).then((res) => {
+        if (!res.ok) {
+          throw new Error(res.status.toString());
+        }
+        return res.json();
+      }),
+      {
+        loading: "Deleting...",
+        success: "Deleted.",
+        error: "Could not delete :/",
+      },
+      {
+        id: "delete",
+        style: {
+          minWidth: "200px",
+        },
+      }
+    );
+    return deleted;
+  } catch (error) {}
+}
diff --git a/apps/web/components/editor/pdf-viewer.jsx b/apps/web/components/editor/pdf-viewer.jsx
index 5a8276686..abb03bf0d 100644
--- a/apps/web/components/editor/pdf-viewer.jsx
+++ b/apps/web/components/editor/pdf-viewer.jsx
@@ -12,6 +12,10 @@ export default function PDFViewer(props) {
     props.onPositionChanged(position, id);
   }
 
+  function onDeleteHandler(id) {
+    props.onDelete(id);
+  }
+
   function onFileChange(event) {
     setFile(event.target.files[0]);
   }
@@ -62,6 +66,7 @@ export default function PDFViewer(props) {
                       field={item}
                       className="absolute"
                       onPositionChanged={onPositionChangedHandler}
+                      onDelete={onDeleteHandler}
                     ></Field>
                   ))}
               </div>

From dd9b8a7f7d46793ec66e6f709a32c728162d5102 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Wed, 15 Feb 2023 13:15:41 +0100
Subject: [PATCH 21/24] =?UTF-8?q?=F0=9F=90=9B=20Delete=20button=20drags=20?=
 =?UTF-8?q?field=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/editor/field.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/editor/field.tsx b/apps/web/components/editor/field.tsx
index 04e76c408..47feda6bc 100644
--- a/apps/web/components/editor/field.tsx
+++ b/apps/web/components/editor/field.tsx
@@ -48,6 +48,7 @@ export default function Field(props: FieldPropsType) {
       onDrag={onControlledDrag}
       onStop={onDragStop}
       defaultPosition={{ x: 0, y: 0 }}
+      cancel="strong"
     >
       <div
         ref={nodeRef}
@@ -55,7 +56,13 @@ export default function Field(props: FieldPropsType) {
         className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute top-0 left-0"
       >
         <div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
+          {/* todo icons */}
+          {field.type}
+          <div className="text-xs text-center">{props.field.recipient}</div>
+        </div>
+        <strong>
           <IconButton
+            className="absolute top-0 right-0"
             icon={TrashIcon}
             onClick={(event: any) => {
               if (confirm("Delete field?")) {
@@ -63,10 +70,7 @@ export default function Field(props: FieldPropsType) {
               }
             }}
           ></IconButton>
-          {/* todo icons */}
-          {field.type}
-          <div className="text-xs text-center">{props.field.recipient}</div>
-        </div>
+        </strong>
       </div>
     </Draggable>
   );

From d215fdc0472be36c0780f5abdb9edb90460cc9f9 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Wed, 15 Feb 2023 13:16:09 +0100
Subject: [PATCH 22/24] =?UTF-8?q?=F0=9F=90=9B=20delete=20field=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/editor/pdf-editor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index 81f2e9b47..78052a0b3 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -146,7 +146,7 @@ async function deleteField(field: any) {
         if (!res.ok) {
           throw new Error(res.status.toString());
         }
-        return res.json();
+        return res;
       }),
       {
         loading: "Deleting...",

From 6b747b0eb479ebb60126ff030cb04857eb4436bb Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Wed, 15 Feb 2023 13:28:29 +0100
Subject: [PATCH 23/24] =?UTF-8?q?=F0=9F=9A=B8=20delete=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/editor/pdf-editor.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/editor/pdf-editor.tsx b/apps/web/components/editor/pdf-editor.tsx
index 78052a0b3..cbd3552d8 100644
--- a/apps/web/components/editor/pdf-editor.tsx
+++ b/apps/web/components/editor/pdf-editor.tsx
@@ -33,11 +33,12 @@ export default function PDFEditor(props: any) {
     const fieldIndex = fields.map((item) => item.id).indexOf(id);
     console.log(fieldIndex);
     if (fieldIndex > -1) {
-      const newFields = [...fields];
-      newFields.splice(fieldIndex, 1);
-
-      setFields(newFields);
-      deleteField(field);
+      const fieldWithoutRemoved = [...fields];
+      const removedField = fieldWithoutRemoved.splice(fieldIndex, 1);
+      setFields(fieldWithoutRemoved);
+      deleteField(field).catch((err) => {
+        setFields(fieldWithoutRemoved.concat(removedField));
+      });
     }
   }
 
@@ -135,7 +136,7 @@ async function deleteField(field: any) {
   }
 
   try {
-    const deleted = await toast.promise(
+    const deleted = toast.promise(
       fetch("/api/documents/" + 0 + "/fields/" + field.id, {
         method: "DELETE",
         headers: {

From 0ad1189f4f7aad6292fee83db74f3334143bac39 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Wed, 15 Feb 2023 13:33:03 +0100
Subject: [PATCH 24/24] =?UTF-8?q?=F0=9F=9A=B8=20delete=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/editor/field.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/editor/field.tsx b/apps/web/components/editor/field.tsx
index 47feda6bc..259a8ac0b 100644
--- a/apps/web/components/editor/field.tsx
+++ b/apps/web/components/editor/field.tsx
@@ -5,6 +5,7 @@ import { CircleStackIcon, TrashIcon } from "@heroicons/react/24/solid";
 import Logo from "../logo";
 import { IconButton } from "@documenso/ui";
 import toast from "react-hot-toast";
+import { XCircleIcon } from "@heroicons/react/20/solid";
 const stc = require("string-to-color");
 
 type FieldPropsType = {
@@ -62,12 +63,11 @@ export default function Field(props: FieldPropsType) {
         </div>
         <strong>
           <IconButton
-            className="absolute top-0 right-0"
-            icon={TrashIcon}
+            className="absolute top-0 right-0 -m-5"
+            color="secondary"
+            icon={XCircleIcon}
             onClick={(event: any) => {
-              if (confirm("Delete field?")) {
-                props.onDelete(props.field.id);
-              }
+              props.onDelete(props.field.id);
             }}
           ></IconButton>
         </strong>