feat: form id, i18n

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"

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

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>

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) : ''"
     />

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>

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>