From 82d3c893f24ec15766578129f0a5dd2891975534 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 22 Apr 2024 10:53:56 +0700
Subject: [PATCH 1/2] feat: form id, i18n

---
 .../02_personnel-management/FormAddress.vue   | 25 +++++-----
 .../02_personnel-management/FormByType.vue    | 39 ++++++++++-----
 .../FormInformation.vue                       | 33 ++++++++-----
 .../02_personnel-management/FormPerson.vue    | 43 +++++++++++------
 src/components/DrawerInfo.vue                 |  2 +-
 src/components/StatCardComponent.vue          |  2 +-
 src/i18n/en-US/form-dialog.ts                 | 48 +++++++++++++++++++
 src/i18n/en-US/index.ts                       |  1 +
 src/i18n/en-US/personnel-main-page.ts         |  6 ++-
 src/i18n/th-th/form-dialog.ts                 | 48 +++++++++++++++++++
 src/i18n/th-th/index.ts                       |  1 +
 src/i18n/th-th/personnel-main-page.ts         |  6 ++-
 12 files changed, 201 insertions(+), 53 deletions(-)

diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index dfdfb631..464e419a 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -74,20 +74,20 @@ watch(districtId, fetchSubDistrict);
 </script>
 <template>
   <div class="col-12 app-text-muted">
-    • {{ title || 'ข้อมูลที่อยู่พนักงาน' }}
+    • {{ title || $t('formDialogTitlePersonnelAddress') }}
   </div>
   <div class="col-12 row q-col-gutter-y-md">
     <div class="col-3 q-pl-xl app-text-muted">
-      {{ addressTitle || 'ที่อยู่' }}
+      {{ addressTitle || $t('formDialogTitleAddressPure') }}
     </div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
+        id="input-address"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
         :borderless="readonly"
         hide-bottom-space
-        id="addr-input"
         :label="$t('address')"
         class="col-12"
         v-model="address"
@@ -98,6 +98,7 @@ watch(districtId, fetchSubDistrict);
         ]"
       />
       <q-select
+        id="select-province"
         :dense="dense"
         :readonly="readonly"
         :outlined="readonly ? false : outlined"
@@ -106,7 +107,6 @@ watch(districtId, fetchSubDistrict);
         hide-bottom-space
         emit-value
         map-options
-        id="select-province"
         v-model="provinceId"
         option-value="id"
         option-label="name"
@@ -121,6 +121,7 @@ watch(districtId, fetchSubDistrict);
         @update:model-value="districtId = subDistrictId = zipCode = null"
       />
       <q-select
+        id="select-district"
         :dense="dense"
         :readonly="readonly"
         :outlined="readonly ? false : outlined"
@@ -129,7 +130,6 @@ watch(districtId, fetchSubDistrict);
         hide-bottom-space
         emit-value
         map-options
-        id="select-district"
         v-model="districtId"
         option-value="id"
         option-label="name"
@@ -144,6 +144,7 @@ watch(districtId, fetchSubDistrict);
         @update:model-value="subDistrictId = zipCode = null"
       />
       <q-select
+        id="select-sub-district"
         :dense="dense"
         :readonly="readonly"
         :outlined="readonly ? false : outlined"
@@ -152,7 +153,6 @@ watch(districtId, fetchSubDistrict);
         hide-bottom-space
         emit-value
         map-options
-        id="select-sub-district"
         v-model="subDistrictId"
         option-value="id"
         option-label="name"
@@ -167,27 +167,27 @@ watch(districtId, fetchSubDistrict);
         @update:model-value="(v: string) => selectSubDistrict(v)"
       />
       <q-input
+        id="input-zip-code"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :borderless="readonly"
         readonly
-        id="zip"
         :label="$t('zipCode')"
         class="col-3"
         v-model="zipCode"
       />
     </div>
     <div class="col-3 q-pl-xl app-text-muted">
-      {{ addressTitleEN || 'ที่อยู่ ภาษาอังกฤษ' }}
+      {{ addressTitleEN || $t('formDialogTitleAddressPure') }}
     </div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
+        id="input-address-en"
         :dense="dense"
         :readonly="readonly"
         :outlined="readonly ? false : outlined"
         :borderless="readonly"
         hide-bottom-space
-        id="addr-en-input"
         :label="$t('address')"
         class="col-12"
         v-model="addressEN"
@@ -198,6 +198,7 @@ watch(districtId, fetchSubDistrict);
         ]"
       />
       <q-select
+        id="select-province-en"
         :dense="dense"
         :readonly="readonly"
         :outlined="readonly ? false : outlined"
@@ -205,7 +206,6 @@ watch(districtId, fetchSubDistrict);
         :hide-dropdown-icon="readonly"
         emit-value
         map-options
-        id="select-province-en"
         v-model="provinceId"
         option-value="id"
         option-label="nameEN"
@@ -214,6 +214,7 @@ watch(districtId, fetchSubDistrict);
         :options="addrOptions.provinceOps"
       />
       <q-select
+        id="select-district-en"
         :dense="dense"
         :readonly="readonly"
         :outlined="readonly ? false : outlined"
@@ -221,7 +222,6 @@ watch(districtId, fetchSubDistrict);
         :hide-dropdown-icon="readonly"
         emit-value
         map-options
-        id="select-district-en"
         v-model="districtId"
         option-value="id"
         option-label="nameEN"
@@ -230,6 +230,7 @@ watch(districtId, fetchSubDistrict);
         :options="addrOptions.districtOps"
       />
       <q-select
+        id="select-sub-district-en"
         :dense="dense"
         :readonly="readonly"
         :outlined="readonly ? false : outlined"
@@ -237,7 +238,6 @@ watch(districtId, fetchSubDistrict);
         :hide-dropdown-icon="readonly"
         emit-value
         map-options
-        id="select-sub-district-en"
         v-model="subDistrictId"
         option-value="id"
         option-label="nameEN"
@@ -247,6 +247,7 @@ watch(districtId, fetchSubDistrict);
         @update:model-value="(v: string) => selectSubDistrict(v)"
       />
       <q-input
+        id="input-zip-code"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :borderless="readonly"
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 24d70153..d2a2e31a 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -63,7 +63,9 @@ function deleteFile(name: string) {
 }
 </script>
 <template>
-  <div v-if="userType" class="col-3 app-text-muted">• ข้อมูลการทำงาน</div>
+  <div v-if="userType" class="col-3 app-text-muted">
+    • {{ $t('formDialogTitleByType') }}
+  </div>
   <div class="col-9 row q-col-gutter-md">
     <div
       v-if="userType === 'USER' || userType === 'MESSENGER'"
@@ -71,11 +73,12 @@ function deleteFile(name: string) {
       style="margin-left: 0px; padding-left: 0px"
     >
       <q-input
+        id="input-regis-no"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
         :borderless="readonly"
-        label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
+        :label="$t('formDialogInputRegisNo')"
         class="col-12"
         v-model="registrationNo"
       />
@@ -93,7 +96,8 @@ function deleteFile(name: string) {
         </template>
         <template #trigger>
           <q-input
-            label="วันที่เริ่มงาน"
+            id="input-start-date"
+            :label="$t('formDialogInputStartDate')"
             :dense="dense"
             :outlined="readonly ? false : outlined"
             :readonly="readonly"
@@ -135,7 +139,8 @@ function deleteFile(name: string) {
         </template>
         <template #trigger>
           <q-input
-            label="วันที่พ้นสภาพพนักงาน"
+            id="input-retire-date"
+            :label="$t('formDialogInputRetireDate')"
             :dense="dense"
             :outlined="readonly ? false : outlined"
             :readonly="readonly"
@@ -163,6 +168,7 @@ function deleteFile(name: string) {
         </template>
       </VueDatePicker>
       <q-select
+        id="input-responsible-area"
         v-if="userType === 'MESSENGER'"
         :dense="dense"
         :outlined="readonly ? false : outlined"
@@ -172,7 +178,7 @@ function deleteFile(name: string) {
         emit-value
         map-options
         options-dense
-        label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
+        :label="$t('formDialogInputResponsibleArea')"
         class="col-12"
         option-label="label"
         option-value="label"
@@ -186,11 +192,12 @@ function deleteFile(name: string) {
       style="row-gap: 16px"
     >
       <q-input
+        id="input-discount-condition"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
         :borderless="readonly"
-        label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
+        :label="$t('formDialogInputDiscount')"
         class="col-12"
         v-model="discountCondition"
         type="textarea"
@@ -202,6 +209,7 @@ function deleteFile(name: string) {
       style="margin-left: 0px; padding-left: 0px"
     >
       <q-select
+        id="input-source-nationality"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -210,7 +218,7 @@ function deleteFile(name: string) {
         emit-value
         map-options
         options-dense
-        label="สัญชาติต้นทาง"
+        :label="$t('formDialogInputSourceNationality')"
         class="col-3"
         option-label="label"
         option-value="label"
@@ -218,6 +226,7 @@ function deleteFile(name: string) {
         :options="userStore.userOption.nationalityOpts"
       />
       <q-select
+        id="input-import-nationality"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -226,7 +235,7 @@ function deleteFile(name: string) {
         emit-value
         map-options
         options-dense
-        label="นำเข้าสัญชาติ"
+        :label="$t('formDialogInputImportNationality')"
         class="col-3"
         option-label="label"
         option-value="label"
@@ -234,6 +243,7 @@ function deleteFile(name: string) {
         :options="userStore.userOption.nationalityOpts"
       />
       <q-select
+        id="select-trainig-place"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
@@ -242,7 +252,7 @@ function deleteFile(name: string) {
         emit-value
         map-options
         options-dense
-        label="สถานที่อบรม"
+        :label="$t('formDialogInputTrainingPlace')"
         class="col-6"
         option-label="label"
         option-value="label"
@@ -250,31 +260,34 @@ function deleteFile(name: string) {
         :options="userStore.userOption.trainingPlaceOpts"
       />
       <q-input
+        id="input-checkpoint"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
         :borderless="readonly"
-        label="ด่าน"
+        :label="$t('formDialogInputCheckpoint')"
         class="col-6"
         v-model="checkpoint"
       />
       <q-input
+        id="input-checkpoint-en"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
         :borderless="readonly"
-        label="ด่าน ENG"
+        :label="$t('formDialogInputCheckpoint') + ' ENG'"
         class="col-6"
         v-model="checkpointEN"
       />
       <q-file
+        id="input-attchment"
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
         :borderless="readonly"
         multiple
         append
-        label="แบบเอกสารประจำตัว"
+        :label="$t('formDialogAttachment')"
         class="col-12"
         v-model="agencyFile"
       />
@@ -282,6 +295,7 @@ function deleteFile(name: string) {
       <div v-if="agencyFileList && agencyFileList?.length > 0" class="col-12">
         <q-list bordered separator class="rounded" style="padding: 0">
           <q-item
+            id="attachment-file"
             v-for="item in agencyFileList"
             clickable
             :key="item.url"
@@ -294,6 +308,7 @@ function deleteFile(name: string) {
                   {{ item.name }}
                 </div>
                 <q-btn
+                  id="delete-file"
                   v-if="!readonly && userId"
                   rounded
                   flat
diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index 9fecafec..da020667 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -29,9 +29,12 @@ async function selectHq(id: string) {
 }
 </script>
 <template>
-  <div class="col-3 app-text-muted">• ข้อมูลพื้นฐาน</div>
+  <div class="col-3 app-text-muted">
+    • {{ $t('formDialogTitleInformation') }}
+  </div>
   <div class="col-9 row q-col-gutter-md">
     <q-select
+      id="select-hq-id"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -45,12 +48,13 @@ async function selectHq(id: string) {
       v-model="hqId"
       option-label="label"
       option-value="value"
-      label="รหัสสำนักงานใหญ่"
+      :label="$t('formDialogInputCode')"
       :options="userStore.userOption.hqOpts"
-      :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
+      :rules="[(val: string) => !!val || $t('formDialogInputHqIdValidate')]"
       @update:model-value="(val: string) => selectHq(val)"
     />
     <q-select
+      id="select-br-id"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -63,12 +67,13 @@ async function selectHq(id: string) {
       hide-bottom-space
       class="col-6"
       v-model="brId"
-      label="รหัสสาขา"
+      :label="$t('formDialogInputBrId')"
       option-label="label"
       option-value="value"
       :options="userStore.userOption.brOpts"
     />
     <q-select
+      id="select-user-type"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -81,12 +86,13 @@ async function selectHq(id: string) {
       class="col-3"
       option-value="value"
       option-label="label"
-      label="ประเภทผู้ใช้งาน"
+      :label="$t('formDialogInputUserType')"
       v-model="userType"
       :options="userStore.userOption.userTypeOpts"
-      :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
+      :rules="[(val: string) => !!val || $t('formDialogInputUserTypeValidate')]"
     />
     <q-select
+      id="select-user-role"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -97,14 +103,15 @@ async function selectHq(id: string) {
       options-dense
       hide-bottom-space
       class="col-3"
-      label="สิทธิ์ผู้ใช้งาน"
+      :label="$t('formDialogInputUserRole')"
       option-label="label"
       option-value="value"
       v-model="userRole"
       :options="userStore.userOption.roleOpts"
-      :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
+      :rules="[(val: string) => !!val || $t('formDialogInputUserRoleValidate')]"
     />
     <q-input
+      id="input-username"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :borderless="readonly"
@@ -114,18 +121,22 @@ async function selectHq(id: string) {
       options-dense
       hide-bottom-space
       class="col-3"
-      label="ชื่อผู้ใช้งาน (Username)"
+      :label="$t('formDialogInputUsername')"
       v-model="username"
-      :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
+      :rules="[
+        (val: string) =>
+          val.length > 2 || $t('formDialogInputUsernameValidate'),
+      ]"
     />
     <q-input
+      id="input-user-code"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :borderless="readonly"
       readonly
       hide-bottom-space
       class="col-3"
-      label="รหัสพนักงาน"
+      :label="$t('formDialogInputUserCode')"
       v-model="userCode"
     />
   </div>
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 796ab227..386c3170 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -21,72 +21,85 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• ข้อมูลบุคลากร</div>
+  <div class="col-3 app-text-muted">• {{ $t('formDialogTitlePersonnel') }}</div>
   <div class="col-9 row q-col-gutter-md">
     <q-input
+      id="input-first-name"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
       class="col-3"
-      label="ชื่อ ภาษาไทย"
+      :label="$t('formDialogInputFirstName')"
       v-model="firstName"
-      :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
+      :rules="[
+        (val: string) => !!val || $t('formDialogInputFirstNameValidate'),
+      ]"
     />
     <q-input
+      id="input-last-name"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
       class="col-3"
-      label="นามสกุล ภาษาไทย"
+      :label="$t('formDialogInputLastName')"
       v-model="lastName"
-      :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
+      :rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
     />
     <q-input
+      id="input-first-name-en"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
       class="col-3"
-      label="ชื่อ ภาษาอังกฤษ"
+      :label="$t('formDialogInputFirstNameEN')"
       v-model="firstNameEN"
-      :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
+      :rules="[
+        (val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
+      ]"
     />
     <q-input
+      id="input-last-name-en"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
       class="col-3"
-      label="นามสกุล ภาษาอังกฤษ"
+      :label="$t('formDialogInputLastNameEN')"
       v-model="lastNameEN"
-      :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
+      :rules="[
+        (val: string) => !!val || $t('formDialogInputLastNameENValidate'),
+      ]"
     />
     <q-input
+      id="input-telephone"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
       :borderless="readonly"
       class="col-6"
-      label="เบอร์โทร"
+      :label="$t('formDialogInputTelephone')"
       v-model="telephoneNo"
       mask="##########"
     />
     <q-input
+      id="input-email"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
       :borderless="readonly"
-      label="อีเมล"
+      :label="$t('formDialogInputEmail')"
       class="col-6"
       v-model="email"
     />
     <q-select
+      id="select-gender"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :readonly="readonly"
@@ -94,7 +107,7 @@ defineProps<{
       :borderless="readonly"
       emit-value
       map-options
-      label="เพศ"
+      :label="$t('formDialogInputGender')"
       class="col-3"
       option-label="label"
       option-value="value"
@@ -115,7 +128,8 @@ defineProps<{
       </template>
       <template #trigger>
         <q-input
-          label="วันเดือนปีเกิด"
+          id="input-birth-date"
+          :label="$t('formDialogInputBirthDate')"
           :dense="dense"
           :outlined="readonly ? false : outlined"
           :readonly="readonly"
@@ -143,11 +157,12 @@ defineProps<{
       </template>
     </VueDatePicker>
     <q-input
+      id="input-age"
       :dense="dense"
       :outlined="readonly ? false : outlined"
       :borderless="readonly"
       readonly
-      label="อายุ"
+      :label="$t('formDialogInputAge')"
       class="col-3"
       :model-value="birthDate ? userStore.calculateAge(birthDate) : ''"
     />
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 07e2eb69..a582799d 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -159,7 +159,7 @@ function reset() {
             id="okBtn"
             color="primary"
             class="q-px-md"
-            label="ตกลง"
+            :label="$t('agree')"
             @click="close"
           />
         </div>
diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index a0539170..2bf084b9 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -34,7 +34,7 @@ const color = ['pink', 'purple'];
 
       <div class="stat__content">
         <div class="text-h5 text-weight-bold">{{ v.count }}</div>
-        <div class="text-weight-bold">{{ $t(v.label) }}</div>
+        <div class="text-weight-bold">{{ v.label }}</div>
       </div>
     </AppBox>
   </div>
diff --git a/src/i18n/en-US/form-dialog.ts b/src/i18n/en-US/form-dialog.ts
index 2801d97a..f0a77c4c 100644
--- a/src/i18n/en-US/form-dialog.ts
+++ b/src/i18n/en-US/form-dialog.ts
@@ -1,4 +1,5 @@
 export default {
+  // Branch & HQ
   formDialogTitleImg: 'Office Image',
   formDialogBtnImg: 'Add Office Image',
 
@@ -49,4 +50,51 @@ export default {
   formDialogInputSubDistrictValidate: 'Please enter the sub-district',
 
   formDialogBtnLocation: 'Start sharing location',
+
+  // Personnel
+  formDialogTitleAddressPersonnel: 'Personnel Address',
+
+  formDialogBtnEditProfile: 'Edit Profile',
+  formDialogBtnUploadProfile: 'Upload Image',
+  formDialogTitleUserStatus: 'User Status',
+
+  formDialogInputHqIdValidate: 'Please select head office',
+  formDialogInputBrId: 'Branch Code',
+  formDialogInputUserType: 'User Type',
+  formDialogInputUserTypeValidate: 'Please select user type',
+  formDialogInputUserRole: 'User Role',
+  formDialogInputUserRoleValidate: 'Please select user role',
+  formDialogInputUsername: 'Username',
+  formDialogInputUsernameValidate: 'Please enter username',
+  formDialogInputUserCode: 'Personnel Code',
+
+  formDialogTitlePersonnel: 'Personnel Information',
+  formDialogInputFirstName: 'First Name',
+  formDialogInputFirstNameValidate: 'Please enter first name',
+  formDialogInputLastName: 'Last Name',
+  formDialogInputLastNameValidate: 'Please enter last name',
+  formDialogInputFirstNameEN: 'First Name',
+  formDialogInputFirstNameENValidate: 'Please enter first name',
+  formDialogInputLastNameEN: 'Last Name',
+  formDialogInputLastNameENValidate: 'Please enter last name',
+  formDialogInputTelephone: 'Telephone Number',
+  formDialogInputEmail: 'Email',
+  formDialogInputGender: 'Gender',
+  formDialogInputBirthDate: 'Birth Date',
+  formDialogInputAge: 'Age',
+
+  formDialogTitlePersonnelAddress: 'Personnel Address',
+  formDialogTitleAddressPure: 'Address',
+
+  formDialogTitleByType: 'Job Information',
+  formDialogInputRegisNo: 'Registration Number',
+  formDialogInputStartDate: 'Start Date',
+  formDialogInputRetireDate: 'Retire Date',
+  formDialogInputResponsibleArea: 'Responsible Area',
+  formDialogInputDiscount: 'Discount Condition',
+  formDialogInputSourceNationality: 'Source Nationality',
+  formDialogInputImportNationality: 'Import Nationality',
+  formDialogInputTrainingPlace: 'Training Place',
+  formDialogInputCheckpoint: 'Checkpoint',
+  formDialogAttachment: 'Attachment Document',
 };
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index f20a58a1..af76c6ef 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -9,6 +9,7 @@ import status from './status';
 
 export default {
   ok: 'Confirm',
+  agree: 'Agree',
   cancel: 'Cancel',
   failed: 'Failed',
   success: 'Success',
diff --git a/src/i18n/en-US/personnel-main-page.ts b/src/i18n/en-US/personnel-main-page.ts
index c329c60d..c4e656e5 100644
--- a/src/i18n/en-US/personnel-main-page.ts
+++ b/src/i18n/en-US/personnel-main-page.ts
@@ -9,5 +9,9 @@ export default {
   DELEGATE: 'Delegate',
   AGENCY: 'Agency',
 
-  personnelStatTitle: 'Summary data of '
+  personnelStatTitle: 'Summary data of ',
+
+  personnelCardUserType: 'Type',
+  personnelCardTelephone: 'Telephone',
+  personnelCardAge: 'Age',
 };
diff --git a/src/i18n/th-th/form-dialog.ts b/src/i18n/th-th/form-dialog.ts
index 6cd41465..98d701b7 100644
--- a/src/i18n/th-th/form-dialog.ts
+++ b/src/i18n/th-th/form-dialog.ts
@@ -1,4 +1,5 @@
 export default {
+  // Branch & HQ
   formDialogTitleImg: 'ภาพสำนักงาน',
   formDialogBtnImg: 'เพิ่มรูปสำนักงาน',
 
@@ -48,4 +49,51 @@ export default {
   formDialogInputSubDistrictValidate: 'โปรดระบุตำบล',
 
   formDialogBtnLocation: 'เริ่มแชร์โลเคชั่น',
+
+  // Personnel
+  formDialogTitleAddressPersonnel: 'ที่อยู่พนักงาน',
+
+  formDialogBtnEditProfile: 'แก้ไขโปรไฟล์',
+  formDialogBtnUploadProfile: 'อัปโหลดรูปภาพ',
+  formDialogTitleUserStatus: 'สถานะผู้ใช้งาน',
+
+  formDialogInputHqIdValidate: 'กรุณาเลือกสำนักงานใหญ่',
+  formDialogInputBrId: 'รหัสสาขา',
+  formDialogInputUserType: 'ประเภทผู้ใช้งาน',
+  formDialogInputUserTypeValidate: 'กรุณาเลือกประเภทผู้ใช้งาน',
+  formDialogInputUserRole: 'สิทธิ์ผู้ใช้งาน',
+  formDialogInputUserRoleValidate: 'กรุณาเลือกสิทธิ์ผู้ใช้งาน',
+  formDialogInputUsername: 'ชื่อผู้ใช้งาน (Username)',
+  formDialogInputUsernameValidate: 'กรุณากรอกชื่อผู้ใช้งาน',
+  formDialogInputUserCode: 'รหัสพนักงาน',
+
+  formDialogTitlePersonnel: 'ข้อมูลบุคลากร',
+  formDialogInputFirstName: 'ชื่อ ภาษาไทย',
+  formDialogInputFirstNameValidate: 'กรุณากรอกชื่อ ภาษาไทย',
+  formDialogInputLastName: 'นามสกุล ภาษาไทย',
+  formDialogInputLastNameValidate: 'กรุณากรอกนามสกุล ภาษาไทย',
+  formDialogInputFirstNameEN: 'ชื่อ ภาษาอังกฤษ',
+  formDialogInputFirstNameENValidate: 'กรุณากรอกชื่อ ภาษาอังกฤษ',
+  formDialogInputLastNameEN: 'นามสกุล ภาษาอังกฤษ',
+  formDialogInputLastNameENValidate: 'กรุณากรอกนามสกุล ภาษาอังกฤษ',
+  formDialogInputTelephone: 'เบอร์โทร',
+  formDialogInputEmail: 'อีเมล',
+  formDialogInputGender: 'เพศ',
+  formDialogInputBirthDate: 'วันเดือนปีเกิด',
+  formDialogInputAge: 'อายุ',
+
+  formDialogTitlePersonnelAddress: 'ข้อมูลที่อยู่พนักงาน',
+  formDialogTitleAddressPure: 'ที่อยู่',
+
+  formDialogTitleByType: 'ข้อมูลการทำงาน',
+  formDialogInputRegisNo: 'เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)',
+  formDialogInputStartDate: 'วันที่เริ่มงาน',
+  formDialogInputRetireDate: 'วันที่พ้นสภาพพนักงาน',
+  formDialogInputResponsibleArea: 'พื้นที่ ที่รับผิดชอบในการส่งเอกสาร',
+  formDialogInputDiscount: 'เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน',
+  formDialogInputSourceNationality: 'สัญชาติต้นทาง',
+  formDialogInputImportNationality: 'นำเข้าสัญชาติ',
+  formDialogInputTrainingPlace: 'สถานที่อบรม',
+  formDialogInputCheckpoint: 'ด่าน',
+  formDialogAttachment: 'แบบเอกสารประจำตัว',
 };
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index 295f84c9..7cd568ef 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -9,6 +9,7 @@ import status from './status';
 
 export default {
   ok: 'ยืนยัน',
+  agree: 'ตกลง',
   cancel: 'ยกเลิก',
   failed: 'เกิดข้อผิดพลาด',
   success: 'สำเร็จ',
diff --git a/src/i18n/th-th/personnel-main-page.ts b/src/i18n/th-th/personnel-main-page.ts
index 8bf9fe41..84e31b03 100644
--- a/src/i18n/th-th/personnel-main-page.ts
+++ b/src/i18n/th-th/personnel-main-page.ts
@@ -2,7 +2,7 @@ export default {
   personnelManagement: 'จัดการบุคลากร',
   personnelTooltipTitle: 'ยังไม่มีข้อมูลบุคลากร',
   personnelTooltipCaption: 'คลิก + เพื่อเพิ่มบุคลากร',
-  personnelAdd: 'เพิ่มข้อมูลบุคลากร',
+  personnelAdd: 'เพิ่มบุคลากร',
 
   USER: 'พนักงาน',
   MESSENGER: 'พนักงานส่งเอกสาร',
@@ -10,4 +10,8 @@ export default {
   AGENCY: 'เอเจนซี่',
 
   personnelStatTitle: 'สรุปจำนวนข้อมูล',
+
+  personnelCardUserType: 'ประเภท',
+  personnelCardTelephone: 'โทรศัพท์',
+  personnelCardAge: 'อายุ',
 };

From 4bd2a08cb5777f748b99d336a285132d713205d3 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 22 Apr 2024 10:54:32 +0700
Subject: [PATCH 2/2] feat: i18n, edit branch

---
 .../02_personnel-management/MainPage.vue      | 67 +++++++++++++------
 1 file changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index b1349157..30830668 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -198,6 +198,7 @@ async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
   }
 
   if (idEdit && userData.value) {
+    isEdit.value = true;
     assignFormData(idEdit);
 
     if (formData.value.userType === 'AGENCY') {
@@ -239,7 +240,7 @@ async function onSubmit() {
     formData.value.profileImage = null;
   }
 
-  if (isEdit.value === true && userId.value) {
+  if (isEdit.value && userId.value) {
     dialog({
       color: 'primary',
       icon: 'mdi-pencil-outline',
@@ -262,7 +263,10 @@ async function onSubmit() {
           hqId.value !== currentUser.value.branch[0].id &&
           brId.value !== currentUser.value.branch[0].id
         ) {
-          userStore.removeBranch(userId.value, currentUser.value.branch[0].id);
+          await branchStore.removeUser(
+            currentUser.value.branch[0].id,
+            userId.value,
+          );
 
           await branchStore.addUser(
             !!brId.value ? brId.value : hqId.value,
@@ -270,6 +274,15 @@ async function onSubmit() {
           );
         }
 
+        if (!currentUser.value?.branch[0]) {
+          if (brId.value || hqId.value) {
+            await branchStore.addUser(
+              (!!brId.value ? brId.value : hqId.value)!,
+              userId.value,
+            );
+          }
+        }
+
         if (userId.value && formDataEdit.userType === 'AGENCY') {
           if (!agencyFile.value) return;
           const payload: UserAttachmentCreate = {
@@ -433,17 +446,21 @@ async function assignFormData(idEdit: string) {
       ? (statusToggle.value = true)
       : (statusToggle.value = false);
     userId.value = foundUser.id;
-    if (foundUser.branch[0].isHeadOffice) {
-      hqId.value = foundUser.branch[0].id as string;
-    } else {
-      hqId.value = foundUser.branch[0].headOfficeId as string;
-      brId.value = foundUser.branch[0].id;
+
+    if (foundUser.branch[0]) {
+      if (foundUser.branch[0].isHeadOffice) {
+        hqId.value = foundUser.branch[0].id as string;
+      } else {
+        hqId.value = foundUser.branch[0].headOfficeId as string;
+        brId.value = foundUser.branch[0].id;
+      }
     }
+
     code.value = foundUser.code;
     urlProfile.value = foundUser.profileImageUrl;
     isEdit.value = true;
     profileSubmit.value = true;
-    await userStore.fetchBrOption(hqId.value);
+    hqId.value && (await userStore.fetchBrOption(hqId.value));
     if (formData.value.districtId) {
       await adrressStore.fetchSubDistrictByProvinceId(
         formData.value.districtId,
@@ -538,9 +555,10 @@ watch(
             {{ selectorLabel === '' ? '' : $t(selectorLabel) }}
           </div>
           <q-btn
+            id="btn-add-personnel"
             dense
             unelevated
-            label="+ เพิ่มบุคลากร"
+            :label="'+ ' + $t('personnelAdd')"
             padding="4px 16px"
             @click="openDialog('FORM')"
             style="background-color: var(--cyan-6); color: white"
@@ -566,6 +584,7 @@ watch(
     <AppBox bordered class="column" style="width: 100%; min-height: 70vh">
       <div class="row q-mb-md justify-between">
         <q-btn
+          id="btn-filter"
           icon="mdi-tune-vertical-variant"
           size="sm"
           class="bordered rounded"
@@ -609,7 +628,7 @@ watch(
           style="width: 250px"
           outlined
           dense
-          label="ค้นหา"
+          :label="$t('search')"
           debounce="500"
           v-model="inputSearch"
         ></q-input>
@@ -639,10 +658,10 @@ watch(
               male: v.gender === 'male',
               female: v.gender === 'female',
               detail: [
-                { label: 'ประเภท', value: $t(v.userType) },
-                { label: 'โทรศัพท์', value: v.telephoneNo },
+                { label: $t('personnelCardUserType'), value: $t(v.userType) },
+                { label: $t('personnelCardTelephone'), value: v.telephoneNo },
                 {
-                  label: 'อายุ',
+                  label: $t('personnelCardAge'),
                   value: userStore.calculateAge(v.birthDate as Date),
                 },
               ],
@@ -697,6 +716,8 @@ watch(
   >
     <template #info>
       <InfoForm
+        :addressTitle="$t('formDialogTitleAddressPure')"
+        :addressTitleEN="$t('formDialogTitleAddressPure') + ' ENG'"
         :readonly="!infoPersonCardEdit"
         v-model:address="formData.address"
         v-model:addressEN="formData.addressEN"
@@ -780,9 +801,9 @@ watch(
   <FormDialog
     removeDialog
     ref="formDialogRef"
-    title="เพิ่มบุคลากร"
-    addressTitle="ที่อยู่พนักงาน"
-    addressENTitle="ที่อยู่พนักงาน ENG"
+    :title="$t('personnelAdd')"
+    :addressTitle="$t('formDialogTitleAddressPure')"
+    :addressTitleEN="$t('formDialogTitleAddressPure') + ' ENG'"
     v-model:modal="modal"
     v-model:address="formData.address"
     v-model:addressEN="formData.addressEN"
@@ -815,28 +836,31 @@ watch(
         >
           <div class="col-6">
             <q-btn
+              id="btn-profile-cancel"
               dense
               unelevated
               outlined
               padding="8px"
               class="cancel-img-btn full-width"
-              label="ยกเลิก"
+              :label="$t('cancel')"
               @click="urlProfile = ''"
             />
           </div>
           <div class="col-6">
             <q-btn
+              id="btn-profile-save"
               dense
               unelevated
               outlined
               padding="8px"
               class="submit-img-btn full-width"
-              label="บันทึก"
+              :label="$t('save')"
               @click="profileSubmit = true"
             />
           </div>
         </div>
         <q-btn
+          id="btn-profile-edit"
           v-else-if="urlProfile && profileSubmit"
           dense
           unelevated
@@ -844,18 +868,19 @@ watch(
           padding="8px"
           icon="mdi-pencil-outline"
           class="edit-img-btn q-mt-md full-width"
-          label="แก้ไขโปรไฟล์"
+          :label="$t('formDialogBtnEditProfile')"
           @click.prevent="inputFile.click(), (profileSubmit = false)"
         />
 
         <q-btn
+          id="btn-profile-upload"
           v-else
           dense
           unelevated
           outlined
           padding="8px"
           class="upload-img-btn q-mt-md full-width"
-          label="อัปโหลดรูปภาพ"
+          :label="$t('formDialogBtnUploadProfile')"
           :class="{ dark: $q.dark.isActive }"
           @click="inputFile.click()"
         />
@@ -868,7 +893,7 @@ watch(
             padding="none"
             class="q-pr-md"
           />
-          <span>สถานะผู้ใช้งาน</span>
+          <span>{{ $t('formDialogTitleUserStatus') }}</span>
         </div>
       </div>
     </template>