From 5c6f201a996ceb0f9f64f2ca11c0cfdeb3c8b151 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 15 Aug 2024 09:47:23 +0700
Subject: [PATCH] refactor: styling

---
 .../02_personnel-management/FormPerson.vue    |  8 ++---
 .../02_personnel-management/MainPage.vue      | 32 ++++++++-----------
 2 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 4e63a1c2..5843e9e2 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -14,11 +14,11 @@ import { useI18n } from 'vue-i18n';
 const { locale } = useI18n();
 const optionStore = useOptionStore();
 const prefixName = defineModel<string>('prefixName');
-const prefixNameEn = defineModel<string>('prefixNameEn');
+const prefixNameEN = defineModel<string>('prefixNameEn');
 const firstName = defineModel<string>('firstName');
 const lastName = defineModel<string>('lastName');
-const firstNameEN = defineModel<string>('firstNameEN');
-const lastNameEN = defineModel<string>('lastNameEN');
+const firstNameEN = defineModel<string>('firstNameEn');
+const lastNameEN = defineModel<string>('lastNameEn');
 const telephoneNo = defineModel<string>('telephoneNo');
 const email = defineModel<string>('email');
 const gender = defineModel<string>('gender');
@@ -195,7 +195,7 @@ watch(
           :disable="!readonly"
           class="col-1"
           :label="$t('formDialogInputPrefixName')"
-          v-model="prefixNameEn"
+          v-model="prefixNameEN"
         />
 
         <q-input
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index fb27fc8e..a55f0e1f 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1173,15 +1173,9 @@ watch(
                   {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }}
                 </q-td>
                 <q-td v-if="fieldSelected.includes('name')">
-                  <div class="row items-center">
-                    <div
-                      style="
-                        width: 50px;
-                        display: flex;
-                        margin-bottom: var(--size-2);
-                      "
-                    >
-                      <div class="branch-card__icon">
+                  <div class="row items-center" style="flex-wrap: nowrap">
+                    <div style="display: flex">
+                      <div class="branch-card__icon q-mr-md">
                         <q-avatar size="md">
                           <q-img
                             :ratio="1"
@@ -1208,8 +1202,8 @@ watch(
                         </q-avatar>
                       </div>
                     </div>
-                    <div class="col">
-                      <div class="col">
+                    <div class="column">
+                      <div>
                         {{
                           $i18n.locale === 'en-US'
                             ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
@@ -1228,7 +1222,7 @@ watch(
                           width="24px"
                         />
                       </div>
-                      <div class="col app-text-muted">
+                      <div class="app-text-muted">
                         {{ props.row.code || '-' }}
                       </div>
                     </div>
@@ -1683,8 +1677,8 @@ watch(
             id="info-personal"
             v-model:first-name="formData.firstName"
             v-model:last-name="formData.lastName"
-            v-model:first-name-e-n="formData.firstNameEN"
-            v-model:last-name-e-n="formData.lastNameEN"
+            v-model:first-name-en="formData.firstNameEN"
+            v-model:last-name-en="formData.lastNameEN"
             v-model:telephone-no="formData.telephoneNo"
             v-model:email="formData.email"
             v-model:gender="formData.gender"
@@ -1837,11 +1831,11 @@ watch(
           outlined
           separator
           :title="'formDialogTitlePersonal'"
-          v-model:firstName="formData.firstName"
-          v-model:lastName="formData.lastName"
-          v-model:firstNameEN="formData.firstNameEN"
-          v-model:lastNameEN="formData.lastNameEN"
-          v-model:telephoneNo="formData.telephoneNo"
+          v-model:first-name="formData.firstName"
+          v-model:last-name="formData.lastName"
+          v-model:first-name-en="formData.firstNameEN"
+          v-model:last-name-en="formData.lastNameEN"
+          v-model:telephone-no="formData.telephoneNo"
           v-model:email="formData.email"
           v-model:gender="formData.gender"
           v-model:birthDate="formData.birthDate"