From 685ad0cc54847475b360749d304b3be2f8600afe Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 11 Sep 2024 16:53:08 +0700
Subject: [PATCH] refactor: employee new img dialog

---
 .../FormEmployeePassport.vue                  |   2 +-
 .../03_customer-management/TableEmpoloyee.vue |   8 +-
 .../employee/BasicInformation.vue             |   2 +-
 src/pages/03_customer-management/MainPage.vue | 162 +++++++++++++++---
 src/pages/03_customer-management/form.ts      |  40 +++--
 src/stores/employee/index.ts                  |  94 ++++++++--
 src/stores/employee/types.ts                  |   3 +-
 7 files changed, 254 insertions(+), 57 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 24c8ed83..4b9f4c8e 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -95,7 +95,7 @@ watch(
         name="mdi-passport"
         style="background-color: var(--surface-3)"
       />
-      {{ $t(`${title}`) }}
+      {{ title }}
     </div>
 
     <div class="col-12 row q-col-gutter-sm">
diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
index 6ca31472..de871d8a 100644
--- a/src/components/03_customer-management/TableEmpoloyee.vue
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { calculateAge, dateFormat } from 'src/utils/datetime';
+import { baseUrl } from 'src/stores/utils';
 
 import PersonCard from 'components/shared/PersonCard.vue';
 import KebabAction from '../shared/KebabAction.vue';
@@ -121,7 +122,7 @@ defineEmits<{
                   <q-avatar size="md">
                     <q-img
                       :src="
-                        props.row.profileImageUrl ||
+                        `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
                         '/images/employee-avatar.png'
                       "
                       class="text-center"
@@ -248,7 +249,10 @@ defineEmits<{
               $i18n.locale === 'eng'
                 ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
                 : `${props.row.firstName} ${props.row.lastName} `.trim(),
-            img: props.row.profileImageUrl || '/images/employee-avatar.png',
+            img:
+              `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
+              '/images/employee-avatar.png',
+            fallbackImg: '/images/employee-avatar.png',
             male: props.row.gender === 'male',
             female: props.row.gender === 'female',
             detail: [
diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index 1b10fbdb..284143a7 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -273,7 +273,7 @@ onMounted(() => {
                       '-' + ' ' + scope.opt.customer.lastName
                 }}
 
-                {{ $t('address') }}
+                {{ $t('general.address') }}
                 {{
                   $i18n.locale === 'eng'
                     ? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 8dcf03fd..fbb395e9 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -483,7 +483,11 @@ async function openHistory(id: string) {
 async function editCustomerForm(id: string) {
   await customerFormStore.assignFormData(id);
   await fetchListOfOptionBranch();
-  await fetchImageList(id, customerFormData.value.selectedImage || '');
+  await fetchImageList(
+    id,
+    customerFormData.value.selectedImage || '',
+    'customer',
+  );
   customerFormState.value.dialogType = 'edit';
   customerFormState.value.drawerModal = true;
   customerFormState.value.editCustomerId = id;
@@ -491,6 +495,11 @@ async function editCustomerForm(id: string) {
 
 async function editEmployeeFormPersonal(id: string) {
   await employeeFormStore.assignFormDataEmployee(id);
+  await fetchImageList(
+    id,
+    currentFromDataEmployee.value.selectedImage || '',
+    'employee',
+  );
   employeeFormState.value.isEmployeeEdit = true;
   employeeFormState.value.dialogType = 'edit';
   employeeFormState.value.drawerModal = true;
@@ -506,6 +515,7 @@ function employeeConfirmUnsave(close = true) {
     message: t('form.warning.unsave'),
     action: () => {
       employeeFormStore.resetFormDataEmployee();
+      onCreateImageList.value = { selectedImage: '', list: [] };
       employeeFormState.value.editReadonly = true;
       employeeFormState.value.dialogModal = !close;
       employeeFormState.value.drawerModal = !close;
@@ -572,12 +582,20 @@ function returnCountryCode(country: string) {
   return tempValue?.value;
 }
 
-async function fetchImageList(id: string, selectedName: string) {
-  const res = await customerStore.fetchImageListById(id);
+async function fetchImageList(
+  id: string,
+  selectedName: string,
+  type: 'customer' | 'employee',
+) {
+  const res =
+    type === 'customer'
+      ? await customerStore.fetchImageListById(id)
+      : await employeeStore.fetchImageListById(id);
   imageList.value = {
     selectedImage: selectedName,
-    list: res.map((n: string) => `customer/${id}/image/${n}`),
+    list: res.map((n: string) => `${type}/${id}/image/${n}`),
   };
+
   return res;
 }
 
@@ -1354,12 +1372,17 @@ const emptyCreateDialog = ref(false);
                               :columns-employee="columnsEmployee"
                               @history="(item: any) => {}"
                               @view="
-                                (item: any) => {
+                                async (item: any) => {
                                   employeeFormState.drawerModal = true;
                                   employeeFormState.isEmployeeEdit = false;
                                   employeeFormStore.assignFormDataEmployee(
                                     item.id,
                                   );
+                                  await fetchImageList(
+                                    item.id,
+                                    item.selectedImage || '',
+                                    'employee',
+                                  );
                                 }
                               "
                               @edit="
@@ -1548,10 +1571,15 @@ const emptyCreateDialog = ref(false);
                     :field-selected="fieldSelected"
                     @history="(item: any) => {}"
                     @view="
-                      (item: any) => {
+                      async (item: any) => {
                         employeeFormState.drawerModal = true;
                         employeeFormState.isEmployeeEdit = false;
                         employeeFormStore.assignFormDataEmployee(item.id);
+                        await fetchImageList(
+                          item.id,
+                          item.selectedImage || '',
+                          'employee',
+                        );
                       }
                     "
                     @edit="(item: any) => editEmployeeFormPersonal(item.id)"
@@ -1702,7 +1730,12 @@ const emptyCreateDialog = ref(false);
     no-app-box
     width="40vw"
     height="250px"
-    :close="() => (emptyCreateDialog = false)"
+    :close="
+      () => {
+        emptyCreateDialog = false;
+        onCreateImageList = { selectedImage: '', list: [] };
+      }
+    "
   >
     <div class="full-height row q-pa-md">
       <ItemCard
@@ -1730,10 +1763,16 @@ const emptyCreateDialog = ref(false);
     :on-open="
       async () => {
         customerFormStore.resetForm(customerFormState.dialogType === 'create');
+        onCreateImageList = { selectedImage: '', list: [] };
         await fetchListOfOptionBranch();
       }
     "
-    :on-close="() => (customerFormState.dialogModal = false)"
+    :on-close="
+      () => {
+        customerFormState.dialogModal = false;
+        onCreateImageList = { selectedImage: '', list: [] };
+      }
+    "
   >
     <template #header>
       <DialogHeader
@@ -2036,7 +2075,6 @@ const emptyCreateDialog = ref(false);
   </DialogContainer>
 
   <!-- add employee -->
-
   <DialogForm
     hideFooter
     :title="$t('form.title.create', { name: $t('customer.employee') })"
@@ -2045,7 +2083,7 @@ const emptyCreateDialog = ref(false);
     :submit="
       async () => {
         if (employeeFormState.currentTab === 'personalInfo') {
-          await employeeFormStore.submitPersonal();
+          await employeeFormStore.submitPersonal(onCreateImageList);
           employeeFormState.isEmployeeEdit = false;
           employeeFormState.dialogType = 'info';
         }
@@ -2125,8 +2163,15 @@ const emptyCreateDialog = ref(false);
         :menu="formMenuIconEmployee"
         :toggleTitle="$t('status.title')"
         hideFade
-        @view="employeeFormState.imageDialog = true"
-        @edit="dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()"
+        @view="
+          () => {
+            employeeFormState.imageDialog = true;
+            employeeFormState.isImageEdit = false;
+          }
+        "
+        @edit="
+          employeeFormState.imageDialog = employeeFormState.isImageEdit = true
+        "
         @update:toggle-status="
           () => {
             currentFromDataEmployee.status =
@@ -2679,6 +2724,7 @@ const emptyCreateDialog = ref(false);
         await fetchImageList(
           customerFormState.editCustomerId,
           customerFormData.selectedImage || '',
+          'customer',
         );
       }
     "
@@ -2691,7 +2737,11 @@ const emptyCreateDialog = ref(false);
           customerFormState.editCustomerId,
           name,
         );
-        await fetchImageList(customerFormState.editCustomerId, name);
+        await fetchImageList(
+          customerFormState.editCustomerId,
+          name,
+          'customer',
+        );
       }
     "
     @submit="
@@ -2768,16 +2818,70 @@ const emptyCreateDialog = ref(false);
     v-model:dialog-state="employeeFormState.imageDialog"
     v-model:file="currentFromDataEmployee.image"
     v-model:image-url="employeeFormState.profileUrl"
-    :hidden-footer="
-      !currentFromDataEmployee.image || !employeeFormState.profileUrl
+    v-model:data-list="imageList"
+    v-model:on-create-data-list="onCreateImageList"
+    :on-create="employeeFormState.dialogModal"
+    :hiddenFooter="!employeeFormState.isImageEdit"
+    @add-image="
+      async (v) => {
+        if (!v) return;
+        if (!currentFromDataEmployee.id) return;
+        await employeeStore.addImageList(
+          v,
+          currentFromDataEmployee.id,
+          Date.now(),
+        );
+        await fetchImageList(
+          currentFromDataEmployee.id,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
+      }
     "
-    clear-button
-    @save="
-      async () => {
-        await employeeFormStore.submitPersonal();
+    @remove-image="
+      async (v) => {
+        if (!v) return;
+        if (!currentFromDataEmployee.id) return;
+        const name = v.split('/').pop() || '';
+        await employeeStore.deleteImageByName(currentFromDataEmployee.id, name);
+        await fetchImageList(currentFromDataEmployee.id, name, 'employee');
+      }
+    "
+    @submit="
+      async (v) => {
+        if (employeeFormState.dialogModal) {
+          employeeFormState.profileUrl = v;
+          employeeFormState.imageDialog = false;
+        } else {
+          refreshImageState = true;
+          employeeFormState.dialogType = 'edit';
+          currentFromDataEmployee.selectedImage = v;
+          imageList ? (imageList.selectedImage = v) : '';
+          employeeFormState.profileUrl = `${baseUrl}/employee/${currentFromDataEmployee.id && currentFromDataEmployee.id}/image/${v}`;
+          employeeFormStore.resetFormDataEmployee();
+          await employeeFormStore.submitPersonal();
+          employeeFormState.imageDialog = false;
+          refreshImageState = false;
+          employeeFormState.isEmployeeEdit = false;
+          employeeFormState.dialogType = 'info';
+          await fetchListEmployee();
+        }
       }
     "
   >
+    <template #title>
+      <span
+        v-if="!employeeFormState.dialogModal"
+        class="justify-center flex text-bold"
+      >
+        {{ $t('general.image') }}
+        {{
+          $i18n.locale === 'eng'
+            ? `${currentFromDataEmployee.firstNameEN} ${currentFromDataEmployee.lastNameEN}`
+            : `${currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastName}`
+        }}
+      </span>
+    </template>
     <template #error>
       <div class="full-height full-width" style="background: white">
         <div
@@ -3194,10 +3298,14 @@ const emptyCreateDialog = ref(false);
       <div class="q-px-lg q-pt-lg surface-2">
         <ProfileBanner
           hideFade
-          :readonly="!employeeFormState.isEmployeeEdit"
-          @view="employeeFormState.imageDialog = true"
+          @view="
+            () => {
+              employeeFormState.imageDialog = true;
+              employeeFormState.isImageEdit = false;
+            }
+          "
           @edit="
-            dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()
+            employeeFormState.imageDialog = employeeFormState.isImageEdit = true
           "
           @update:toggle-status="
             (v) => {
@@ -3225,7 +3333,11 @@ const emptyCreateDialog = ref(false);
               : '-'
           "
           :caption="currentFromDataEmployee.code"
-          :img="employeeFormState.profileUrl || '/images/employee-avatar.png'"
+          :img="
+            `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
+              refreshImageState ? `?ts=${Date.now()}` : '',
+            ) || null
+          "
           :fallbackImg="'/images/employee-avatar.png'"
           :tabs-list="[
             {
@@ -3436,7 +3548,7 @@ const emptyCreateDialog = ref(false);
                 dense
                 outlined
                 separator
-                :title="'customerEmployee.form.group.passport'"
+                :title="$t('customerEmployee.form.group.passport')"
                 :readonly="!employeeFormState.isEmployeeEdit"
                 v-model:passport-type="currentFromDataEmployee.passportType"
                 v-model:passport-number="currentFromDataEmployee.passportNumber"
@@ -3575,7 +3687,7 @@ const emptyCreateDialog = ref(false);
                       outlined
                       separator
                       ocr
-                      :title="'customerEmployee.form.group.passport'"
+                      :title="$t('customerEmployee.form.group.passport')"
                       :readonly="!employeeFormState.isEmployeeEdit"
                       v-model:passport-type="
                         currentFromDataEmployee.passportType
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 557fc924..a98c37ea 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -9,9 +9,10 @@ import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useFlowStore from 'stores/flow';
 
+import { baseUrl } from 'src/stores/utils';
+
 export const useCustomerForm = defineStore('form-customer', () => {
   const { t } = useI18n();
-  const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 
   const customerStore = useCustomerStore();
   const branchStore = useMyBranch();
@@ -133,8 +134,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
     state.value.dialogType = 'edit';
     state.value.editCustomerId = id;
     state.value.editCustomerCode = data.code;
-    state.value.customerImageUrl = `${apiBaseUrl}/customer/${id}/image/${data.selectedImage}`;
-    state.value.defaultCustomerImageUrl = `${apiBaseUrl}/customer/${id}/image/${data.selectedImage}`;
+    state.value.customerImageUrl = `${baseUrl}/customer/${id}/image/${data.selectedImage}`;
+    state.value.defaultCustomerImageUrl = `${baseUrl}/customer/${id}/image/${data.selectedImage}`;
 
     resetFormData.registeredBranchId = data.registeredBranchId;
     resetFormData.code = data.code || '';
@@ -487,6 +488,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     currentTab: string;
     dialogModal: boolean;
     drawerModal: boolean;
+    isImageEdit: boolean;
 
     currentEmployeeCode: string;
     currentEmployee: Employee | null;
@@ -519,6 +521,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       | undefined;
     ocr: boolean;
   }>({
+    isImageEdit: false,
     currentIndex: -1,
     statusSavePersonal: false,
     drawerModal: false,
@@ -541,7 +544,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
   const defaultFormData: EmployeeCreate = {
     id: '',
     code: '',
-    image: null,
     customerBranchId: '',
     nrcNo: '',
     dateOfBirth: null,
@@ -623,6 +625,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       motherLastNameEN: '',
       motherBirthPlace: '',
     },
+    image: null,
   };
 
   let resetEmployeeData = structuredClone(defaultFormData);
@@ -650,6 +653,9 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       resetEmployeeData = structuredClone(defaultFormData);
       state.value.statusSavePersonal = false;
       state.value.profileUrl = '';
+    } else {
+      resetEmployeeData.selectedImage =
+        currentFromDataEmployee.value.selectedImage;
     }
     currentFromDataEmployee.value = structuredClone(resetEmployeeData);
   }
@@ -790,16 +796,22 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     await assignFormDataEmployee(currentFromDataEmployee.value.id);
   }
 
-  async function submitPersonal() {
+  async function submitPersonal(imgList?: {
+    selectedImage: string;
+    list: { url: string; imgFile: File | null; name: string }[];
+  }) {
     if (state.value.dialogType === 'create') {
-      const res = await employeeStore.create({
-        ...currentFromDataEmployee.value,
-        customerBranchId: state.value.formDataEmployeeOwner?.id || '',
+      const res = await employeeStore.create(
+        {
+          ...currentFromDataEmployee.value,
+          customerBranchId: state.value.formDataEmployeeOwner?.id || '',
 
-        employeeWork: [],
-        employeeCheckup: [],
-        employeeOtherInfo: undefined,
-      });
+          employeeWork: [],
+          employeeCheckup: [],
+          employeeOtherInfo: undefined,
+        },
+        imgList,
+      );
 
       if (res) {
         await assignFormDataEmployee(res.id);
@@ -898,7 +910,6 @@ export const useEmployeeForm = defineStore('form-employee', () => {
               }),
             )
           : [],
-        image: null,
       };
 
       currentFromDataEmployee.value = structuredClone(resetEmployeeData);
@@ -908,7 +919,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
 
       state.value.currentEmployeeCode = payload.code;
 
-      state.value.profileUrl = profileImageUrl || '';
+      state.value.profileUrl =
+        `${baseUrl}/employee/${id}/image/${_data.selectedImage}` || '';
 
       profileImageUrl
         ? (state.value.profileSubmit = true)
diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index 1795f046..0c8335c3 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -63,25 +63,81 @@ const useEmployeeStore = defineStore('api-employee', () => {
     return false;
   }
 
-  async function create(data: EmployeeCreate) {
+  async function fetchImageListById(
+    id: string,
+    flow?: {
+      sessionId?: string;
+      refTransactionId?: string;
+      transactionId?: string;
+    },
+  ) {
+    const res = await api.get(`/employee/${id}/image`, {
+      headers: {
+        'X-Session-Id': flow?.sessionId,
+        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
+        'X-Tid': flow?.transactionId,
+      },
+    });
+
+    if (!res) return false;
+    if (res.status === 200) return res.data;
+    if (res.status === 204) return null;
+
+    return false;
+  }
+
+  async function addImageList(file: File, customerId: string, name: string) {
+    await api
+      .put(`/employee/${customerId}/image/${name}`, file, {
+        headers: { 'Content-Type': file.type },
+        onUploadProgress: (e) => console.log(e),
+      })
+      .catch((e) => console.error(e));
+
+    return name;
+  }
+
+  async function deleteImageByName(
+    id: string,
+    name: string,
+    flow?: {
+      sessionId?: string;
+      refTransactionId?: string;
+      transactionId?: string;
+    },
+  ) {
+    const res = await api.delete(`/employee/${id}/image/${name}`, {
+      headers: {
+        'X-Session-Id': flow?.sessionId,
+        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
+        'X-Tid': flow?.transactionId,
+      },
+    });
+
+    if (!res) return false;
+  }
+
+  async function create(
+    data: EmployeeCreate,
+    imgList: {
+      selectedImage: string;
+      list: { url: string; imgFile: File | null; name: string }[];
+    },
+  ) {
     const { id, code, image, file, zipCode, ...payload } = data;
     const res = await api.post<
       Employee & { profileImageUrl: string; profileImageUploadUrl: string }
-    >('/employee', payload, {
-      headers: { 'X-Rtid': flowStore.rtid },
-    });
+    >(
+      '/employee',
+      { ...payload, selectedImage: imgList.selectedImage },
+      {
+        headers: { 'X-Rtid': flowStore.rtid },
+      },
+    );
 
     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) {
@@ -97,6 +153,13 @@ const useEmployeeStore = defineStore('api-employee', () => {
         });
         await Promise.all(attachmentUpload);
       }
+      if (imgList.list.length > 0 && res.data.id) {
+        for (let index = 0; index < imgList.list.length; index++) {
+          const imgFile = imgList.list[index].imgFile;
+          if (imgFile)
+            await addImageList(imgFile, res.data.id, imgList.list[index].name);
+        }
+      }
     }
 
     return res.data;
@@ -392,7 +455,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
       fetch(res.data)
         .then(async (res) => await res.blob())
         .then((blob) => {
-          let a = document.createElement('a');
+          const a = document.createElement('a');
           a.download = filename;
           a.href = window.URL.createObjectURL(blob);
           a.click();
@@ -434,6 +497,11 @@ const useEmployeeStore = defineStore('api-employee', () => {
 
     fetchById,
     fetchList,
+
+    fetchImageListById,
+    addImageList,
+    deleteImageByName,
+
     create,
     editById,
     deleteById,
diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index 8eef6c15..17df8333 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -5,6 +5,7 @@ import { User } from '../user/types';
 import { Customer, CustomerBranch } from '../customer/types';
 
 export type Employee = {
+  selectedImage?: string;
   id: string;
   code: string;
   nrcNo: string;
@@ -50,7 +51,6 @@ export type Employee = {
   subDistrict: SubDistrict | null;
   district: District | null;
   province: Province | null;
-  profileImageUrl: string | null;
   customerBranch: CustomerBranch & { customer: Customer };
   employeeWork?: EmployeeWorkCreate[];
   employeeCheckup?: EmployeeCheckupCreate[];
@@ -58,6 +58,7 @@ export type Employee = {
 };
 
 export type EmployeeCreate = {
+  selectedImage?: string;
   id?: string;
   code: string;
   image: File | null;