From 90c8b1732ae351426c269f54194fee553d421ded Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Wed, 13 Nov 2024 10:13:00 +0700
Subject: [PATCH] refactor: by value passport and visa

---
 .../03_customer-management/ExpirationDate.vue |  9 ++++-
 .../03_customer-management/TableEmpoloyee.vue | 35 +++++++++++++++----
 src/pages/03_customer-management/MainPage.vue |  2 ++
 3 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/components/03_customer-management/ExpirationDate.vue b/src/components/03_customer-management/ExpirationDate.vue
index 97e8d956..2a56b82e 100644
--- a/src/components/03_customer-management/ExpirationDate.vue
+++ b/src/components/03_customer-management/ExpirationDate.vue
@@ -3,11 +3,17 @@ import { calculateDaysUntilExpire } from 'stores/utils';
 
 defineProps<{
   expirationDate: Date;
+  showAllDay?: boolean;
 }>();
 </script>
 
 <template>
-  <template v-if="calculateDaysUntilExpire(expirationDate) <= 90">
+  <template
+    v-if="
+      calculateDaysUntilExpire(expirationDate) <= 90 ||
+      (expirationDate !== undefined && !!showAllDay)
+    "
+  >
     <q-badge
       :color="calculateDaysUntilExpire(expirationDate) > 0 ? 'orange' : 'red'"
       class="text-weight-bold"
@@ -36,6 +42,7 @@ defineProps<{
       </template>
     </q-badge>
   </template>
+  <template v-else>-</template>
 </template>
 
 <style scoped></style>
diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
index d91f5756..4ce116fc 100644
--- a/src/components/03_customer-management/TableEmpoloyee.vue
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -2,11 +2,11 @@
 import { calculateAge, dateFormat } from 'src/utils/datetime';
 import { calculateDaysUntilExpire } from 'stores/utils';
 import { baseUrl } from 'src/stores/utils';
+import useOptionStore from 'stores/options';
 
 import PersonCard from 'components/shared/PersonCard.vue';
 import KebabAction from '../shared/KebabAction.vue';
-import useOptionStore from 'stores/options';
-
+import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
 import { AddButton } from 'components/button';
 
 const optionStore = useOptionStore();
@@ -195,16 +195,39 @@ defineEmits<{
         </q-td>
 
         <q-td v-if="fieldSelected.includes('formDialogInputPassportNo')">
-          {{ props.row.passportNumber || '-' }}
+          {{
+            props.row.employeePassport[0]
+              ? props.row.employeePassport[0].number
+              : '-'
+          }}
         </q-td>
 
         <q-td v-if="fieldSelected.includes('passportExpiryDate')">
-          {{ dateFormat(props.row.passportExpiryDate) || '-' }}
+          {{
+            props.row.employeePassport[0]
+              ? dateFormat(props.row.employeePassport[0].expireDate) || '-'
+              : '-'
+          }}
         </q-td>
 
-        <q-td v-if="fieldSelected.includes('visaExpireDate')">-</q-td>
+        <q-td v-if="fieldSelected.includes('visaExpireDate')">
+          {{
+            props.row.employeeVisa[0]
+              ? dateFormat(props.row.employeeVisa[0].expireDate) || '-'
+              : '-'
+          }}
+        </q-td>
 
-        <q-td v-if="fieldSelected.includes('beDue')">-</q-td>
+        <q-td v-if="fieldSelected.includes('beDue')">
+          <ExpirationDate
+            show-all-day
+            :expiration-date="
+              props.row.employeeVisa[0]
+                ? props.row.employeeVisa[0].expireDate || undefined
+                : undefined
+            "
+          />
+        </q-td>
 
         <q-td v-if="fieldSelected.includes('branchLabel')">
           <div class="row items-center" v-if="props.row.customerBranch">
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d2721874..89dd8757 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -402,6 +402,8 @@ async function fetchListEmployee(fetchStats = false) {
           ? 'ACTIVE'
           : 'INACTIVE',
     query: inputSearch.value,
+    passport: true,
+    visa: true,
   });
   if (resultListEmployee) {
     maxPageEmployee.value = Math.ceil(