From 44476f8535e8042413acb65a998db75b835603c2 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 20 Jan 2025 14:04:44 +0700
Subject: [PATCH] feat: 09, 11 => handle file upload & url on create

---
 .../09_task-order/order_view/MainPage.vue     | 53 +++++++++++++++----
 src/pages/11_credit-note/FormPage.vue         | 13 ++++-
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/src/pages/09_task-order/order_view/MainPage.vue b/src/pages/09_task-order/order_view/MainPage.vue
index 96896b04..218f6748 100644
--- a/src/pages/09_task-order/order_view/MainPage.vue
+++ b/src/pages/09_task-order/order_view/MainPage.vue
@@ -59,6 +59,7 @@ const fileData = ref<
     loaded: number;
     total: number;
     url?: string;
+    placeholder?: boolean;
   }[]
 >([]);
 
@@ -397,6 +398,11 @@ async function submitForm() {
   });
   if (res && currentFormData.value.id) {
     await taskOrderFormStore.assignFormData(currentFormData.value.id);
+
+    if (fileList.value) {
+      await uploadFile(currentFormData.value.id, fileList.value);
+    }
+
     router.push({
       name: 'TaskOrderView',
       params: { id: currentFormData.value.id },
@@ -445,25 +451,29 @@ async function getFileList(taskId: string) {
   if (fileList)
     fileData.value = await Promise.all(
       fileList.map(async (v) => {
-        const rse = await taskOrderStore.headAttachment({
+        const res = await taskOrderStore.headAttachment({
           parentId: taskId,
           fileId: v,
         });
 
         let contentLength = 0;
-        if (rse) contentLength = Number(rse['content-length']);
+        if (res) contentLength = Number(res['content-length']);
 
         return {
           name: v,
           progress: 1,
           loaded: contentLength,
           total: contentLength,
-          url: `/task/${taskId}/attachment/${v}`,
+          url: `/task-order/${taskId}/attachment/${v}`,
         };
       }),
     );
 }
 
+function fileToUrl(file: File) {
+  return URL.createObjectURL(file);
+}
+
 async function remove(taskId: string, n: string) {
   dialogWarningClose(t, {
     message: t('dialog.message.confirmDelete'),
@@ -508,8 +518,18 @@ async function uploadFile(taskId: string, list: FileList) {
     );
     fileData?.value.push(data);
   }
+  fileList.value = undefined;
 
-  return await Promise.all(promises);
+  const beforeUnloadHandler = (e: Event) => {
+    e.preventDefault();
+  };
+
+  window.addEventListener('beforeunload', beforeUnloadHandler);
+
+  return await Promise.all(promises).then((v) => {
+    window.removeEventListener('beforeunload', beforeUnloadHandler);
+    return v;
+  });
 }
 
 async function completeValidate() {
@@ -821,8 +841,12 @@ watch([currentFormData.value.taskStatus], () => {
             v-model:file-data="fileData"
             :transform-url="
               async (url: string) => {
-                const result = await api.get<string>(url);
-                return result.data;
+                if (state.mode === 'create') {
+                  return url;
+                } else {
+                  const result = await api.get<string>(url);
+                  return result.data;
+                }
               }
             "
             @fetch-file-list="
@@ -833,9 +857,21 @@ watch([currentFormData.value.taskStatus], () => {
             "
             @upload="
               async (f) => {
-                if (!currentFormData.id) return;
-
                 fileList = f;
+                fileData = [];
+
+                Array.from(f).forEach((el) => {
+                  fileData.push({
+                    name: el.name,
+                    progress: 1,
+                    loaded: 0,
+                    total: el.size,
+                    placeholder: true,
+                    url: fileToUrl(el),
+                  });
+                });
+
+                if (!currentFormData.id) return;
 
                 await uploadFile(currentFormData.id, f);
               }
@@ -997,7 +1033,6 @@ watch([currentFormData.value.taskStatus], () => {
                                     fullTaskOrder?.userTask.find(
                                       (l) => l.userId === v.responsibleUser.id,
                                     )?.userTaskStatus;
-                                  console.log(_userStatus);
                                   return (
                                     _userStatus !== UserTaskStatus.Submit &&
                                     _userStatus !== UserTaskStatus.Restart
diff --git a/src/pages/11_credit-note/FormPage.vue b/src/pages/11_credit-note/FormPage.vue
index 0445c5f9..b775184f 100644
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@@ -490,6 +490,10 @@ async function getFileList(creditNoteId: string, slip?: boolean) {
         ));
 }
 
+function fileToUrl(file: File) {
+  return URL.createObjectURL(file);
+}
+
 onMounted(async () => {
   initTheme();
   initLang();
@@ -653,8 +657,12 @@ onMounted(async () => {
             v-model:file-data="attachmentData"
             :transform-url="
               async (url: string) => {
-                const result = await api.get<string>(url);
-                return result.data;
+                if (!creditNoteData?.id) {
+                  return url;
+                } else {
+                  const result = await api.get<string>(url);
+                  return result.data;
+                }
               }
             "
             @fetch-file-list="
@@ -675,6 +683,7 @@ onMounted(async () => {
                     loaded: 0,
                     total: el.size,
                     placeholder: true,
+                    url: fileToUrl(el),
                   });
                 });