feat: form id, i18n

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>