feate:update

src/components/page/prescription/CreatePrescription/CreatePrescription.tsx

@@ -16,8 +16,6 @@ import TextArea from "@/components/utils/FormCustom/components/TextArea";
 
 import SelectForm from "@/components/utils/FormCustom/components/SelectForm";
 
-import UploadMultipleFile from "@/components/utils/UploadMultipleFile";
-
 import { httpRequest } from "@/services";
 
 import prescriptionServices from "@/services/prescriptionServices";
@@ -31,6 +29,7 @@ import { QUERY_KEY } from "@/constant/config/enum";
 import { toastWarn } from "@/common/funcs/toast";
 import { PATH } from "@/constant/config";
 import { useRouter } from "next/navigation";
+import UploadImage from "@/components/utils/UploadImage";
 
 interface PrescriptionItem {
   medicineName: string;
@@ -43,7 +42,7 @@ interface PrescriptionItem {
 interface PrescriptionForm {
   examinationSessionId: string;
   notes: string;
-  prescriptionImg: string;
+  PrescriptionFile: string;
   items: PrescriptionItem[];
 }
 
@@ -62,14 +61,30 @@ const defaultMedicine: PrescriptionItem = {
   instructions: "",
 };
 
+const convertFileToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.readAsDataURL(file);
+
+    reader.onload = () => {
+      resolve(reader.result as string);
+    };
+
+    reader.onerror = (error) => {
+      reject(error);
+    };
+  });
+};
+
 const CreatePrescription = () => {
   const router = useRouter();
-  const [images, setImages] = useState<UploadImageItem[]>([]);
+  const [file, setFile] = useState<any>(null);
 
   const [form, setForm] = useState<PrescriptionForm>({
     examinationSessionId: "",
     notes: "",
-    prescriptionImg: "",
+    PrescriptionFile: "",
     items: [defaultMedicine],
   });
 
@@ -106,7 +121,7 @@ const CreatePrescription = () => {
   const examinationSessionOptions = examinationSessionQuery.data?.items || [];
 
   const createPrescriptionMutation = useMutation({
-    mutationFn: async () => {
+    mutationFn: async (body: { PrescriptionFile: string }) => {
       return await httpRequest({
         showMessageFailed: true,
         showMessageSuccess: true,
@@ -114,9 +129,20 @@ const CreatePrescription = () => {
 
         http: prescriptionServices.createPrescription({
           examinationSessionId: form.examinationSessionId,
+
           notes: form.notes,
-          prescriptionImg: form.prescriptionImg,
-          items: form.items,
+
+          PrescriptionFile: body.PrescriptionFile,
+
+          items: form.items
+            .filter((x) => x.medicineName.trim() !== "")
+            .map((x) => ({
+              medicineName: x.medicineName,
+              dosage: x.dosage,
+              frequency: x.frequency,
+              duration: x.duration,
+              instructions: x.instructions,
+            })),
         }),
       });
     },
@@ -193,11 +219,61 @@ const CreatePrescription = () => {
     }));
   };
 
-  /**
-   * SUBMIT
-   */
-  const handleSubmit = () => {
-    createPrescriptionMutation.mutate();
+  const handleSubmit = async () => {
+    try {
+      /**
+       * VALIDATE
+       */
+      if (!form.examinationSessionId) {
+        return toastWarn({
+          msg: "Vui lòng chọn phiên khám",
+        });
+      }
+
+      if (!file) {
+        return toastWarn({
+          msg: "Vui lòng chọn ảnh đơn thuốc",
+        });
+      }
+
+      /**
+       * UPLOAD IMAGE
+       */
+      let uploadedImage = "";
+
+      if (file) {
+        const formData = new FormData();
+
+        formData.append("file", file);
+
+        /**
+         * API UPLOAD
+         * SỬA uploadServices theo project của bạn
+         */
+        const uploadRes: any = await httpRequest({
+          showMessageFailed: true,
+
+          http: prescriptionServices.uploadImage(formData),
+        });
+
+        /**
+         * BACKEND RESPONSE
+         */
+        uploadedImage =
+          uploadRes?.url || uploadRes?.path || uploadRes?.data?.url || "";
+      }
+
+      /**
+       * CREATE PRESCRIPTION
+       */
+      createPrescriptionMutation.mutate({
+        PrescriptionFile: uploadedImage,
+      });
+    } catch (error: any) {
+      toastWarn({
+        msg: error?.message || "Upload ảnh thất bại",
+      });
+    }
   };
 
   return (
@@ -207,7 +283,7 @@ const CreatePrescription = () => {
         <div className="flex items-center justify-between">
           <div>
             <h2 className="text-[28px] font-semibold text-[#111827]">
-              Thêm đơn thuốc
+              Tạo đơn thuốc
             </h2>
 
             <p className="mt-1 text-sm text-[#697586]">
@@ -221,8 +297,8 @@ const CreatePrescription = () => {
               disabled={createPrescriptionMutation.isPending}
             >
               {createPrescriptionMutation.isPending
-                ? "Đang lưu..."
-                : "Lưu đơn thuốc"}
+                ? "Đang tạo..."
+                : "Tạo đơn thuốc"}
             </CustomButton>
           </div>
         </div>
@@ -265,22 +341,16 @@ const CreatePrescription = () => {
 
             {/* IMAGE */}
             <div className="flex flex-col gap-2">
-              <UploadMultipleFile
-                images={images}
-                setImages={(files: UploadImageItem[]) => {
-                  setImages(files);
-
-                  const imagePath =
-                    files?.[0]?.path ||
-                    files?.[0]?.url ||
-                    files?.[0]?.img ||
-                    "";
-
-                  setForm((prev) => ({
-                    ...prev,
-                    prescriptionImg: imagePath,
-                  }));
-                }}
+              <UploadImage
+                label={
+                  <span>
+                    Hình ảnh đơn thuốc <span style={{ color: "red" }}>*</span>
+                  </span>
+                }
+                name="PrescriptionFile"
+                file={file}
+                setFile={setFile}
+                path={""}
               />
             </div>
 
@@ -292,6 +362,12 @@ const CreatePrescription = () => {
               value={form.notes}
               isBlur
               max={5000}
+              onChangeValue={(value) =>
+                setForm((prev) => ({
+                  ...prev,
+                  notes: String(value),
+                }))
+              }
             />
           </div>
         </div>