From 60d27ad8092f471e7c496f68d326112c551a4153 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 14:43:51 +0700
Subject: [PATCH] feat: employee file upload

---
 src/pages/03_customer-management/MainPage.vue | 41 ++++++++++--
 src/pages/03_customer-management/form.ts      |  8 ++-
 src/stores/employee/index.ts                  | 66 ++++++++++++++-----
 src/stores/employee/types.ts                  |  1 +
 4 files changed, 93 insertions(+), 23 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 210fa868..6ece0e07 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2594,7 +2594,7 @@ const emptyCreateDialog = ref(false);
                 @send-ocr="
                   (group: any, file: any) => ocrStore.sendOcr({ file })
                 "
-              /> 
+              />
             </div> -->
 
             <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
@@ -3109,11 +3109,44 @@ const emptyCreateDialog = ref(false);
               />
 
               <UploadFile
-                :treeFile="[]"
+                :tree-file="
+                  Object.values(
+                    currentFromDataEmployee.file?.reduce<
+                      Record<
+                        string,
+                        { label: string; file: { label: string }[] }
+                      >
+                    >((a, c) => {
+                      const _group = c.group || 'other';
+                      if (!a[_group]) {
+                        a[_group] = {
+                          label: _group,
+                          file: [
+                            {
+                              label:
+                                c.name ||
+                                `${c.group}-${c.file?.name || Date.now()}`,
+                            },
+                          ],
+                        };
+                      } else {
+                        a[_group].file.push({
+                          label:
+                            c.name ||
+                            `${c.group}-${c.file?.name || Date.now()}`,
+                        });
+                      }
+                      return a;
+                    }, {}) || {},
+                  )
+                "
+                v-model:file="currentFromDataEmployee.file"
+                hide-action
+                :readonly="!employeeFormState.isEmployeeEdit"
                 :dropdown-list="uploadFileListEmployee"
                 @send-ocr="
-                  async (v: any, f: any) => {
-                    await ocrStore.sendOcr({ file: f });
+                  async (_, file) => {
+                    if (file) await ocrStore.sendOcr({ file });
                   }
                 "
               />
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 4e50f0a7..6a0a1ee1 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -881,11 +881,13 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         ),
         file: _attach
           ? await Promise.all(
-              _attach.map(async (v) => {
-                const group = v.split('-').at(0);
+              _attach.map(async (name) => {
+                const fragment = name.split('-');
+                const group = fragment.length === 1 ? 'other' : fragment.at(0);
 
                 return {
-                  url: await employeeStore.getAttachment(_data.id, v),
+                  url: await employeeStore.getAttachment(_data.id, name),
+                  name,
                   group,
                 };
               }),
diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index 9212f7fa..9a92c04e 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -64,23 +64,41 @@ const useEmployeeStore = defineStore('api-employee', () => {
   }
 
   async function create(data: EmployeeCreate) {
-    const { id, code, image, ...payload } = data;
+    const { id, code, image, file, ...payload } = data;
     const res = await api.post<
       Employee & { profileImageUrl: string; profileImageUploadUrl: string }
     >('/employee', payload, {
       headers: { 'X-Rtid': flowStore.rtid },
     });
 
-    image &&
-      (await axios
-        .put(res.data.profileImageUploadUrl, image, {
-          headers: { 'Content-Type': image?.type },
-          onUploadProgress: (e) => console.log(e),
-        })
-        .catch((e) => console.error(e)));
-
     if (!res) return false;
 
+    if (res.data.id) {
+      if (image) {
+        await api
+          .put(`/employee/${res.data.id}/image`, image, {
+            headers: { 'Content-Type': image?.type },
+            onUploadProgress: (e) => console.log(e),
+          })
+          .catch((e) => console.error(e));
+      }
+      if (file) {
+        const attachmentUpload = file.map(async ({ group, file }) => {
+          if (file) {
+            const _name = file.name;
+            const _ext = _name.split('.').at(-1);
+
+            let filename = group || 'other' + '-' + Date.now();
+
+            if (_ext) filename += '.' + _ext;
+
+            await uploadAttachment(res.data.id, file, filename);
+          }
+        });
+        await Promise.all(attachmentUpload);
+      }
+    }
+
     return res.data;
   }
 
@@ -210,22 +228,38 @@ const useEmployeeStore = defineStore('api-employee', () => {
   }
 
   async function editById(employeeId: string, data: Partial<EmployeeCreate>) {
-    const { id, code, image, ...payload } = data;
+    const { id, code, image, file, ...payload } = data;
     const res = await api.put<
       Employee & { imageUrl: string; profileImageUploadUrl: string }
     >(`/employee/${employeeId}`, payload, {
       headers: { 'X-Rtid': flowStore.rtid },
     });
 
-    image &&
-      (await axios
-        .put(res.data.profileImageUploadUrl, image, {
-          headers: { 'Content-Type': image.type },
+    if (!res) return false;
+
+    if (image) {
+      await api
+        .put(`/employee/${employeeId}/image`, image, {
+          headers: { 'Content-Type': image?.type },
           onUploadProgress: (e) => console.log(e),
         })
-        .catch((e) => console.error(e)));
+        .catch((e) => console.error(e));
+    }
+    if (file) {
+      const attachmentUpload = file.map(async ({ group, file }) => {
+        if (file) {
+          const _name = file.name;
+          const _ext = _name.split('.').at(-1);
 
-    if (!res) return false;
+          let filename = (group || 'other') + '-' + Date.now();
+
+          if (_ext) filename = filename + '.' + _ext;
+
+          await uploadAttachment(employeeId, file, filename);
+        }
+      });
+      await Promise.all(attachmentUpload);
+    }
 
     return res.data;
   }
diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index 2e32368c..8eef6c15 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -110,6 +110,7 @@ export type EmployeeCreate = {
   employeeOtherInfo?: EmployeeOtherCreate;
 
   file?: {
+    name?: string;
     group?: string;
     url?: string;
     file?: File;