From 05d19419e76b5d7513d5f3de34eefea853b9e58a Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Tue, 28 Mar 2023 14:51:48 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=A7=E0=B8=A1=E0=B8=82=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AA=E0=B8=A1=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B6=E0=B8=A3=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B9=84?=
 =?UTF-8?q?=E0=B8=A7=E0=B9=89=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B9=80?=
 =?UTF-8?q?=E0=B8=94=E0=B8=B5=E0=B8=A2=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table.vue                      |   2 +-
 src/modules/01_exam/components/Conference.vue |  11 +-
 src/modules/01_exam/components/ExamForm.vue   | 101 +++++-----
 .../components/Form/{Profile => }/Address.vue |  78 ++++----
 .../01_exam/components/Form/Career.vue        |   2 +-
 .../01_exam/components/Form/Document.vue      |   4 +-
 .../01_exam/components/Form/Education.vue     |   2 +-
 .../components/Form/{Profile => }/Family.vue  | 124 ++++++-------
 .../Form/{Profile => }/Information.vue        | 174 +++++++++---------
 .../Form/{Profile => }/Occupation.vue         |  99 +++++-----
 .../01_exam/components/Form/Profile.vue       |  29 ++-
 11 files changed, 341 insertions(+), 285 deletions(-)
 rename src/modules/01_exam/components/Form/{Profile => }/Address.vue (81%)
 rename src/modules/01_exam/components/Form/{Profile => }/Family.vue (72%)
 rename src/modules/01_exam/components/Form/{Profile => }/Information.vue (74%)
 rename src/modules/01_exam/components/Form/{Profile => }/Occupation.vue (75%)

diff --git a/src/components/Table.vue b/src/components/Table.vue
index f55a9dc..90fc6b8 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -95,7 +95,7 @@ import type { Pagination } from '@/modules/01_exam/interface/index/Main'
 const attrs = ref<any>(useAttrs())
 const table = ref<any>(null)
 const filterRef = ref<any>(null)
-const editBtn = ref<boolean>(false)
+const editBtn = ref<boolean>(true)
 const initialPagination = ref<Pagination>({
   //   descending: false,
   rowsPerPage: 0
diff --git a/src/modules/01_exam/components/Conference.vue b/src/modules/01_exam/components/Conference.vue
index ea7ceee..eb81f3e 100644
--- a/src/modules/01_exam/components/Conference.vue
+++ b/src/modules/01_exam/components/Conference.vue
@@ -78,14 +78,19 @@
             จะไม่ดำเนินการอื่นใดแตกต่างจากที่ระบุในวัตถุประสงค์เว้นแต่มีกฏหมายบัญญัติให้กระทำหรือมีหนังสือร้องขอที่สามารถปฏิบัติได้ตามกฏหมาย
             เช่น เพื่อความจำเป็นในการป้องกันด้านสุขภาพและโรคติดต่ออันตราย
           </p>
+          <q-checkbox
+            v-model="acceptTermOfUse"
+            label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
+          />
         </q-card-section>
       </q-card>
     </div>
   </q-card-section>
   <q-separator />
   <q-card-actions align="right" class="bg-white text-teal justify-center">
-    <q-btn label="ยกเลิก" color="grey" @click="close" flat />
-    <q-btn label="ตกลง" color="primary" @click="ok" />
+    <!-- <q-btn label="ยกเลิก" color="grey" @click="close" flat /> -->
+    <!-- <q-space /> -->
+    <q-btn label="ตกลง" color="primary" @click="ok" :disable="!acceptTermOfUse" />
   </q-card-actions>
 </template>
 
@@ -104,6 +109,8 @@ const props = defineProps({
 })
 
 const fullname = ref<string>('')
+const acceptTermOfUse = ref<boolean>(false)
+
 /**
  * ดิงชื่อผู้ใช้งานจาก keycloak
  */
diff --git a/src/modules/01_exam/components/ExamForm.vue b/src/modules/01_exam/components/ExamForm.vue
index 0a75d0d..caae140 100644
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
@@ -1,7 +1,8 @@
 <!-- step กรอกข้อมูล -->
 <template>
   <div>
-    <q-splitter v-model="splitterModel" style="height: 450px">
+    <Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
+    <!-- <q-splitter v-model="splitterModel" style="height: 450px">
       <template v-slot:before>
         <q-tab-panels
           v-model="tab"
@@ -10,23 +11,22 @@
           transition-prev="jump-up"
           transition-next="jump-up"
         >
-          <!-- swipeable -->
-          <!-- ข้อมูลส่วนบุคคล -->
+          ข้อมูลส่วนบุคคล
           <q-tab-panel name="profile">
             <Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
           </q-tab-panel>
 
-          <!-- ประวัติการศีกษา -->
-          <q-tab-panel name="education"
-            ><Education :loader="loader" v-model:statusEdit="statusEdit" :status="status"
-          /></q-tab-panel>
+          ประวัติการศีกษา
+          <q-tab-panel name="education">
+            <Education :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
+          </q-tab-panel>
 
-          <!-- ประวัติการทำงาน/ฝึกงาน -->
-          <q-tab-panel name="career"
-            ><Career :loader="loader" v-model:statusEdit="statusEdit" :status="status"
-          /></q-tab-panel>
+          ประวัติการทำงาน/ฝึกงาน
+          <q-tab-panel name="career">
+            <Career :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
+          </q-tab-panel>
 
-          <!-- ไฟล์ -->
+          ไฟล์
           <q-tab-panel name="document">
             <Document :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
           </q-tab-panel>
@@ -40,19 +40,19 @@
           <q-tab name="document" label="อัปโหลดเอกสาร" :disable="statusEdit" />
         </q-tabs>
       </template>
-    </q-splitter>
+    </q-splitter> -->
 
     <div>
       <q-checkbox
         v-model="acceptTermOfUse"
         :disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
-        v-if="tab == 'document'"
         label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
       />
+      <!-- v-if="tab == 'document'" -->
     </div>
 
     <div class="row justify-center q-pa-md">
-      <q-btn
+      <!-- <q-btn
         color="primary"
         class="q-ml-md"
         label="กลับ"
@@ -75,13 +75,21 @@
         "
         icon-right="mdi-chevron-right"
         :disable="statusEdit"
+      /> -->
+      <q-btn
+        color="primary"
+        class="q-ml-md"
+        label="บันทึกข้อมูล"
+        @click="okModalConfirm"
+        v-if="status === 'register' || status === 'rejectRegister'"
+        :disable="!acceptTermOfUse || statusEdit"
       />
       <q-btn
         color="primary"
         class="q-ml-md"
         label="สมัครสอบ"
         @click="okModalConfirm"
-        v-if="(status === 'register' || status === 'rejectRegister') && tab == 'document'"
+        v-if="status === 'register' || status === 'rejectRegister'"
         :disable="!acceptTermOfUse || statusEdit"
       />
     </div>
@@ -113,8 +121,8 @@ const props = defineProps({
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
 const { modalConfirm, modalError, success } = mixin
-const tab = ref<string>('profile')
-const splitterModel = ref<number>(90)
+// const tab = ref<string>('profile')
+// const splitterModel = ref<number>(90)
 const loader = ref<boolean>(false)
 const statusEdit = ref<boolean>(false)
 const acceptTermOfUse = ref<boolean>(false)
@@ -154,36 +162,35 @@ const saveForm = async () => {
     })
 }
 
-const clickPreview = (val: string) => {
-  console.log(val)
-  switch (val) {
-    case 'profile':
-      return (tab.value = 'profile')
-    case 'education':
-      return (tab.value = 'profile')
-    case 'career':
-      return (tab.value = 'education')
-    case 'document':
-      return (tab.value = 'career')
-    default:
-      return (tab.value = 'profile')
-  }
-}
+// const clickPreview = (val: string) => {
+//   switch (val) {
+//     case 'profile':
+//       return (tab.value = 'profile')
+//     case 'education':
+//       return (tab.value = 'profile')
+//     case 'career':
+//       return (tab.value = 'education')
+//     case 'document':
+//       return (tab.value = 'career')
+//     default:
+//       return (tab.value = 'profile')
+//   }
+// }
 
-const clickNext = (val: string) => {
-  switch (val) {
-    case 'profile':
-      return (tab.value = 'education')
-    case 'education':
-      return (tab.value = 'career')
-    case 'career':
-      return (tab.value = 'document')
-    case 'document':
-      return (tab.value = 'profile')
-    default:
-      return (tab.value = 'profile')
-  }
-}
+// const clickNext = (val: string) => {
+//   switch (val) {
+//     case 'profile':
+//       return (tab.value = 'education')
+//     case 'education':
+//       return (tab.value = 'career')
+//     case 'career':
+//       return (tab.value = 'document')
+//     case 'document':
+//       return (tab.value = 'profile')
+//     default:
+//       return (tab.value = 'profile')
+//   }
+// }
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/modules/01_exam/components/Form/Profile/Address.vue b/src/modules/01_exam/components/Form/Address.vue
similarity index 81%
rename from src/modules/01_exam/components/Form/Profile/Address.vue
rename to src/modules/01_exam/components/Form/Address.vue
index c685e03..5d3b6ca 100644
--- a/src/modules/01_exam/components/Form/Profile/Address.vue
+++ b/src/modules/01_exam/components/Form/Address.vue
@@ -17,27 +17,27 @@
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
         <div class="col-xs-12">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             type="textarea"
             autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="addressData.address"
             :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
             :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
           />
-          <!-- :filled="edit" -->
+          <!-- :filled="(status == 'register' || status == 'rejectRegister')" -->
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="addressData.provinceId"
@@ -52,11 +52,11 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="addressData.districtId"
@@ -71,11 +71,11 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="addressData.subdistrictId"
@@ -90,13 +90,13 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             dense
             lazy-rules
             readonly
             borderless
             v-model="addressData.code"
-            :style="!edit ? '' : 'padding:0 12px;'"
+            :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
             :label="`${'รหัสไปรษณีย์'}`"
           />
         </div>
@@ -110,7 +110,7 @@
             val="1"
             label="ใช่"
             dense
-            :disable="!edit"
+            :disable="!(status == 'register' || status == 'rejectRegister')"
           />
           <q-radio
             v-model="addressData.same"
@@ -119,20 +119,20 @@
             val="0"
             label="ไม่"
             dense
-            :disable="!edit"
+            :disable="!(status == 'register' || status == 'rejectRegister')"
           />
         </div>
 
         <div class="col-xs-12" v-if="addressData.same == '0'">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             type="textarea"
             autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="addressData.addressC"
             :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
             :label="`${'ที่อยู่ปัจจุบัน'}`"
@@ -140,11 +140,11 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="addressData.provinceIdC"
@@ -159,11 +159,11 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="addressData.districtIdC"
@@ -178,11 +178,11 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="addressData.subdistrictIdC"
@@ -197,13 +197,13 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             dense
             lazy-rules
             readonly
             borderless
             v-model="addressData.codeC"
-            :style="!edit ? '' : 'padding:0 12px;'"
+            :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
             :label="`${'รหัสไปรษณีย์'}`"
           />
         </div>
diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index d11bd33..a54cea9 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -1,6 +1,6 @@
 <!-- tab ประวัติการทำงาน/ฝึกงาน -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
     <q-form ref="myForm">
       <Table
         :rows="rows"
diff --git a/src/modules/01_exam/components/Form/Document.vue b/src/modules/01_exam/components/Form/Document.vue
index 8a22ec0..3730381 100644
--- a/src/modules/01_exam/components/Form/Document.vue
+++ b/src/modules/01_exam/components/Form/Document.vue
@@ -1,6 +1,6 @@
 <!-- card อัปโหลดเอกสาร -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
     <div class="col-12">
       <HeaderTop
         v-model:edit="edit"
@@ -99,7 +99,7 @@ const props = defineProps({
   }
 })
 
-const edit = ref<boolean>(true)
+const edit = ref<boolean>(props.status == 'register' || props.status == 'rejectRegister')
 const name = ref<string>('')
 const files = ref<any>([
   {
diff --git a/src/modules/01_exam/components/Form/Education.vue b/src/modules/01_exam/components/Form/Education.vue
index 72a68f2..2fd082b 100644
--- a/src/modules/01_exam/components/Form/Education.vue
+++ b/src/modules/01_exam/components/Form/Education.vue
@@ -1,6 +1,6 @@
 <!-- tab ประวัติการศึกษา -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
     <q-form ref="myForm">
       <Table
         :rows="rows"
diff --git a/src/modules/01_exam/components/Form/Profile/Family.vue b/src/modules/01_exam/components/Form/Family.vue
similarity index 72%
rename from src/modules/01_exam/components/Form/Profile/Family.vue
rename to src/modules/01_exam/components/Form/Family.vue
index 6a37539..97ebf7a 100644
--- a/src/modules/01_exam/components/Form/Profile/Family.vue
+++ b/src/modules/01_exam/components/Form/Family.vue
@@ -24,7 +24,7 @@
             val="1"
             label="มี"
             dense
-            :disable="!edit"
+            :disable="!(status == 'register' || status == 'rejectRegister')"
             @update:model-value="selectRadio"
           />
           <q-radio
@@ -34,17 +34,17 @@
             val="0"
             label="ไม่มี"
             dense
-            :disable="!edit"
+            :disable="!(status == 'register' || status == 'rejectRegister')"
             @update:model-value="selectRadio"
           />
         </div>
         <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="familyData.prefixIdC"
@@ -59,12 +59,12 @@
 
         <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.firstnameC"
             :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
@@ -72,12 +72,12 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.lastnameC"
             :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
@@ -85,12 +85,12 @@
         </div>
         <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.occupationC"
             :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
             :label="`${'อาชีพ'}`"
@@ -98,12 +98,12 @@
         </div>
         <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.nationalityC"
             :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
             :label="`${'สัญชาติ'}`"
@@ -113,11 +113,11 @@
         <div class="col-xs-12 text-weight-bold">• บิดา</div>
         <div class="col-xs-12 col-sm-2 col-md-2">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="familyData.prefixIdM"
@@ -132,12 +132,12 @@
 
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.firstnameM"
             :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
@@ -145,12 +145,12 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.lastnameM"
             :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
@@ -158,12 +158,12 @@
         </div>
         <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.occupationM"
             :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
             :label="`${'อาชีพ'}`"
@@ -171,12 +171,12 @@
         </div>
         <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.nationalityM"
             :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
             :label="`${'สัญชาติ'}`"
@@ -186,11 +186,11 @@
         <div class="col-xs-12 text-weight-bold">• มารดา</div>
         <div class="col-xs-12 col-sm-2 col-md-2">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="familyData.prefixIdF"
@@ -204,12 +204,12 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.firstnameF"
             :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
@@ -217,12 +217,12 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.lastnameF"
             :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
@@ -230,12 +230,12 @@
         </div>
         <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.occupationF"
             :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
             :label="`${'อาชีพ'}`"
@@ -243,12 +243,12 @@
         </div>
         <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="familyData.nationalityF"
             :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
             :label="`${'สัญชาติ'}`"
diff --git a/src/modules/01_exam/components/Form/Profile/Information.vue b/src/modules/01_exam/components/Form/Information.vue
similarity index 74%
rename from src/modules/01_exam/components/Form/Profile/Information.vue
rename to src/modules/01_exam/components/Form/Information.vue
index 1206dd3..811325f 100644
--- a/src/modules/01_exam/components/Form/Profile/Information.vue
+++ b/src/modules/01_exam/components/Form/Information.vue
@@ -15,13 +15,13 @@
     <!-- :changeBtn="changeBtn" -->
     <q-form ref="myform" class="col-12 row">
       <div class="row col-10 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="informaData.prefixId"
@@ -33,27 +33,27 @@
             :label="`${'คำนำหน้า'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-5 col-md-5">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="informaData.firstname"
             :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-5 col-md-5">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="informaData.lastname"
             :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
@@ -61,12 +61,12 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="informaData.nationality"
             :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
             :label="`${'สัญชาติ'}`"
@@ -80,7 +80,7 @@
             :enableTimePicker="false"
             week-start="0"
             :max-date="new Date()"
-            :disabled="!edit"
+            :disabled="!(status == 'register' || status == 'rejectRegister')"
           >
             <template #year="{ year }">
               {{ year + 543 }}
@@ -90,12 +90,12 @@
             </template>
             <template #trigger>
               <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
+                :class="getClass(status == 'register' || status == 'rejectRegister')"
+                :outlined="status == 'register' || status == 'rejectRegister'"
                 dense
                 lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
+                :readonly="!(status == 'register' || status == 'rejectRegister')"
+                :borderless="!(status == 'register' || status == 'rejectRegister')"
                 :model-value="
                   informaData.birthDate == null ? null : date2Thai(informaData.birthDate)
                 "
@@ -106,7 +106,11 @@
                   <q-icon
                     name="event"
                     class="cursor-pointer"
-                    :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
+                    :style="
+                      status == 'register' || status == 'rejectRegister'
+                        ? 'color: var(--q-primary)'
+                        : 'color: var(--q-grey)'
+                    "
                   >
                   </q-icon>
                 </template>
@@ -116,23 +120,23 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             dense
             lazy-rules
             readonly
             borderless
-            :style="!edit ? '' : 'padding:0 12px;'"
+            :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
             :model-value="informaData.birthDate == null ? null : calAge(informaData.birthDate)"
             :label="`${'อายุ'}`"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="informaData.relationship"
@@ -146,26 +150,13 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.email"
-            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
-            label="E-mail address"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             counter
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="informaData.cardid"
             maxlength="13"
             :rules="[
@@ -177,11 +168,11 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="informaData.provinceId"
@@ -196,23 +187,23 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <!-- <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="informaData.cardid"
             :rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
             label="ออกให้ ณ อำเภอ"
           /> -->
           <q-select
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             :rules="[(val) => !!val || `${'กรุณากรอกอำเภอ'}`]"
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             v-model="informaData.districtId"
@@ -233,7 +224,7 @@
             :enableTimePicker="false"
             week-start="0"
             :max-date="new Date()"
-            :disabled="!edit"
+            :disabled="!(status == 'register' || status == 'rejectRegister')"
           >
             <template #year="{ year }">
               {{ year + 543 }}
@@ -243,23 +234,27 @@
             </template>
             <template #trigger>
               <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
+                :class="getClass(status == 'register' || status == 'rejectRegister')"
+                :outlined="status == 'register' || status == 'rejectRegister'"
                 dense
                 lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
+                :readonly="!(status == 'register' || status == 'rejectRegister')"
+                :borderless="!(status == 'register' || status == 'rejectRegister')"
                 :model-value="
                   informaData.cardIdDate == null ? null : date2Thai(informaData.cardIdDate)
                 "
-                :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]"
-                :label="`${'วัน/เดือน/ปี'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`]"
+                :label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`"
               >
                 <template v-slot:prepend>
                   <q-icon
                     name="event"
                     class="cursor-pointer"
-                    :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
+                    :style="
+                      status == 'register' || status == 'rejectRegister'
+                        ? 'color: var(--q-primary)'
+                        : 'color: var(--q-grey)'
+                    "
                   >
                   </q-icon>
                 </template>
@@ -269,15 +264,15 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             counter
             lazy-rules
             type="tel"
             maxlength="10"
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="informaData.tel"
             :rules="[
               (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
@@ -288,15 +283,15 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             counter
             lazy-rules
             type="tel"
             maxlength="10"
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="informaData.phone"
             :rules="[
               (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
@@ -305,16 +300,27 @@
             :label="`${'โทรศัพท์มือถือ'}`"
           />
         </div>
-        <div class="col-xs-12 col-sm-12 col-md-12">
+        <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
-            :outlined="edit"
+            :class="getClass(false)"
+            :outlined="false"
             dense
             lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="true"
+            :borderless="true"
+            v-model="informaData.email"
+            label="E-mail address"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-12 col-md-12">
+          <q-input
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
+            dense
+            lazy-rules
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="informaData.knowledge"
-            :rules="[(val) => !!val || `${'กรุณากรอก ความรู้ความสามารถพิเศษ'}`]"
             label="ความรู้ความสามารถพิเศษ"
             type="textarea"
           />
@@ -326,11 +332,11 @@
             borderless
             v-model="fileData"
             stack-label
-            :readonly="statusEdit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
             @update:model-value="pickFile"
           >
             <q-img src="@/assets/avatar_user.jpg" class="col-12">
-              <div class="overlay" v-if="!statusEdit">
+              <div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
                 <q-icon name="mdi-camera" />
                 <br />อัปเดต
               </div>
diff --git a/src/modules/01_exam/components/Form/Profile/Occupation.vue b/src/modules/01_exam/components/Form/Occupation.vue
similarity index 75%
rename from src/modules/01_exam/components/Form/Profile/Occupation.vue
rename to src/modules/01_exam/components/Form/Occupation.vue
index 2eb61af..22f95ed 100644
--- a/src/modules/01_exam/components/Form/Profile/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Occupation.vue
@@ -17,17 +17,20 @@
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
         <div class="col-12 row">
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             hide-bottom-space
             dense
             lazy-rules
             type="textarea"
             autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="occupationData.official"
             :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="occupationData.status !== 'official' || !edit"
+            :disable="
+              occupationData.status !== 'official' ||
+              !(status == 'register' || status == 'rejectRegister')
+            "
           >
             <template v-slot:before>
               <q-radio
@@ -37,24 +40,27 @@
                 val="official"
                 label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
                 dense
-                :disable="!edit"
+                :disable="!(status == 'register' || status == 'rejectRegister')"
                 size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
           </q-input>
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             hide-bottom-space
             dense
             lazy-rules
             type="textarea"
             autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="occupationData.personnel"
             :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="occupationData.status !== 'personnel' || !edit"
+            :disable="
+              occupationData.status !== 'personnel' ||
+              !(status == 'register' || status == 'rejectRegister')
+            "
           >
             <template v-slot:before>
               <q-radio
@@ -64,24 +70,27 @@
                 val="personnel"
                 label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
                 dense
-                :disable="!edit"
+                :disable="!(status == 'register' || status == 'rejectRegister')"
                 size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
           </q-input>
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             hide-bottom-space
             dense
             lazy-rules
             type="textarea"
             autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="occupationData.officialsOther"
             :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="occupationData.status !== 'officialsOther' || !edit"
+            :disable="
+              occupationData.status !== 'officialsOther' ||
+              !(status == 'register' || status == 'rejectRegister')
+            "
           >
             <template v-slot:before>
               <q-radio
@@ -91,24 +100,27 @@
                 val="officialsOther"
                 label="ข้าราชการประเภทอื่น ตำแหน่ง"
                 dense
-                :disable="!edit"
+                :disable="!(status == 'register' || status == 'rejectRegister')"
                 size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
           </q-input>
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             hide-bottom-space
             dense
             lazy-rules
             type="textarea"
             autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="occupationData.employee"
             :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="occupationData.status !== 'employee' || !edit"
+            :disable="
+              occupationData.status !== 'employee' ||
+              !(status == 'register' || status == 'rejectRegister')
+            "
           >
             <template v-slot:before>
               <q-radio
@@ -118,7 +130,7 @@
                 val="employee"
                 label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
                 dense
-                :disable="!edit"
+                :disable="!(status == 'register' || status == 'rejectRegister')"
                 size="md"
                 style="font-size: 14px; color: black"
               />
@@ -131,22 +143,25 @@
             val="studying"
             label="กำลังศึกษาต่อ"
             dense
-            :disable="!edit"
+            :disable="!(status == 'register' || status == 'rejectRegister')"
             size="md"
             style="font-size: 14px; color: black"
           />
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             hide-bottom-space
             dense
             lazy-rules
             type="textarea"
             autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="occupationData.other"
             :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="occupationData.status !== 'other' || !edit"
+            :disable="
+              occupationData.status !== 'other' ||
+              !(status == 'register' || status == 'rejectRegister')
+            "
           >
             <template v-slot:before>
               <q-radio
@@ -156,7 +171,7 @@
                 val="other"
                 label="อื่นๆ"
                 dense
-                :disable="!edit"
+                :disable="!(status == 'register' || status == 'rejectRegister')"
                 size="md"
                 style="font-size: 14px; color: black"
               />
@@ -165,15 +180,15 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             hide-bottom-space
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             type="textarea"
             autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="occupationData.company"
             :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
             :label="`${'สำนัก/บริษัท'}`"
@@ -181,15 +196,15 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             hide-bottom-space
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             type="textarea"
             autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="occupationData.department"
             :rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
             :label="`${'กอง/ฝ่าย'}`"
@@ -197,15 +212,15 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             hide-bottom-space
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             type="textarea"
             autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="occupationData.email"
             :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
             :label="`${'E-mail address'}`"
@@ -213,15 +228,15 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
             hide-bottom-space
-            :outlined="edit"
+            :outlined="status == 'register' || status == 'rejectRegister'"
             dense
             lazy-rules
             type="textarea"
             autogrow
-            :readonly="!edit"
-            :borderless="!edit"
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
             v-model="occupationData.tel"
             :rules="[(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`]"
             :label="`${'โทรศัพท์'}`"
diff --git a/src/modules/01_exam/components/Form/Profile.vue b/src/modules/01_exam/components/Form/Profile.vue
index b6f8fc9..115c455 100644
--- a/src/modules/01_exam/components/Form/Profile.vue
+++ b/src/modules/01_exam/components/Form/Profile.vue
@@ -21,6 +21,24 @@
     :status="status"
   />
   <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" />
+  <Education
+    :loader="loader"
+    v-model:statusEdit="statusEdit"
+    :notiNoEdit="notiNoEdit"
+    :status="status"
+  />
+  <Career
+    :loader="loader"
+    v-model:statusEdit="statusEdit"
+    :notiNoEdit="notiNoEdit"
+    :status="status"
+  />
+  <Document
+    :loader="loader"
+    v-model:statusEdit="statusEdit"
+    :notiNoEdit="notiNoEdit"
+    :status="status"
+  />
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -29,10 +47,13 @@ import { useCounterMixin } from '@/stores/mixin'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import type { DataOption } from '@/modules/01_exam/interface/index/Main'
-import Information from '@/modules/01_exam/components/Form/Profile/Information.vue'
-import Address from '@/modules/01_exam/components/Form/Profile/Address.vue'
-import Family from '@/modules/01_exam/components/Form/Profile/Family.vue'
-import Occupation from '@/modules/01_exam/components/Form/Profile/Occupation.vue'
+import Information from '@/modules/01_exam/components/Form/Information.vue'
+import Address from '@/modules/01_exam/components/Form/Address.vue'
+import Family from '@/modules/01_exam/components/Form/Family.vue'
+import Occupation from '@/modules/01_exam/components/Form/Occupation.vue'
+import Education from '@/modules/01_exam/components/Form/Education.vue'
+import Career from '@/modules/01_exam/components/Form/Career.vue'
+import Document from '@/modules/01_exam/components/Form/Document.vue'
 
 const props = defineProps({
   loader: {