Merge pull request #25 from deco-sites/feature/association-admin-uplo…

…ad-user-doc

implemented association upload

components/ui/AdminNewDocModal.tsx

@@ -0,0 +1,143 @@
+import { useUI } from "../../sdk/useUI.ts";
+import Modal from "./Modal.tsx";
+import { useState } from "preact/hooks";
+import { h } from "preact";
+import { invoke } from "../../runtime.ts";
+import Icon from "./Icon.tsx";
+
+export interface Props {
+  createType: "association" | "user";
+}
+
+const AdminNewDocModal = (
+  { createType }: Props,
+) => {
+  const [file, setFile] = useState<File>();
+  const [docTitle, setDocTitle] = useState("");
+  const [docCategory, setDocCategory] = useState("");
+  const { displayAssociationAdminNewDoc, userToAdminCreateDoc } = useUI();
+  const [isUploading, setIsUploading] = useState(false);
+
+  const handleStoreDocument = (
+    event: h.JSX.TargetedEvent<HTMLInputElement, Event>,
+  ) => {
+    const fileInput = event.target as HTMLInputElement;
+    if (fileInput.files) {
+      setFile(fileInput.files[0]);
+    }
+  };
+
+  const handleCreate = async () => {
+    setIsUploading(true);
+
+    const formData = new FormData();
+    formData.append("user", userToAdminCreateDoc.value._id);
+    formData.append("file", file!);
+    formData.append("title", docTitle);
+    formData.append("category", docCategory);
+
+    for (const entry of formData.entries()) {
+      console.log(entry[0], entry[1]);
+    }
+
+    try {
+      const response = await fetch(
+        "http://localhost:3000/documents/admin/user",
+        {
+          method: "POST",
+          body: formData,
+          headers: {
+            ContentType: "multipart/form-data",
+            Authorization: localStorage.getItem("AccessToken") || "",
+          },
+        },
+      );
+
+      const res = await response.json();
+
+      console.log({ res });
+
+      const resp = res as { errors?: unknown[]; message?: string };
+
+      if (resp.errors || resp.message) {
+        if (resp.errors) {
+          throw new Error(resp.errors.toString());
+        } else if (resp.message) {
+          throw new Error(resp.message);
+        }
+      }
+
+      setIsUploading(false);
+      displayAssociationAdminNewDoc.value = false;
+      alert("Upload concluído com sucesso");
+    } catch (e) {
+      alert("Ocorreu um erro ao subir o documento. Contacte o suporte");
+      console.log({ erroUpload: e });
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <Modal
+      loading="lazy"
+      open={displayAssociationAdminNewDoc.value}
+      onClose={() => displayAssociationAdminNewDoc.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">
+          Novo documento para{"  "}{createType === "user"
+            ? `paciente ${userToAdminCreateDoc.value.email}`
+            : `Associação`}
+        </h3>
+        <input
+          class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3] bg-white"
+          placeholder="Título do Documento"
+          value={docTitle}
+          onChange={(e) => {
+            setDocTitle(e.currentTarget.value);
+          }}
+        />
+
+        <select
+          onChange={(e) => {
+            setDocCategory(e.currentTarget.value);
+          }}
+          class="select select-primary w-full max-w-xs text-[#8b8b8b] border-none disabled:bg-[#e3e3e3] bg-white"
+        >
+          <option disabled selected>Tipo de Documento</option>
+          <option value="habeas_corpus">Jurídico / Habeas Corpus</option>
+          <option value="medical_prescription">Prescrição Médica</option>
+          <option value="anvisa">Autorização Anvisa</option>
+          <option value="identification">Documento de Identificação</option>
+        </select>
+
+        <label class="form-control w-full max-w-xs">
+          <div class="label">
+            <span class="label-text">Selecione um arquivo</span>
+          </div>
+          <input
+            type="file"
+            class="file-input file-input-primary w-full max-w-xs"
+            onChange={(e) => handleStoreDocument(e)}
+          />
+        </label>
+
+        <button class="btn btn-secondary text-white" onClick={handleCreate}>
+          Subir Documento{"   "}{isUploading
+            ? <span class="loading loading-spinner text-white"></span>
+            : <Icon id="Upload" size={24} />}
+        </button>
+        <button
+          onClick={() => {
+            displayAssociationAdminNewDoc.value = false;
+          }}
+          class="btn btn-ghost uppercase font-medium"
+        >
+          Cancelar
+        </button>
+      </div>
+    </Modal>
+  );
+};
+
+export default AdminNewDocModal;

components/ui/AssociationAdmin.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from "preact/hooks";
 import { invoke } from "../../runtime.ts";
 import PageWrap from "../../components/ui/PageWrap.tsx";
 import Icon from "../../components/ui/Icon.tsx";
+import AdminNewDocModal from "../../islands/AdminNewDocModal.tsx";
 import PreSignupUsersModal from "../../islands/PreSignupUsersModal.tsx";
 import type {
   AssociationUsers,
@@ -37,7 +38,11 @@ function MyAccount() {
   const [page, setPage] = useState<number>();
   const [totalPages, setTotalPages] = useState<number>();
   const [associationUsers, setAssociationUsers] = useState<AssociationUsers>();
-  const { displayPreSignupUsersModal } = useUI();
+  const {
+    displayPreSignupUsersModal,
+    displayAssociationAdminNewDoc,
+    userToAdminCreateDoc,
+  } = useUI();
 
   const handleUploadSelfie = async (
     event: h.JSX.TargetedEvent<HTMLInputElement, Event>,
@@ -291,6 +296,7 @@ function MyAccount() {
                 <PreSignupUsersModal
                   onFinish={() => console.log("on finish")}
                 />
+                <AdminNewDocModal createType="user" />
                 {isLoadingUsers
                   ? <span class="loading loading-spinner text-green-600"></span>
                   : (
@@ -349,7 +355,17 @@ function MyAccount() {
                                 <a>Baixar QR Code</a>
                               </li>
                               <li>
-                                <a>Subir Documento</a>
+                                <a
+                                  onClick={() => {
+                                    displayAssociationAdminNewDoc.value = true;
+                                    userToAdminCreateDoc.value = {
+                                      _id: u._id,
+                                      email: u.email,
+                                    };
+                                  }}
+                                >
+                                  Subir Documento
+                                </a>
                               </li>
                             </ul>
                           </div>

fresh.gen.ts

@@ -9,6 +9,7 @@ import * as $AddToCartButton_shopify from "./islands/AddToCartButton/shopify.tsx
 import * as $AddToCartButton_vnda from "./islands/AddToCartButton/vnda.tsx";
 import * as $AddToCartButton_vtex from "./islands/AddToCartButton/vtex.tsx";
 import * as $AddToCartButton_wake from "./islands/AddToCartButton/wake.tsx";
+import * as $AdminNewDocModal from "./islands/AdminNewDocModal.tsx";
 import * as $AssociationAdmin from "./islands/AssociationAdmin.tsx";
 import * as $CheckoutForm from "./islands/CheckoutForm.tsx";
 import * as $CheckoutUpsellModal from "./islands/CheckoutUpsellModal.tsx";
@@ -61,6 +62,7 @@ const manifest = {
     "./islands/AddToCartButton/vnda.tsx": $AddToCartButton_vnda,
     "./islands/AddToCartButton/vtex.tsx": $AddToCartButton_vtex,
     "./islands/AddToCartButton/wake.tsx": $AddToCartButton_wake,
+    "./islands/AdminNewDocModal.tsx": $AdminNewDocModal,
     "./islands/AssociationAdmin.tsx": $AssociationAdmin,
     "./islands/CheckoutForm.tsx": $CheckoutForm,
     "./islands/CheckoutUpsellModal.tsx": $CheckoutUpsellModal,

islands/AdminNewDocModal.tsx

@@ -0,0 +1,9 @@
+import Component from "deco-sites/ecannadeco/components/ui/AdminNewDocModal.tsx";
+import type { Props } from "deco-sites/ecannadeco/components/ui/AdminNewDocModal.tsx";
+
+function Island(props: Props) {
+  // return <Component />;
+  return <Component {...props} />;
+}
+
+export default Island;

sdk/useUI.ts

@@ -22,10 +22,15 @@ const displayConfirmDeleteDoc = signal(false);
 const displayConfirmCancelSubscription = signal(false);
 const displayCheckoutUpsellModal = signal(false);
 const displayPreSignupUsersModal = signal(false);
+const displayAssociationAdminNewDoc = signal(false);
 const displayPlanLimit = signal(false);
 const updatedData = signal(true);
 const uploadedFile = signal(true);
 const user = signal<UserSession | null>(null);
+const userToAdminCreateDoc = signal({
+  email: "",
+  _id: "",
+});
 
 const state = {
   displayCart,
@@ -41,6 +46,8 @@ const state = {
   displayConfirmCancelSubscription,
   displayCheckoutUpsellModal,
   displayPreSignupUsersModal,
+  displayAssociationAdminNewDoc,
+  userToAdminCreateDoc,
   user,
 };