Merge pull request #11 from deco-sites/feature/delete-document

Feature/delete document
deco-sites · Apr 5, 2024 · 52ef96a · 52ef96a
2 parents 7a3de53 + 695b329
commit 52ef96a
Show file tree

Hide file tree

Showing 10 changed files with 515 additions and 141 deletions.
diff --git a/actions/createTicket.ts b/actions/createTicket.ts
@@ -0,0 +1,47 @@
+export interface Props {
+  email: string;
+  subject: string;
+  content: string;
+}
+
+const signUpCognito = async (
+  props: Props,
+  _req: Request,
+): Promise<unknown | null> => {
+  const params = {
+    fields: [
+      {
+        name: "email",
+        value: props.email,
+      },
+      {
+        name: "TICKET.subject",
+        value: props.subject,
+      },
+      {
+        name: "TICKET.content",
+        value: props.content,
+      },
+    ],
+  };
+  try {
+    const response = await fetch(
+      `https://api.hsforms.com/submissions/v3/integration/submit/43817859/88ccb64a-bb13-4c72-ade6-1bb9e6157946`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(params),
+      },
+    );
+
+    const res = await response.json();
+    return res;
+  } catch (e) {
+    // console.log({ e });
+    return e;
+  }
+};
+
+export default signUpCognito;
diff --git a/actions/deleteDocument.ts b/actions/deleteDocument.ts
@@ -0,0 +1,31 @@
+export interface Props {
+  docId: string;
+  token: string;
+}
+
+const signUpCognito = async (
+  props: Props,
+  _req: Request,
+): Promise<unknown | null> => {
+  console.log({ docId: props.docId });
+  try {
+    const response = await fetch(
+      `http://localhost:3000/documents/${props.docId}`,
+      {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: props.token,
+        },
+      },
+    );
+
+    const res = await response.json();
+    return res;
+  } catch (e) {
+    // console.log({ e });
+    return e;
+  }
+};
+
+export default signUpCognito;
diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
@@ -48,7 +48,9 @@ function Modal(props: Props) {
       />
       <div class="modal">
         {!lazy.value && children}
-        <label class="modal-backdrop" for={id}>Close</label>
+        <label class="modal-backdrop fixed w-screen h-screen" for={id}>
+          Close
+        </label>
       </div>
     </>
   );

diff --git a/components/ui/MyDocs.tsx b/components/ui/MyDocs.tsx
@@ -1,45 +1,126 @@
 import Icon from "../../components/ui/Icon.tsx";
 import Modal from "../../components/ui/Modal.tsx";
 import PageWrap from "../../components/ui/PageWrap.tsx";
+import Loading from "../../components/daisy/Loading.tsx";
 import { useEffect, useState } from "preact/hooks";
 import { useUI } from "../../sdk/useUI.ts";
 import { h } from "preact";
 import { invoke } from "../../runtime.ts";
 
 interface DocListType {
+  _id: string;
   title: string;
   file_url: string;
   created_at: Date;
   category: string;
   status: string;
 }
 
-const DocList = ({ docs }: { docs: DocListType[] }) => {
-  const { displayNewDocModal } = useUI();
+const DocList = (
+  { docs, onFinishDelete }: { docs: DocListType[]; onFinishDelete: () => void },
+) => {
+  const { displayNewDocModal, displayConfirmDeleteDoc } = useUI();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [deleteId, setDeleteId] = useState("");
+
+  const handleDelete = async ({ id }: { id: string }) => {
+    setIsDeleting(true);
+    try {
+      const r = await invoke["deco-sites/ecannadeco"].actions.deleteDocument({
+        docId: id,
+        token: localStorage.getItem("AccessToken") || "",
+      });
+
+      const resp = r as { message?: string };
+
+      if (resp.message) {
+        alert(`Algo deu errado: ${resp.message}`);
+      } else {
+        onFinishDelete();
+      }
+
+      setIsDeleting(false);
+    } catch (e) {
+      console.log({ e });
+      alert("Não foi possível apagar o documento. Tente mais tarde.");
+      setIsDeleting(false);
+    }
+  };
+
+  const ModalConfirmDelete = ({ id }: { id: string }) => {
+    return (
+      <Modal
+        open={displayConfirmDeleteDoc.value}
+        onClose={() => displayConfirmDeleteDoc.value = false}
+      >
+        <div class="flex flex-col p-16 gap-3 bg-[#EDEDED] rounded-xl">
+          <h3 class="text-2xl text-[#8b8b8b] font-semibold text-center">
+            Tem certeza que deseja deletar este documento?
+          </h3>
+          <div class="flex flex-col items-center gap-2">
+            <button
+              class="btn bg-red-500 text-white"
+              onClick={() => {
+                handleDelete({ id });
+                displayConfirmDeleteDoc.value = false;
+              }}
+            >
+              Deletar
+            </button>
+            <button
+              class="btn btn-ghost"
+              onClick={() => {
+                setDeleteId("");
+                displayConfirmDeleteDoc.value = false;
+              }}
+            >
+              Cancelar
+            </button>
+          </div>
+        </div>
+      </Modal>
+    );
+  };
+
   if (docs.length) {
     return (
-      <ul>
-        {docs.map((d) => {
-          return (
-            <li class="flex items-center gap-4">
-              <a class="w-full" href={d.file_url}>
-                <div class="flex justify-between rounded-md bg-[#C8C8C8] w-full px-5 h-10 items-center">
-                  <div class="flex gap-2">
-                    <span class="text-[#8F8D8D]">
-                      <Icon id="Anexo" size={24} />
+      <>
+        <ul>
+          {docs.map((d) => {
+            return (
+              <li class="flex items-center gap-4">
+                <a class="w-full" href={d.file_url}>
+                  <div class="flex justify-between rounded-md bg-[#C8C8C8] w-full px-5 h-10 items-center">
+                    <div class="flex gap-2">
+                      <span class="text-[#8F8D8D]">
+                        <Icon id="Anexo" size={24} />
+                      </span>
+                      <span class="text-[#393939] font-semibold">
+                        {d.title}
+                      </span>
+                    </div>
+                    <span class="text-[#8F8D8D] flex justify-end w-6">
+                      <Icon id="Download" height={19} />
                     </span>
-                    <span class="text-[#393939] font-semibold">{d.title}</span>
                   </div>
-                  <span class="text-[#8F8D8D] flex justify-end w-6">
-                    <Icon id="Download" height={19} />
-                  </span>
-                </div>
-              </a>
-              <Icon id="Trash" size={24} />
-            </li>
-          );
-        })}
-      </ul>
+                </a>
+                <ModalConfirmDelete id={d._id} />
+                {isDeleting
+                  ? <Loading style="loading-spinner" size="loading-md" />
+                  : (
+                    <Icon
+                      onClick={() => {
+                        displayConfirmDeleteDoc.value = true;
+                      }}
+                      id="Trash"
+                      size={24}
+                    />
+                  )}
+              </li>
+            );
+          })}
+        </ul>
+      </>
     );
   } else {
     return (
@@ -106,8 +187,6 @@ const NewDocModal = ({ onFinishCreate }: { onFinishCreate: () => void }) => {
     formData.append("title", docTitle);
     formData.append("category", docCategory);
 
-    console.log({ file, docTitle, docCategory });
-
     try {
       const response = await fetch("http://localhost:3000/documents", {
         method: "POST",
@@ -216,7 +295,6 @@ function MyDocs() {
       invoke["deco-sites/ecannadeco"].actions.getDocs({
         token: accessToken,
       }).then((r) => {
-        console.log({ documents: r });
         setDocs((r as { docs: DocListType[] }).docs);
         setIsLoading(false);
       });
@@ -261,29 +339,29 @@ function MyDocs() {
       </div>
       <div class="flex flex-col gap-3">
         <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
-          Dados Pessoais
+          Documentos de Anvisa
         </h2>
         {isLoading
           ? <span class="loading loading-spinner text-black"></span>
-          : <DocList docs={anvisaDocs} />}
+          : <DocList onFinishDelete={getDocuments} docs={anvisaDocs} />}
         <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
           Documentos Médicos
         </h2>
         {isLoading
           ? <span class="loading loading-spinner text-black"></span>
-          : <DocList docs={medicalDocs} />}
+          : <DocList onFinishDelete={getDocuments} docs={medicalDocs} />}
         <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
           Documentos Judiciais
         </h2>
         {isLoading
           ? <span class="loading loading-spinner text-black"></span>
-          : <DocList docs={habeasDocs} />}
+          : <DocList onFinishDelete={getDocuments} docs={habeasDocs} />}
         <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
           Documentos de Identificação
         </h2>
         {isLoading
           ? <span class="loading loading-spinner text-black"></span>
-          : <DocList docs={idDocs} />}
+          : <DocList onFinishDelete={getDocuments} docs={idDocs} />}
       </div>
     </PageWrap>
   );