From 5e93c5b01ca0a7a3baf6779cc7866dde23b9f880 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 24 Jul 2024 09:08:52 +0000
Subject: [PATCH] fix(03): employee health check tab

---
 .../FormEmployeeHealthCheck.vue               | 26 ++++++++++---------
 src/components/FormDialog.vue                 | 13 ++++++----
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index 23cc461d..1ab47bbb 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -83,12 +83,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
-    <div class="bordered-b full-width">
+  <div class="full-height full-width">
+    <div class="bordered-b">
       <q-tabs
+        inline-label
+        mobile-arrows
         v-model="tab"
         dense
-        class="text-grey"
+        class="text-grey full-width"
         active-class="active-tab"
         indicator-color="transparent"
         align="left"
@@ -112,7 +114,7 @@ onMounted(async () => {
           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('formDialogTabCheckup') + (index + 1) }}
             <q-btn
               v-if="!readonly && employeeCheckup?.length !== 1"
@@ -131,7 +133,7 @@ onMounted(async () => {
       </q-tabs>
     </div>
 
-    <q-tab-panels v-model="tab" style="padding-top: 0px">
+    <q-tab-panels v-model="tab" style="padding-top: 0px" class="col">
       <q-tab-panel
         v-for="(checkup, index) in employeeCheckup"
         v-bind:key="index"
@@ -139,16 +141,16 @@ onMounted(async () => {
         class="row col-12 items-start"
         style="overflow: auto"
       >
-        <div class="col-3 app-text-muted">
+        <div class="col-md-3 col-12 app-text-muted q-pb-sm">
           • {{ $t(`formDialogTitleHealthCheck`) }}
         </div>
-        <div class="col-9 row q-col-gutter-md">
+        <div class="col-md-9 col-12 row q-col-gutter-md">
           <q-input
             :dense="dense"
             outlined
             :readonly="readonly"
             hide-bottom-space
-            class="col-6"
+            class="col-md-6 col-12"
             :label="$t('formDialogInputCheckupRes')"
             v-model="checkup.checkupResult"
           />
@@ -182,7 +184,7 @@ onMounted(async () => {
             option-value="id"
             option-label="name"
             :label="$t('province')"
-            class="col-3"
+            class="col-md-3 col-6"
             :options="addrOptions.provinceOps"
             lazy-rules
           />
@@ -191,7 +193,7 @@ onMounted(async () => {
             outlined
             :readonly="readonly"
             hide-bottom-space
-            class="col-9"
+            class="col-md-9 col-12"
             :label="$t('formDialogInputHospital')"
             v-model="checkup.hospitalName"
           />
@@ -248,7 +250,7 @@ onMounted(async () => {
             :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
-            class="col-3"
+            class="col-md-3 col-6"
           >
             <template #year="{ value }">
               {{ $i18n.locale === 'th-th' ? value + 543 : value }}
@@ -307,7 +309,7 @@ onMounted(async () => {
             :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
-            class="col-3"
+            class="col-md-3 col-6"
           >
             <template #year="{ value }">
               {{ $i18n.locale === 'th-th' ? value + 543 : value }}
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index bbc580da..3fd98be5 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -146,7 +146,7 @@ const currentTab = defineModel<string>('currentTab');
 
         <!-- body -->
         <div
-          class="col full-height column"
+          class="col full-height column full-width"
           :class="{
             dark: $q.dark.isActive,
             'surface-2': !employee,
@@ -159,11 +159,14 @@ const currentTab = defineModel<string>('currentTab');
             style="border-bottom: 1px solid var(--brand-1)"
           >
             <q-tabs
+              inline-label
+              mobile-arrows
               dense
-              class="app-text-muted cancel-overflow"
+              class="app-text-muted full-width"
               v-model="currentTab"
               active-class="active-tab"
               indicator-color="transparent"
+              align="left"
             >
               <q-tab
                 :id="`tab-${tab.label}`"
@@ -178,7 +181,7 @@ const currentTab = defineModel<string>('currentTab');
           </div>
 
           <div
-            class="row q-pa-lg scroll col"
+            class="row q-pa-lg scroll col full-width"
             :class="{
               dark: $q.dark.isActive,
               'surface-2': !employee,
@@ -204,12 +207,12 @@ const currentTab = defineModel<string>('currentTab');
             <div
               v-if="!noAppBox"
               bordered
-              class="column surface-1 bordered rounded"
+              class="column surface-1 bordered rounded col"
               :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'} ${!noPaddingTab && 'q-pt-lg q-pl-lg'} ${$q.screen.gt.xs && 'full-height scroll'}`"
               style="padding-right: 0; padding-bottom: 16px"
             >
               <div
-                class="row col-12 q-col-gutter-y-md q-mb-md items-start full-height"
+                class="row col-12 q-col-gutter-y-md q-mb-md items-start full-height full-width"
                 :class="noPaddingTab ? '' : 'q-pr-md'"
               >
                 <slot name="information"></slot>