From 305d1f2e2b0130206f12faaa2bef35cd9f54c467 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 25 Jul 2024 10:48:04 +0000
Subject: [PATCH] fix(03): employee responsive

---
 .../FormEmployeeHealthCheck.vue               | 29 +++++++-------
 .../FormEmployeeOther.vue                     | 34 +++++++++-------
 .../FormEmployeePassport.vue                  |  8 +++-
 .../FormEmployeeWorkHistory.vue               | 39 ++++++++++---------
 4 files changed, 61 insertions(+), 49 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index f3ef864f..7e5d4e47 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -84,36 +84,35 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="full-height full-width">
-    <div class="bordered-b">
+  <div class="full-height full-width column">
+    <div class="bordered-b full-width row no-wrap">
+      <q-btn
+        @click="addData"
+        flat
+        class="app-text-muted"
+        style="background-color: var(--_body-bg); min-width: 40px"
+        icon="mdi-plus"
+        padding="8px 8px"
+        :disable="readonly"
+        :color="$q.dark.isActive ? 'primary' : ''"
+        :class="tab !== 'tab0' ? 'bordered-r' : ''"
+      />
       <q-tabs
         inline-label
         mobile-arrows
         v-model="tab"
         dense
-        class="text-grey full-width"
+        class="text-grey col"
         active-class="active-tab"
         indicator-color="transparent"
         align="left"
         :breakpoint="0"
       >
-        <q-btn
-          @click="addData"
-          flat
-          class="app-text-muted"
-          style="background-color: var(--_body-bg)"
-          icon="mdi-plus"
-          padding="8px 8px"
-          :disable="readonly"
-          :color="$q.dark.isActive ? 'primary' : ''"
-          :class="tab !== 'tab0' ? 'bordered-r' : ''"
-        />
         <q-tab
           v-for="(tab, index) in employeeCheckup"
           v-bind:key="index"
           :name="`tab${index}`"
           class="content-tab text-capitalize"
-          style="z-index: 999"
         >
           <div class="text-weight-medium row items-center no-wrap">
             {{ $t('formDialogTabCheckup') + (index + 1) }}
diff --git a/src/components/03_customer-management/FormEmployeeOther.vue b/src/components/03_customer-management/FormEmployeeOther.vue
index b0982fa1..ecb1404d 100644
--- a/src/components/03_customer-management/FormEmployeeOther.vue
+++ b/src/components/03_customer-management/FormEmployeeOther.vue
@@ -18,8 +18,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
     </div>
 
     <div class="col-12 row q-col-gutter-y-md">
-      <div class="col-3 q-pl-xl"></div>
-      <div class="col-9 row q-col-gutter-md">
+      <div v-if="$q.screen.gt.sm" class="col-3 q-pl-xl"></div>
+      <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
           :for="`${prefixId}-input-citizen-id`"
           :dense="dense"
@@ -32,17 +32,20 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           lazy-rules
         />
       </div>
-      <div class="col-3 q-pl-xl app-text-muted">
+      <div
+        class="col-md-3 col-12 app-text-muted"
+        :class="{ 'q-pl-xl': $q.screen.gt.sm }"
+      >
         {{ $t('formDialogTitleFamilyHistoryDad') }}
       </div>
-      <div class="col-9 row q-col-gutter-md">
+      <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
           :for="`${prefixId}-input-father-first-name`"
           :dense="dense"
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-6"
           :label="$t('formDialogInputFirstName')"
           v-model="employeeOther.fatherFirstName"
         />
@@ -52,7 +55,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-6"
           :label="$t('formDialogInputLastName')"
           v-model="employeeOther.fatherLastName"
         />
@@ -62,7 +65,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-6"
           :label="$t('formDialogInputFirstNameEN')"
           v-model="employeeOther.fatherFirstNameEN"
         />
@@ -72,7 +75,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-6"
           :label="$t('formDialogInputLastNameEN')"
           v-model="employeeOther.fatherLastNameEN"
         />
@@ -88,17 +91,20 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         />
       </div>
       <div class="col-12" />
-      <div class="col-3 q-pl-xl app-text-muted">
+      <div
+        class="col-md-3 col-12 app-text-muted"
+        :class="{ 'q-pl-xl': $q.screen.gt.sm }"
+      >
         {{ $t('formDialogTitleFamilyHistoryMom') }}
       </div>
-      <div class="col-9 row q-col-gutter-md">
+      <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
           :for="`${prefixId}-input-mother-first-name`"
           :dense="dense"
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-6"
           :label="$t('formDialogInputFirstName')"
           v-model="employeeOther.motherFirstName"
         />
@@ -108,7 +114,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-6"
           :label="$t('formDialogInputLastName')"
           v-model="employeeOther.motherLastName"
         />
@@ -118,7 +124,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-6"
           :label="$t('formDialogInputFirstNameEN')"
           v-model="employeeOther.motherFirstNameEN"
         />
@@ -128,7 +134,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
+          class="col-md-3 col-6"
           :label="$t('formDialogInputLastNameEN')"
           v-model="employeeOther.motherLastNameEN"
         />
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index dc387595..7635bf3c 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -6,8 +6,12 @@ const { locale } = useI18n();
 
 const passportType = defineModel<string>('passportType');
 const passportNumber = defineModel<string>('passportNumber');
-const passportIssueDate = defineModel<Date | null>('passportIssueDate');
-const passportExpiryDate = defineModel<Date | null>('passportExpiryDate');
+const passportIssueDate = defineModel<Date | null | string>(
+  'passportIssueDate',
+);
+const passportExpiryDate = defineModel<Date | null | string>(
+  'passportExpiryDate',
+);
 const passportIssuingCountry = defineModel<string>('passportIssuingCountry');
 const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
 const previousPassportReference = defineModel<string>(
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index e8ca0dbe..f4416502 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -57,36 +57,37 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
-    <div class="bordered-b full-width">
+  <div class="full-height full-width column">
+    <div class="bordered-b full-width row no-wrap">
+      <q-btn
+        @click="addData"
+        flat
+        class="app-text-muted"
+        style="background-color: var(--_body-bg); min-width: 40px"
+        icon="mdi-plus"
+        padding="8px 8px"
+        :disable="readonly"
+        :color="$q.dark.isActive ? 'primary' : ''"
+        :class="tab !== 'tab0' ? 'bordered-r' : ''"
+      />
       <q-tabs
+        inline-label
+        mobile-arrows
         v-model="tab"
         dense
-        class="text-grey"
+        class="text-grey col"
         active-class="active-tab"
         indicator-color="transparent"
         align="left"
         :breakpoint="0"
       >
-        <q-btn
-          @click="addData"
-          flat
-          class="app-text-muted"
-          style="background-color: var(--_body-bg)"
-          icon="mdi-plus"
-          padding="8px 8px"
-          :disable="readonly"
-          :color="$q.dark.isActive ? 'primary' : ''"
-          :class="tab !== 'tab0' ? 'bordered-r' : ''"
-        />
         <q-tab
           v-for="(tab, index) in employeeWork"
           v-bind:key="index"
           :name="`tab${index}`"
           class="content-tab text-capitalize"
-          style="z-index: 999"
         >
-          <div class="text-weight-medium row items-center">
+          <div class="text-weight-medium row items-center no-wrap">
             {{ $t('formDialogTabWork') + (index + 1) }}
             <q-btn
               v-if="!readonly && employeeWork?.length !== 1"
@@ -113,8 +114,10 @@ onMounted(async () => {
         class="row col-12 items-start"
         style="overflow: auto"
       >
-        <div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
-        <div class="col-9 row q-col-gutter-md">
+        <div class="col-md-3 col-12 app-text-muted">
+          • {{ $t(`workHistory`) }}
+        </div>
+        <div class="col-md-9 col-12 row q-col-gutter-md">
           <q-input
             :for="`${prefixId}-input-owner-name`"
             :dense="dense"