From ab1b7a090247389664f7e4a6f74114f549edd3d0 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 25 Jun 2024 10:38:37 +0000
Subject: [PATCH] fix: form dialog space & layout

---
 .../02_personnel-management/FormPerson.vue           |  5 ++++-
 src/components/02_personnel-management/InfoForm.vue  |  2 +-
 src/components/FormDialog.vue                        | 12 ++++--------
 src/pages/03_customer-management/MainPage.vue        |  2 ++
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 2853d2ce..627084a2 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -22,10 +22,13 @@ defineProps<{
   readonly?: boolean;
   separator?: boolean;
   employee?: boolean;
+  title?: string;
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• {{ $t('formDialogTitlePersonnel') }}</div>
+  <div class="col-3 app-text-muted">
+    • {{ title || $t('formDialogTitlePersonnel') }}
+  </div>
   <div class="col-9 row q-col-gutter-md">
     <q-input
       for="input-first-name"
diff --git a/src/components/02_personnel-management/InfoForm.vue b/src/components/02_personnel-management/InfoForm.vue
index c6f04582..9dabf34c 100644
--- a/src/components/02_personnel-management/InfoForm.vue
+++ b/src/components/02_personnel-management/InfoForm.vue
@@ -77,7 +77,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
                 dense
                 outlined
                 separator
-                employee
+                :employee="employee"
                 :readonly="readonly"
                 :disabledRule="disabledRule"
                 v-model:address="address"
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 2fbe0ef6..42cef8ba 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -204,14 +204,9 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
             <div
               v-if="!noAppBox"
               bordered
-              :noPadding="noPaddingTab"
-              class="column full-height surface-1 bordered rounded q-pt-lg q-pl-lg scroll"
-              :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'}`"
-              style="
-                padding-right: 0;
-                padding-bottom: 16px;
-                box-sizing: border-box;
-              "
+              class="column full-height surface-1 bordered rounded scroll"
+              :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'} ${!noPaddingTab && 'q-pt-lg q-pl-lg'}`"
+              style="padding-right: 0; padding-bottom: 16px"
             >
               <div
                 class="row col-12 q-col-gutter-y-md q-mb-md items-start full-height"
@@ -242,6 +237,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
                 <slot name="qr-code"></slot>
                 <slot name="location"></slot>
                 <slot name="by-type"></slot>
+                <div class="col-12"></div>
               </div>
             </div>
 
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 131b7ef6..9306592d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1930,6 +1930,7 @@ watch(selectorLabel, async () => {
         outlined
         employee
         separator
+        :title="$t('personalInfo')"
         v-model:firstName="formDataEmployee.firstName"
         v-model:lastName="formDataEmployee.lastName"
         v-model:firstNameEN="formDataEmployee.firstNameEN"
@@ -2762,6 +2763,7 @@ watch(selectorLabel, async () => {
           outlined
           employee
           separator
+          :title="$t('personalInfo')"
           :readonly="!infoDrawerEmployeeEdit"
           v-model:firstName="formDataEmployee.firstName"
           v-model:lastName="formDataEmployee.lastName"