From ee66e825bbb80f8a54996beea6831db4ff13c3b3 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 11 Apr 2024 22:17:24 +0700
Subject: [PATCH] refactor: edit form use FormComponent (name, top, byType)
 instead

---
 .../02_personnel-management/FormByType.vue    | 307 ++++++++++
 .../02_personnel-management/FormName.vue      |  56 ++
 .../02_personnel-management/FormTop.vue       | 124 ++++
 src/components/FormDialog.vue                 |  10 +-
 .../02_personnel-management/MainPage.vue      | 535 +++---------------
 5 files changed, 565 insertions(+), 467 deletions(-)
 create mode 100644 src/components/02_personnel-management/FormByType.vue
 create mode 100644 src/components/02_personnel-management/FormName.vue
 create mode 100644 src/components/02_personnel-management/FormTop.vue

diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
new file mode 100644
index 00000000..6f345419
--- /dev/null
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import useUserStore from 'src/stores/user';
+import { dateFormat } from 'src/utils/datetime';
+
+const userStore = useUserStore();
+
+const userType = defineModel<string>('userType');
+const telephoneNo = defineModel<string>('telephoneNo');
+const gender = defineModel<string>('gender');
+const email = defineModel<string>('email');
+const registrationNo = defineModel<string | null>('registrationNo');
+const startDate = defineModel<Date | null>('startDate');
+const retireDate = defineModel<Date | null>('retireDate');
+const birthDate = defineModel<Date | null>('birthDate');
+const responsibleArea = defineModel<string>('responsibleArea');
+const discountCondition = defineModel<string | null | undefined>(
+  'discountCondition',
+);
+const sourceNationality = defineModel<string | null | undefined>(
+  'sourceNationality',
+);
+const importNationality = defineModel<string | null | undefined>(
+  'importNationality',
+);
+const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
+const checkPoint = defineModel<string>('checkPoint');
+const checkPointEN = defineModel<string>('checkPointEN');
+const idenDoc = defineModel<File>('idenDoc');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+}>();
+</script>
+<template>
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    class="col-3"
+    label="เบอร์โทร"
+    v-model="telephoneNo"
+    mask="##########"
+  />
+  <q-select
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    :hide-dropdown-icon="readonly"
+    emit-value
+    map-options
+    label="เพศ"
+    class="col-3"
+    bg-color="white"
+    option-label="label"
+    option-value="value"
+    v-model="gender"
+    :options="userStore.userOption.genderOpts"
+  />
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    label="อีเมล"
+    class="col-6"
+    v-model="email"
+  />
+  <div
+    v-if="userType === 'USER' || userType === 'MESSENGER'"
+    class="row col-12 q-col-gutter-md"
+    style="margin-left: 0px; padding-left: 0px"
+  >
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
+      class="col-12"
+      v-model="registrationNo"
+    />
+    <VueDatePicker
+      utc
+      autoApply
+      v-model="startDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-6"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          label="วันที่เริ่มงาน"
+          :dense="dense"
+          :outlined="outlined"
+          :readonly="readonly"
+          :model-value="startDate ? dateFormat(startDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="primary"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="startDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="startDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+
+    <VueDatePicker
+      utc
+      autoApply
+      v-model="retireDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-6"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          label="วันที่พ้นสภาพพนักงาน"
+          :dense="dense"
+          :outlined="outlined"
+          :readonly="readonly"
+          :model-value="retireDate ? dateFormat(retireDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="primary"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="retireDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="retireDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+
+    <VueDatePicker
+      utc
+      autoApply
+      v-model="birthDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-3"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          label="วันเดือนปีเกิด"
+          :dense="dense"
+          :outlined="outlined"
+          :readonly="readonly"
+          :model-value="birthDate ? dateFormat(birthDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="primary"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="birthDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="birthDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="อายุ"
+      class="col-3"
+      :model-value="birthDate ? userStore.calculateAge(birthDate) : ''"
+    />
+    <q-select
+      v-if="userType === 'MESSENGER'"
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      emit-value
+      map-options
+      options-dense
+      label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
+      class="col-12"
+      bg-color="white"
+      option-label="label"
+      option-value="value"
+      v-model="responsibleArea"
+      :options="userStore.userOption.responsibleAreaOpts"
+    />
+  </div>
+  <div v-if="userType === 'DELEGATE'" class="row col-12" style="row-gap: 16px">
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
+      class="col-12"
+      v-model="discountCondition"
+      type="textarea"
+    />
+  </div>
+  <div
+    v-if="userType === 'AGENCY'"
+    class="row col-12 q-col-gutter-md"
+    style="margin-left: 0px; padding-left: 0px"
+  >
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      emit-value
+      map-options
+      options-dense
+      label="สัญชาติต้นทาง"
+      class="col-3"
+      bg-color="white"
+      option-label="label"
+      option-value="label"
+      v-model="sourceNationality"
+      :options="userStore.userOption.nationalityOpts"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      emit-value
+      map-options
+      options-dense
+      label="นำเข้าสัญชาติ"
+      class="col-3"
+      option-label="label"
+      option-value="label"
+      v-model="importNationality"
+      :options="userStore.userOption.nationalityOpts"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      emit-value
+      map-options
+      options-dense
+      label="สถานที่อบรม"
+      class="col-6"
+      option-label="label"
+      option-value="label"
+      v-model="trainingPlace"
+      :options="userStore.userOption.trainingPlaceOpts"
+    />
+    <q-input dense outlined label="ด่าน" class="col-6" v-model="checkPoint" />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="ด่าน ENG"
+      class="col-6"
+      v-model="checkPointEN"
+    />
+    <q-file
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="แบบเอกสารประจำตัว"
+      class="col-12"
+      v-model="idenDoc"
+      type="textarea"
+    />
+  </div>
+</template>
diff --git a/src/components/02_personnel-management/FormName.vue b/src/components/02_personnel-management/FormName.vue
new file mode 100644
index 00000000..e719f524
--- /dev/null
+++ b/src/components/02_personnel-management/FormName.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import useUserStore from 'src/stores/user';
+
+const firstName = defineModel<string>('firstName');
+const lastName = defineModel<string>('lastName');
+const firstNameEN = defineModel<string>('firstNameEN');
+const lastNameEN = defineModel<string>('lastNameEN');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+}>();
+</script>
+<template>
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    hide-bottom-space
+    class="col-3"
+    label="ชื่อ ภาษาไทย"
+    v-model="firstName"
+    :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
+  />
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    hide-bottom-space
+    class="col-3"
+    label="นามสกุล ภาษาไทย"
+    v-model="lastName"
+    :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
+  />
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    hide-bottom-space
+    class="col-3"
+    label="ชื่อ ภาษาอังกฤษ"
+    v-model="firstNameEN"
+    :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
+  />
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    hide-bottom-space
+    class="col-3"
+    label="นามสกุล ภาษาอังกฤษ"
+    v-model="lastNameEN"
+    :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
+  />
+</template>
diff --git a/src/components/02_personnel-management/FormTop.vue b/src/components/02_personnel-management/FormTop.vue
new file mode 100644
index 00000000..da50bd8b
--- /dev/null
+++ b/src/components/02_personnel-management/FormTop.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import useUserStore from 'src/stores/user';
+
+const userStore = useUserStore();
+
+const hqId = defineModel<string | null | undefined>('hqId');
+const brId = defineModel<string | null | undefined>('brId');
+const userType = defineModel<string>('userType');
+const userRole = defineModel<string>('userRole');
+const userName = defineModel<string | null | undefined>('userName');
+const userCode = defineModel<string>('userCode');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+}>();
+
+async function selectHq(id: string) {
+  if (!id) return;
+  brId.value = '';
+  userStore.userOption.brOpts = [];
+  await userStore.fetchBrOption(id);
+}
+</script>
+<template>
+  <q-select
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    :hide-dropdown-icon="readonly"
+    emit-value
+    map-options
+    options-dense
+    hide-bottom-space
+    class="col-6"
+    bg-color="white"
+    option-label="label"
+    option-value="value"
+    label="รหัสสำนักงานใหญ่"
+    v-model="hqId"
+    :options="userStore.userOption.hqOpts"
+    :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
+    @update:model-value="(val: string) => selectHq(val)"
+  />
+  <q-select
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    :hide-dropdown-icon="readonly"
+    emit-value
+    map-options
+    options-dense
+    hide-bottom-space
+    class="col-6"
+    label="รหัสสาขา"
+    bg-color="white"
+    option-label="label"
+    option-value="value"
+    v-model="brId"
+    :options="userStore.userOption.brOpts"
+  />
+  <q-select
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    :hide-dropdown-icon="readonly"
+    emit-value
+    map-options
+    options-dense
+    hide-bottom-space
+    class="col-3"
+    bg-color="white"
+    option-value="value"
+    option-label="label"
+    label="ประเภทผู้ใช้งาน"
+    v-model="userType"
+    :options="userStore.userOption.userTypeOpts"
+    :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
+  />
+  <q-select
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    :hide-dropdown-icon="readonly"
+    emit-value
+    map-options
+    options-dense
+    hide-bottom-space
+    class="col-3"
+    bg-color="white"
+    label="สิทธิ์ผู้ใช้งาน"
+    option-label="label"
+    option-value="value"
+    v-model="userRole"
+    :options="userStore.userOption.roleOpts"
+    :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
+  />
+  <q-input
+    v-if="userName"
+    :dense="dense"
+    :outlined="outlined"
+    :readonly="readonly"
+    emit-value
+    map-options
+    options-dense
+    hide-bottom-space
+    class="col-3"
+    bg-color="white"
+    label="ชื่อผู้ใช้งาน (Username)"
+    v-model="userName"
+    :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
+  />
+  <q-input
+    :dense="dense"
+    :outlined="outlined"
+    readonly
+    hide-bottom-space
+    :class="userName ? 'col-3' : 'col-6'"
+    bg-color="white"
+    label="รหัสพนักงาน"
+    v-model="userCode"
+  />
+</template>
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index d3d3ca38..85ae9fdc 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
 
 import { Province, District, SubDistrict } from 'stores/address';
@@ -22,9 +22,9 @@ const adrressStore = useAddressStore();
 const modal = defineModel('modal', { default: false });
 const address = defineModel('address', { default: '' });
 const addressEN = defineModel('addressEN', { default: '' });
-const provinceId = defineModel<string>('provinceId');
-const districtId = defineModel<string>('districtId');
-const subDistrictId = defineModel<string>('subDistrictId');
+const provinceId = defineModel<string | null | undefined>('provinceId');
+const districtId = defineModel<string | null | undefined>('districtId');
+const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string>('zipCode', { default: '' });
 
 const addrOptions = ref<{
@@ -88,7 +88,7 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <q-dialog full-width v-model="modal">
+  <q-dialog full-width v-model="modal" @hide="close">
     <AppBox style="padding: 0; border-radius: var(--radius-2); max-width: 80%">
       <q-form greedy @submit.prevent @validation-success="submit">
         <!-- header -->
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 71ef3cdd..ddd0144c 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -17,7 +17,9 @@ import SelectorList from 'components/SelectorList.vue';
 import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import FormDialog from 'src/components/FormDialog.vue';
-import { dateFormat } from 'src/utils/datetime';
+import FormTop from 'src/components/02_personnel-management/FormTop.vue';
+import FormName from 'src/components/02_personnel-management/FormName.vue';
+import FormByType from 'src/components/02_personnel-management/FormByType.vue';
 
 const router = useRouter();
 const userStore = useUserStore();
@@ -52,7 +54,7 @@ const defaultFormData = {
   userType: '',
   keycloakId: '',
   profileImage: null,
-  birthDate: '',
+  birthDate: null,
   responsibleArea: '',
 };
 
@@ -66,7 +68,6 @@ const selectorLabel = ref('');
 const hqId = ref('');
 const brId = ref('');
 const username = ref('');
-const age = ref<string>();
 const formDialogRef = ref();
 const userStats = ref<BranchUserStats[]>();
 const typeStats = ref<UserTypeStats>();
@@ -112,10 +113,10 @@ inputFile.addEventListener('change', (e) => {
 });
 
 const selectorList = [
-  { label: 'personnelSelector1', count: 0 },
-  { label: 'personnelSelector2', count: 0 },
-  { label: 'personnelSelector3', count: 0 },
-  { label: 'personnelSelector4', count: 0 },
+  { label: 'USER', count: 0 },
+  { label: 'MESSENGER', count: 0 },
+  { label: 'DELEGATE', count: 0 },
+  { label: 'AGENCY', count: 0 },
 ];
 
 async function createKeycloak() {
@@ -128,43 +129,17 @@ async function createKeycloak() {
   return res.data;
 }
 
-async function fetchHqOption() {
-  if (userStore.userOption.hqOpts.length === 0) {
-    const res = await branchStore.fetchList({ pageSize: 999, filter: 'head' });
-    if (res) {
-      res.result.map((item) => {
-        userStore.userOption.hqOpts.push({
-          label: item.code,
-          value: item.id,
-        });
-      });
-    }
-  }
-}
-
-async function fetchBrOption(id: string) {
-  const res = await branchStore.fetchById(id, {
-    includeSubBranch: true,
-  });
-  if (res && res?.branch) {
-    res.branch.map((item) => {
-      userStore.userOption.brOpts.push({
-        label: item.code,
-        value: item.id,
-      });
-    });
-  }
-}
-
 async function openDialog(idEdit?: string) {
   modal.value = true;
-  age.value = '';
-  if (userStore.userOption.hqOpts.length === 0) {
-    await fetchHqOption();
-  }
-  if (userStore.userOption.roleOpts.length === 0) {
-    await userStore.fetchRoleOption();
-  }
+  userStore.userOption.brOpts = [];
+
+  userStore.userOption.hqOpts.length === 0
+    ? await userStore.fetchHqOption()
+    : '';
+  userStore.userOption.roleOpts.length === 0
+    ? await userStore.fetchRoleOption()
+    : '';
+
   if (idEdit && userData.value) {
     const foundUser = userData.value.result.find((user) => user.id === idEdit);
 
@@ -209,15 +184,16 @@ async function openDialog(idEdit?: string) {
           (foundUser.birthDate && new Date(foundUser.birthDate)) || null,
       };
 
+      foundUser.status === 'ACTIVE'
+        ? (status.value = true)
+        : (status.value = false);
       userId.value = foundUser.id;
       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;
-      if (userStore.userOption.brOpts.length === 0) {
-        await fetchBrOption(hqId.value);
-      }
+      await userStore.fetchBrOption(hqId.value);
       await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
       await formDialogRef.value.fetchDistrict(formData.value.provinceId);
     }
@@ -225,17 +201,17 @@ async function openDialog(idEdit?: string) {
 }
 
 function onClose() {
-  modal.value = false;
-  age.value = '';
-  isEdit.value = false;
+  code.value = '';
   hqId.value = '';
   brId.value = '';
-  username.value = '';
   userId.value = '';
-  code.value = '';
+  username.value = '';
   urlProfile.value = '';
-  Object.assign(formData.value, defaultFormData);
+  modal.value = false;
+  status.value = false;
+  isEdit.value = false;
   mapUserType(selectorLabel.value);
+  Object.assign(formData.value, defaultFormData);
 }
 
 async function onSubmit() {
@@ -251,7 +227,6 @@ async function onSubmit() {
       action: async () => {
         const formDataEdit = { ...formData.value };
         delete formDataEdit.keycloakId;
-        // delete formDataEdit.profileImage;
         await userStore.editById(userId.value, formDataEdit);
         onClose();
         userStore.fetchList({ includeBranch: true });
@@ -311,30 +286,11 @@ function mapUserType(label: string) {
   }
 }
 
-function calculateAge(birthDate: Date | null): string {
-  if (!birthDate) return '';
-  const birthDateTimeStamp = new Date(birthDate).getTime();
-  const now = new Date();
-  const diff = now.getTime() - birthDateTimeStamp;
-
-  const ageDate = new Date(diff);
-  const years = ageDate.getUTCFullYear() - 1970;
-  // const months = ageDate.getUTCMonth();
-  // const days = ageDate.getUTCDate() - 1;
-
-  age.value = `${years} ปี`;
-  return `${years} ปี`;
-}
-
-async function selectHq(id: string) {
-  if (!id) return;
-  brId.value = '';
-  userStore.userOption.brOpts = [];
-  await fetchBrOption(id);
-}
-
 onMounted(async () => {
   await userStore.fetchList({ includeBranch: true });
+  userStore.userOption.roleOpts.length === 0
+    ? await userStore.fetchRoleOption()
+    : '';
   typeStats.value = await userStore.typeStats();
   const res = await branchStore.userStats(formData.value.userType);
   if (res) {
@@ -352,17 +308,6 @@ watch(
     }
   },
 );
-
-watch(
-  () => formData.value.birthDate,
-  (birthDate) => {
-    if (birthDate) {
-      calculateAge(birthDate);
-    } else {
-      age.value = '';
-    }
-  },
-);
 </script>
 
 <template>
@@ -425,10 +370,20 @@ watch(
             male: v.gender === 'male',
             female: v.gender === 'female',
             detail: [
-              { label: 'ตำแหน่ง', value: v.userType },
+              { label: 'ประเภท', value: $t(v.userType) },
+              {
+                label: 'ตำแหน่ง',
+                value: v.userRole
+                  ? userStore.userOption.roleOpts.find(
+                      (r) => r.value === v.userRole,
+                    )?.label || ''
+                  : '',
+              },
               { label: 'โทรศัพท์', value: v.telephoneNo },
-              { label: 'อีเมล', value: v.email },
-              { label: 'อายุ', value: calculateAge(v.birthDate as Date) },
+              {
+                label: 'อายุ',
+                value: userStore.calculateAge(v.birthDate as Date),
+              },
             ],
             badge: v.code,
             disabled: v.status === 'INACTIVE',
@@ -469,9 +424,9 @@ watch(
     v-model:modal="modal"
     v-model:address="formData.address"
     v-model:addressEN="formData.addressEN"
-    v-model:provinceId="formData.provinceId as string"
-    v-model:districtId="formData.districtId as string"
-    v-model:subDistrictId="formData.subDistrictId as string"
+    v-model:provinceId="formData.provinceId"
+    v-model:districtId="formData.districtId"
+    v-model:subDistrictId="formData.subDistrictId"
     v-model:zipCode="formData.zipCode"
     title="เพิ่มบุคลากร"
     addressTitle="ที่อยู่พนักงาน"
@@ -480,93 +435,16 @@ watch(
     :close="() => onClose()"
   >
     <template #top>
-      <q-select
+      <FormTop
         dense
         outlined
-        emit-value
-        map-options
-        options-dense
-        hide-bottom-space
-        class="col-6"
-        bg-color="white"
-        option-label="label"
-        option-value="value"
-        label="รหัสสำนักงานใหญ่"
-        v-model="hqId"
-        :options="userStore.userOption.hqOpts"
-        :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
-        @update:model-value="(val: string) => selectHq(val)"
+        v-model:hqId="hqId"
+        v-model:brId="brId"
+        v-model:userType="formData.userType"
+        v-model:userRole="formData.userRole"
+        v-model:userName="username"
+        v-model:userCode="code"
       />
-      <q-select
-        dense
-        outlined
-        emit-value
-        map-options
-        options-dense
-        hide-bottom-space
-        class="col-6"
-        label="รหัสสาขา"
-        bg-color="white"
-        option-label="label"
-        option-value="value"
-        v-model="brId"
-        :options="userStore.userOption.brOpts"
-        :rules="[(val: string) => !!val || 'กรุณาเลือกสาขา']"
-      />
-      <q-select
-        dense
-        outlined
-        emit-value
-        map-options
-        options-dense
-        hide-bottom-space
-        class="col-3"
-        bg-color="white"
-        option-value="value"
-        option-label="label"
-        label="ประเภทผู้ใช้งาน"
-        v-model="formData.userType"
-        :options="userStore.userOption.userTypeOpts"
-        :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
-      />
-      <q-select
-        dense
-        outlined
-        emit-value
-        map-options
-        options-dense
-        hide-bottom-space
-        class="col-3"
-        bg-color="white"
-        label="สิทธิ์ผู้ใช้งาน"
-        option-label="label"
-        option-value="value"
-        v-model="formData.userRole"
-        :options="userStore.userOption.roleOpts"
-        :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
-      />
-      <q-input
-        dense
-        outlined
-        hide-bottom-space
-        class="col-3"
-        bg-color="white"
-        label="ชื่อผู้ใช้งาน (Username)"
-        v-model="username"
-        :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
-      />
-      <q-input
-        dense
-        outlined
-        readonly
-        hide-bottom-space
-        class="col-3"
-        bg-color="white"
-        label="รหัสพนักงาน"
-        v-model="code"
-      />
-      <!--         :rules="[(val: string) => !!val || 'กรุณากรอกรหัสพนักงาน']"
- -->
     </template>
 
     <template #prepend>
@@ -621,301 +499,34 @@ watch(
     </template>
 
     <template #midTop>
-      <q-input
+      <FormName
         dense
         outlined
-        hide-bottom-space
-        class="col-3"
-        label="ชื่อ ภาษาไทย"
-        v-model="formData.firstName"
-        :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
-      />
-      <q-input
-        dense
-        outlined
-        hide-bottom-space
-        class="col-3"
-        label="นามสกุล ภาษาไทย"
-        v-model="formData.lastName"
-        :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
-      />
-      <q-input
-        dense
-        outlined
-        hide-bottom-space
-        class="col-3"
-        label="ชื่อ ภาษาอังกฤษ"
-        v-model="formData.firstNameEN"
-        :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
-      />
-      <q-input
-        dense
-        outlined
-        hide-bottom-space
-        class="col-3"
-        label="นามสกุล ภาษาอังกฤษ"
-        v-model="formData.lastNameEN"
-        :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
+        v-model:firstName="formData.firstName"
+        v-model:lastName="formData.lastName"
+        v-model:firstNameEN="formData.firstNameEN"
+        v-model:lastNameEN="formData.lastNameEN"
       />
     </template>
 
-    <template #midBottom>
-      <q-input
+    <template #midBottom v-if="formData.userType">
+      <FormByType
         dense
         outlined
-        class="col-3"
-        label="เบอร์โทร"
-        v-model="formData.telephoneNo"
-        mask="##########"
+        v-model:userType="formData.userType"
+        v-model:telephoneNo="formData.telephoneNo"
+        v-model:gender="formData.gender"
+        v-model:email="formData.email"
+        v-model:registrationNo="formData.registrationNo"
+        v-model:startDate="formData.startDate"
+        v-model:retireDate="formData.retireDate"
+        v-model:birthDate="formData.birthDate"
+        v-model:responsibleArea="formData.responsibleArea"
+        v-model:discountCondition="formData.discountCondition"
+        v-model:sourceNationality="formData.sourceNationality"
+        v-model:importNationality="formData.importNationality"
+        v-model:trainingPlace="formData.trainingPlace"
       />
-      <q-select
-        dense
-        outlined
-        emit-value
-        map-options
-        label="เพศ"
-        class="col-3"
-        bg-color="white"
-        option-label="label"
-        option-value="value"
-        v-model="formData.gender"
-        :options="userStore.userOption.genderOpts"
-      />
-      <q-input
-        dense
-        outlined
-        label="อีเมล"
-        class="col-6"
-        v-model="formData.email"
-      />
-      <div
-        v-if="formData.userType === 'USER' || formData.userType === 'MESSENGER'"
-        class="row col-12 q-col-gutter-md"
-        style="margin-left: 0px; padding-left: 0px"
-      >
-        <q-input
-          dense
-          outlined
-          label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
-          class="col-12"
-          v-model="formData.registrationNo"
-        />
-        <VueDatePicker
-          utc
-          autoApply
-          v-model="formData.startDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          class="col-6"
-        >
-          <template #year="{ value }">
-            {{ value + 543 }}
-          </template>
-          <template #trigger>
-            <q-input
-              dense
-              outlined
-              label="วันที่เริ่มงาน"
-              :model-value="
-                formData.startDate ? dateFormat(formData.startDate) : ''
-              "
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="primary"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="formData.startDate"
-                  name="mdi-close"
-                  class="cursor-pointer"
-                  size="xs"
-                  @click="formData.startDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
-
-        <VueDatePicker
-          utc
-          autoApply
-          v-model="formData.retireDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          class="col-6"
-        >
-          <template #year="{ value }">
-            {{ value + 543 }}
-          </template>
-          <template #trigger>
-            <q-input
-              dense
-              outlined
-              label="วันที่พ้นสภาพพนักงาน"
-              :model-value="
-                formData.retireDate ? dateFormat(formData.retireDate) : ''
-              "
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="primary"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="formData.retireDate"
-                  name="mdi-close"
-                  class="cursor-pointer"
-                  size="xs"
-                  @click="formData.retireDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
-
-        <VueDatePicker
-          utc
-          autoApply
-          v-model="formData.birthDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          class="col-3"
-        >
-          <template #year="{ value }">
-            {{ value + 543 }}
-          </template>
-          <template #trigger>
-            <q-input
-              dense
-              outlined
-              label="วันเดือนปีเกิด"
-              :model-value="
-                formData.birthDate ? dateFormat(formData.birthDate) : ''
-              "
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="primary"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="formData.birthDate"
-                  name="mdi-close"
-                  class="cursor-pointer"
-                  size="xs"
-                  @click="formData.birthDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
-        <q-input
-          dense
-          outlined
-          readonly
-          label="อายุ"
-          class="col-3"
-          v-model="age"
-        />
-        <q-select
-          v-if="formData.userType === 'MESSENGER'"
-          dense
-          outlined
-          emit-value
-          map-options
-          options-dense
-          label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
-          class="col-12"
-          bg-color="white"
-          option-label="label"
-          option-value="value"
-          v-model="formData.responsibleArea"
-          :options="userStore.userOption.responsibleAreaOpts"
-        />
-      </div>
-      <div
-        v-if="formData.userType === 'DELEGATE'"
-        class="row col-12"
-        style="row-gap: 16px"
-      >
-        <q-input
-          dense
-          outlined
-          label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
-          class="col-12"
-          v-model="formData.discountCondition"
-          type="textarea"
-        />
-      </div>
-      <div
-        v-if="formData.userType === 'AGENCY'"
-        class="row col-12 q-col-gutter-md"
-        style="margin-left: 0px; padding-left: 0px"
-      >
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          options-dense
-          label="สัญชาติต้นทาง"
-          class="col-3"
-          bg-color="white"
-          option-label="label"
-          option-value="label"
-          v-model="formData.sourceNationality"
-          :options="userStore.userOption.nationalityOpts"
-        />
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          options-dense
-          label="นำเข้าสัญชาติ"
-          class="col-3"
-          option-label="label"
-          option-value="label"
-          v-model="formData.importNationality"
-          :options="userStore.userOption.nationalityOpts"
-        />
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          options-dense
-          label="สถานที่อบรม"
-          class="col-6"
-          option-label="label"
-          option-value="label"
-          v-model="formData.trainingPlace"
-          :options="userStore.userOption.trainingPlaceOpts"
-        />
-        <q-input dense outlined label="ด่าน" class="col-6" />
-        <q-input dense outlined label="ด่าน ENG" class="col-6" />
-        <q-input
-          dense
-          outlined
-          label="แบบเอกสารประจำตัว"
-          class="col-12"
-          v-model="formData.discountCondition"
-          type="textarea"
-        />
-      </div>
     </template>
   </FormDialog>
 </template>