🚧 ondelete to editor

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",
-      },
-    }
-  );
-}

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) {}
+}

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>