feat(registry-edit): previewFile excel Position

src/modules/04_registryPerson/views/edit/components/Table.vue

@@ -21,6 +21,7 @@ import type {
 
 import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
 import DialogSort from "@/modules/04_registryPerson/views/edit/components/DialogSort.vue";
+import DialogExcelPreview from "@/modules/04_registryPerson/views/edit/components/DialogExcelPreview.vue";
 import CurruncyInput from "@/components/CurruncyInput.vue";
 
 const $q = useQuasar();
@@ -53,6 +54,11 @@ const amountRef = ref<any>(null);
 const amountSpecialRef = ref<any>(null);
 const currencyPopupRef = ref<any>(null);
 
+// Excel Preview
+const excelPreviewModal = ref<boolean>(false);
+const selectedExcelFile = ref<File | null>(null);
+const isParsingExcel = ref<boolean>(false);
+
 //Table
 const isLoad = ref<boolean>(true);
 const rowIndex = ref<number>(0);
@@ -851,7 +857,7 @@ async function validateAndSave(
 
 /**
  * ฟังก์ชันอัปโหลดไฟล์ Excel
- * ส่งไฟล์ Excel ไปยัง API โดยตรง
+ * เปิด preview modal ก่อนอัปโหลด
  */
 function handUploadFile() {
   const input = document.createElement("input");
@@ -859,48 +865,73 @@ function handUploadFile() {
   input.accept = ".xlsx,.xls";
 
   input.onchange = async (e: Event) => {
-    try {
-      const file = (e.target as HTMLInputElement).files?.[0];
-      if (!file) return;
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (!file) return;
 
-      // ตรวจสอบชนิดไฟล์โดยตรวจสอบนามสกุล
-      const validExtensions = [".xlsx", ".xls"];
-      const fileExtension = file.name
-        .substring(file.name.lastIndexOf("."))
-        .toLowerCase();
+    // ตรวจสอบชนิดไฟล์โดยตรวจสอบนามสกุล
+    const validExtensions = [".xlsx", ".xls"];
+    const fileExtension = file.name
+      .substring(file.name.lastIndexOf("."))
+      .toLowerCase();
 
-      if (!validExtensions.includes(fileExtension)) {
-        messageError("กรุณาเลือกไฟล์ Excel เท่านั้น (.xlsx, .xls)");
-        return;
-      }
-
-      showLoader();
-      const type = empType.value === "officer" ? "office" : "employee";
-      const formData = new FormData();
-      formData.append("file", file);
-
-      await http.post(
-        config.API.uploadProfile(type, profileId.value),
-        formData,
-        {
-          headers: {
-            "Content-Type": "multipart/form-data",
+    if (!validExtensions.includes(fileExtension)) {
+      messageError($q, {
+        response: {
+          data: {
+            title: "กรุณาเลือกไฟล์ Excel เท่านั้น (.xlsx, .xls)",
           },
-        }
-      );
-
-      success($q, "อัปโหลดไฟล์สำเร็จ");
-      await fetchData();
-    } catch (error) {
-      messageError($q, error);
-    } finally {
-      hideLoader();
+        },
+      });
+      return;
     }
+
+    // เก็บไฟล์และเปิด preview modal
+    selectedExcelFile.value = file;
+    excelPreviewModal.value = true;
   };
 
   input.click();
 }
 
+/**
+ * ฟังก์ชันยืนยันการอัปโหลดไฟล์
+ * ส่งไฟล์ไปยัง API เมื่อ user ยืนยันจาก preview modal
+ */
+async function onConfirmUpload(file: File) {
+  try {
+    isParsingExcel.value = true;
+    showLoader();
+
+    const type = empType.value === "officer" ? "office" : "employee";
+    const formData = new FormData();
+    formData.append("file", file);
+
+    await http.post(config.API.uploadProfile(type, profileId.value), formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+
+    success($q, "อัปโหลดไฟล์สำเร็จ");
+    await fetchData();
+    excelPreviewModal.value = false;
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+    isParsingExcel.value = false;
+  }
+}
+
+/**
+ * ฟังก์ชันยกเลิกการอัปโหลด
+ * ปิด preview modal และล้างค่า
+ */
+function onCancelUpload() {
+  selectedExcelFile.value = null;
+  excelPreviewModal.value = false;
+}
+
 onMounted(async () => {
   await Promise.all([fetchData(), fetchType()]);
 });
@@ -1794,6 +1825,13 @@ onMounted(async () => {
     :fetch-data="fetchData"
     :columns="columns"
   />
+
+  <DialogExcelPreview
+    v-model:modal="excelPreviewModal"
+    :file="selectedExcelFile"
+    @confirm="onConfirmUpload"
+    @cancel="onCancelUpload"
+  />
 </template>
 
 <style scoped></style>