fix: customer & employee image list

src/components/03_customer-management/DrawerEmployee.vue

@@ -22,6 +22,7 @@ import FormEmployeePassport from './FormEmployeePassport.vue';
 import FormEmployeeVisa from './FormEmployeeVisa.vue';
 import FormEmployeeWorkHistory from './FormEmployeeWorkHistory.vue';
 import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
+import ImageUploadDialog from '../ImageUploadDialog.vue';
 
 import useOcrStore from 'stores/ocr';
 import useOptionStore from 'src/stores/options';
@@ -58,6 +59,7 @@ const {
   state: employeeFormState,
   currentFromDataEmployee,
   refreshImageState,
+  onCreateImageList,
 } = storeToRefs(employeeFormStore);
 const { state: customerFormState, currentFormData: customerFormData } =
   storeToRefs(customerFormStore);
@@ -71,7 +73,13 @@ const props = defineProps<{
     customerId?: string;
     mobileFetch?: boolean;
   }) => Promise<void>;
+  fetchImageList: (
+    id: string,
+    selectedName: string,
+    type: 'customer' | 'employee',
+  ) => Promise<void>;
 }>();
+
 const mrz = defineModel<Awaited<ReturnType<typeof parseResultMRZ>>>('mrz');
 
 defineEmits<{
@@ -1668,4 +1676,95 @@ defineEmits<{
       </div>
     </div>
   </DrawerInfo>
+
+  <ImageUploadDialog
+    ref="dialogEmployeeImageUpload"
+    v-model:dialog-state="employeeFormState.imageDialog"
+    v-model:file="currentFromDataEmployee.image"
+    v-model:image-url="employeeFormState.profileUrl"
+    v-model:data-list="employeeFormState.imageList"
+    v-model:on-create-data-list="onCreateImageList"
+    :on-create="employeeFormState.dialogModal && !currentFromDataEmployee.id"
+    :hidden-footer="!employeeFormState.isImageEdit"
+    @add-image="
+      async (v) => {
+        if (!v) return;
+        if (!currentFromDataEmployee.id) return;
+        await employeeStore.addImageList(
+          v,
+          currentFromDataEmployee.id,
+          Date.now().toString(),
+        );
+        await fetchImageList(
+          currentFromDataEmployee.id,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
+      }
+    "
+    @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,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
+      }
+    "
+    @submit="
+      async (v) => {
+        if (employeeFormState.dialogModal && !currentFromDataEmployee.id) {
+          employeeFormState.profileUrl = v;
+          employeeFormState.imageDialog = false;
+        } else {
+          refreshImageState = true;
+          employeeFormState.dialogType = 'edit';
+          currentFromDataEmployee.selectedImage = v;
+          employeeFormState.imageList
+            ? (employeeFormState.imageList.selectedImage = v)
+            : '';
+          employeeFormState.profileUrl = `${baseUrl}/employee/${currentFromDataEmployee.id && currentFromDataEmployee.id}/image/${v}`;
+          employeeFormStore.resetFormDataEmployee();
+          await employeeFormStore.submitPersonal(onCreateImageList);
+          employeeFormState.imageDialog = false;
+          refreshImageState = false;
+          employeeFormState.isEmployeeEdit = false;
+          employeeFormState.dialogType = 'info';
+          await fetchListEmployee();
+        }
+      }
+    "
+  >
+    <template #title>
+      <span
+        v-if="!employeeFormState.dialogModal || currentFromDataEmployee.id"
+        class="justify-center flex text-bold"
+      >
+        {{ $t('general.image') }}
+        {{
+          $i18n.locale === 'eng'
+            ? `${currentFromDataEmployee.firstNameEN || currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastNameEN || currentFromDataEmployee.lastName}`
+            : `${currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastName}`
+        }}
+      </span>
+    </template>
+    <template #error>
+      <div class="full-height full-width" style="background: white">
+        <div
+          class="full-height full-width flex justify-center items-center"
+          style="background: #ee4367"
+        >
+          <q-img
+            :src="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
+            fit="contain"
+            style="height: 100%"
+          />
+        </div>
+      </div>
+    </template>
+  </ImageUploadDialog>
 </template>