From 4954f53927233670731cce938490f828cbbfba72 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 6 Aug 2024 07:55:05 +0000
Subject: [PATCH] fix(03): employee image

---
 src/pages/03_customer-management/MainPage.vue | 47 ++++++++++++++++++-
 src/pages/03_customer-management/form.ts      |  5 +-
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 37868d76..2f3c6f6e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -130,6 +130,7 @@ const currentPageEmployee = ref<number>(1);
 const maxPageEmployee = ref<number>(1);
 const pageSize = ref<number>(10);
 const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
+const dialogEmployeeImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
 
 watch(() => route.name, init);
 watch(
@@ -1846,8 +1847,9 @@ function createEmployeeForm() {
         bgColor="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
         v-model:current-tab="employeeFormState.currentTab"
         v-model:cover-url="employeeFormState.profileUrl"
-        fallbackCover="images/employee-banner.png"
-        :img="`images/employee-avatar.png`"
+        v-model:toggle-status="currentFromDataEmployee.status"
+        fallbackCover="/images/employee-banner.png"
+        :img="employeeFormState.profileUrl || `/images/employee-avatar.png`"
         :tabs-list="[
           { name: 'personalInfo', label: 'personalInfo' },
           { name: 'healthCheck', label: 'healthCheck' },
@@ -1860,6 +1862,16 @@ function createEmployeeForm() {
           employeeFormState.profileUrl === '' ||
           employeeFormState.profileUrl === undefined
         "
+        @view="employeeFormState.imageDialog = true"
+        @edit="dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()"
+        @update:toggle-status="
+          () => {
+            currentFromDataEmployee.status =
+              currentFromDataEmployee.status === 'CREATED'
+                ? 'INACTIVE'
+                : 'CREATED';
+          }
+        "
       />
     </div>
 
@@ -1965,12 +1977,16 @@ function createEmployeeForm() {
         <FormAddress
           id="form-personal-address"
           prefix-id="form-employee"
+          v-model:same-with-employer="
+            employeeFormState.formDataEmployeeSameAddr
+          "
           v-model:address="currentFromDataEmployee.address"
           v-model:addressEN="currentFromDataEmployee.addressEN"
           v-model:provinceId="currentFromDataEmployee.provinceId"
           v-model:districtId="currentFromDataEmployee.districtId"
           v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
           v-model:zipCode="currentFromDataEmployee.zipCode"
+          employee
           dense
         />
       </div>
@@ -2027,6 +2043,33 @@ function createEmployeeForm() {
     @save="() => {}"
   ></ImageUploadDialog>
 
+  <ImageUploadDialog
+    ref="dialogEmployeeImageUpload"
+    v-model:dialog-state="employeeFormState.imageDialog"
+    v-model:file="currentFromDataEmployee.image"
+    v-model:image-url="employeeFormState.profileUrl"
+    :hidden-footer="
+      !currentFromDataEmployee.image || !employeeFormState.profileUrl
+    "
+    clear-button
+    @save="() => {}"
+  >
+    <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.png"
+            fit="contain"
+            style="height: 100%"
+          />
+        </div>
+      </div>
+    </template>
+  </ImageUploadDialog>
+
   <!-- นายจ้างนิติ -->
   <DrawerInfo
     v-model:drawer-open="employeeFormState.drawerModal"
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index dbb3e35a..9aa6f864 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -233,6 +233,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
 
   const state = ref<{
     dialogType: 'info' | 'create' | 'edit';
+    imageDialog: boolean;
     currentTab: string;
     dialogModal: boolean;
     drawerModal: boolean;
@@ -264,6 +265,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       | undefined;
   }>({
     drawerModal: false,
+    imageDialog: false,
     currentTab: 'personalInfo',
     dialogModal: false,
     dialogType: 'info',
@@ -272,7 +274,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     profileUrl: '',
     isEmployeeEdit: false,
     profileSubmit: false,
-    formDataEmployeeSameAddr: false,
+    formDataEmployeeSameAddr: true,
     infoEmployeePersonCard: [],
     formDataEmployeeOwner: undefined,
   });
@@ -285,6 +287,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     dateOfBirth: null,
     gender: '',
     nationality: '',
+    status: 'CREATED',
 
     firstName: '',
     firstNameEN: '',