From cc6a672000f12ca992bd44ec1598866ae2ce89cb Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Tue, 21 Mar 2023 12:06:30 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A5=E0=B8=9A=20tab=20=E0=B8=84=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=B5=E0=B9=89=E0=B9=81=E0=B8=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DialogFooter.vue               |   4 +-
 src/components/NotifyError.vue                |  41 ++---
 src/components/Table.vue                      |   8 +-
 src/components/top.vue                        | 165 ++++++++++--------
 src/modules/01_exam/components/ExamForm.vue   |  76 ++++----
 .../01_exam/components/Form/Career.vue        |  15 +-
 .../01_exam/components/Form/Document.vue      |  16 +-
 .../01_exam/components/Form/Education.vue     |  15 +-
 .../components/Form/Profile/Address.vue       |  16 +-
 .../components/Form/Profile/Family.vue        |  12 +-
 .../components/Form/Profile/Information.vue   |  13 +-
 .../components/Form/Profile/Occupation.vue    |  12 +-
 src/modules/01_exam/views/ExamDetail.vue      |  30 ++--
 13 files changed, 205 insertions(+), 218 deletions(-)

diff --git a/src/components/DialogFooter.vue b/src/components/DialogFooter.vue
index c2426f3..4bda154 100644
--- a/src/components/DialogFooter.vue
+++ b/src/components/DialogFooter.vue
@@ -19,7 +19,7 @@
       :color="!next ? 'grey-7' : 'public'"
     />
     <q-space />
-    <div v-if="editBtn">
+    <div v-if="editData">
       <q-btn
         v-if="!editvisible"
         flat
@@ -66,7 +66,7 @@ const props = defineProps({
   next: Boolean,
   previous: Boolean,
   modalEdit: Boolean,
-  editBtn: {
+  editData: {
     type: Boolean,
     default: true
   },
diff --git a/src/components/NotifyError.vue b/src/components/NotifyError.vue
index bfef40f..c18cae7 100644
--- a/src/components/NotifyError.vue
+++ b/src/components/NotifyError.vue
@@ -1,9 +1,5 @@
 <template>
-  <q-dialog
-    :model-value="modalError"
-    persistent
-    @update:model-value="updateClose"
-  >
+  <q-dialog :model-value="modalError" persistent @update:model-value="updateClose">
     <q-card class="q-pa-sm">
       <q-card-section class="row items-center">
         <div class="q-pr-md">
@@ -16,25 +12,20 @@
           />
         </div>
         <div class="col text-dark">
-          <span class="text-bold">{{ modalErrorTittle }}</span>
+          <span class="text-bold text-red">{{ modalErrorTittle }}</span>
           <br />
           <span>{{ modalErrorDetail }}</span>
         </div>
       </q-card-section>
 
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          label="ตกลง"
-          color="primary"
-          @click="updateClose"
-          v-close-popup
-        />
+        <q-btn label="ตกลง" color="primary" @click="updateClose" v-close-popup />
       </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs } from 'vue'
 
 const props = defineProps({
   modalError: Boolean,
@@ -42,22 +33,22 @@ const props = defineProps({
   modalErrorDetail: String,
   close: {
     type: Function,
-    default: () => console.log("not function"),
-  },
-});
+    default: () => console.log('not function')
+  }
+})
 
 const emit = defineEmits([
-  "update:modalError",
-  "update:modalErrorTittle",
-  "update:modalErrorDetail",
-]);
+  'update:modalError',
+  'update:modalErrorTittle',
+  'update:modalErrorDetail'
+])
 
 const updateClose = () => {
-  emit("update:modalError", false);
-  emit("update:modalErrorTittle", "");
-  emit("update:modalErrorDetail", "");
-  props.close();
-};
+  emit('update:modalError', false)
+  emit('update:modalErrorTittle', '')
+  emit('update:modalErrorDetail', '')
+  props.close()
+}
 </script>
 <style lang="scss">
 .icon-color {
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 30392db..f55a9dc 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -8,8 +8,9 @@
       :add="clickAdd"
       :editBtn="clickEdit"
       :cancel="clickCancel"
-      :history="false"
       :addData="false"
+      :editOnly="false"
+      :editData="editData"
     />
     <!-- v-if="nameHeader" -->
     <!-- <div class="q-pl-sm">
@@ -126,6 +127,11 @@ const props = defineProps({
   validate: {
     type: Function,
     default: () => console.log('not function')
+  },
+  editData: {
+    type: Boolean,
+    defualt: true,
+    required: true
   }
 })
 
diff --git a/src/components/top.vue b/src/components/top.vue
index 4341451..0460d22 100644
--- a/src/components/top.vue
+++ b/src/components/top.vue
@@ -6,81 +6,79 @@
         {{ header }}
       </div>
     </div>
-    <div class="q-gutter-sm q-mx-sm" v-if="addData == true">
-      <q-btn
-        size="12px"
-        v-if="!edit"
-        flat
-        round
-        :disabled="edit"
-        :color="edit ? 'grey-7' : 'primary'"
-        @click="ClickEdit"
-        icon="mdi-pencil-outline"
-      >
-        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-      </q-btn>
-      <q-btn
-        size="12px"
-        flat
-        round
-        v-if="edit"
-        :disabled="!edit"
-        :color="!edit ? 'grey-7' : 'public'"
-        @click="save"
-        icon="mdi-content-save-outline"
-      >
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
-      </q-btn>
-      <q-btn
-        size="12px"
-        flat
-        round
-        v-if="edit"
-        :disabled="!edit"
-        :color="!edit ? 'grey-7' : 'red'"
-        @click="ClickCancel"
-        icon="mdi-undo"
-      >
-        <q-tooltip>ยกเลิก</q-tooltip>
-      </q-btn>
-    </div>
-    <div class="q-pl-sm" v-else>
-      <q-btn
-        size="12px"
-        v-if="!edit"
-        flat
-        round
-        :disabled="edit"
-        :color="edit ? 'grey-7' : 'primary'"
-        @click="ClickEdit"
-        icon="mdi-pencil-outline"
-      >
-        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-      </q-btn>
-      <q-btn
-        size="12px"
-        flat
-        round
-        v-if="edit"
-        :disabled="!edit"
-        :color="!edit ? 'grey-7' : 'add'"
-        @click="add"
-        icon="mdi-plus"
-      >
-        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-      </q-btn>
-      <q-btn
-        size="12px"
-        flat
-        round
-        v-if="edit"
-        :disabled="!edit"
-        :color="!edit ? 'grey-7' : 'red'"
-        @click="ClickCancel"
-        icon="mdi-undo"
-      >
-        <q-tooltip>ยกเลิก</q-tooltip>
-      </q-btn>
+    <div v-if="editData == true">
+      <div class="q-gutter-sm q-mx-sm" v-if="addData == true">
+        <q-btn
+          size="12px"
+          v-if="!edit"
+          flat
+          round
+          :disabled="disable"
+          :color="edit ? 'grey-7' : 'primary'"
+          @click="ClickEdit"
+          icon="mdi-pencil-outline"
+        >
+          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+        </q-btn>
+        <q-btn
+          size="12px"
+          flat
+          round
+          v-if="edit && !editOnly"
+          :color="!edit ? 'grey-7' : 'public'"
+          @click="save"
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+        <q-btn
+          size="12px"
+          flat
+          round
+          v-if="edit"
+          :color="!edit ? 'grey-7' : 'red'"
+          @click="ClickCancel"
+          icon="mdi-undo"
+        >
+          <q-tooltip>ยกเลิก</q-tooltip>
+        </q-btn>
+      </div>
+      <div class="q-pl-sm" v-else>
+        <q-btn
+          size="12px"
+          v-if="!edit"
+          flat
+          round
+          :disabled="disable"
+          :color="edit ? 'grey-7' : 'primary'"
+          @click="ClickEdit"
+          icon="mdi-pencil-outline"
+        >
+          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+        </q-btn>
+        <q-btn
+          size="12px"
+          flat
+          round
+          v-if="edit && !editOnly"
+          :color="!edit ? 'grey-7' : 'add'"
+          @click="add"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+        <q-btn
+          size="12px"
+          flat
+          round
+          v-if="edit"
+          :color="!edit ? 'grey-7' : 'red'"
+          @click="ClickCancel"
+          icon="mdi-undo"
+        >
+          <q-tooltip>ยกเลิก</q-tooltip>
+        </q-btn>
+      </div>
     </div>
     <q-space />
   </div>
@@ -104,7 +102,22 @@ const props = defineProps({
   },
   addData: {
     type: Boolean,
-    defualt: true
+    defualt: true,
+    required: true
+  },
+  editData: {
+    type: Boolean,
+    defualt: true,
+    required: true
+  },
+  editOnly: {
+    type: Boolean,
+    defualt: false,
+    required: true
+  },
+  disable: {
+    type: Boolean,
+    defualt: false
   },
   add: {
     type: Function,
diff --git a/src/modules/01_exam/components/ExamForm.vue b/src/modules/01_exam/components/ExamForm.vue
index 1caf704..0a20b1e 100644
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
@@ -1,46 +1,51 @@
 <!-- step กรอกข้อมูล -->
 <template>
   <div>
-    <q-tabs
-      v-model="tab"
-      dense
-      class=""
-      active-color="primary"
-      indicator-color="primary"
-      align="justify"
-      @update:model-value="changeTab"
-    >
-      <q-tab name="profile" label="ข้อมูลส่วนบุคคล" />
-      <q-tab name="education" label="ประวัติการศีกษา" />
-      <q-tab name="career" label="ประวัติการทำงาน/ฝึกงาน" />
-      <q-tab name="document" label="เอกสาร" />
-    </q-tabs>
-    <q-tab-panels v-model="tab" animated class="bg-white">
-      <!-- ข้อมูลส่วนบุคคล -->
-      <q-tab-panel name="profile">
-        <Profile :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
-      </q-tab-panel>
+    <q-splitter v-model="splitterModel" style="height: 500px">
+      <template v-slot:before>
+        <q-tab-panels
+          v-model="tab"
+          animated
+          swipeable
+          vertical
+          transition-prev="jump-up"
+          transition-next="jump-up"
+        >
+          <!-- ข้อมูลส่วนบุคคล -->
+          <q-tab-panel name="profile">
+            <Profile :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
+          </q-tab-panel>
 
-      <!-- ประวัติการศีกษา -->
-      <q-tab-panel name="education"
-        ><Education :loader="loader" v-model:statusEdit="statusEdit" :step="step"
-      /></q-tab-panel>
+          <!-- ประวัติการศีกษา -->
+          <q-tab-panel name="education"
+            ><Education :loader="loader" v-model:statusEdit="statusEdit" :step="step"
+          /></q-tab-panel>
 
-      <!-- ประวัติการทำงาน/ฝึกงาน -->
-      <q-tab-panel name="career"
-        ><Career :loader="loader" v-model:statusEdit="statusEdit" :step="step"
-      /></q-tab-panel>
+          <!-- ประวัติการทำงาน/ฝึกงาน -->
+          <q-tab-panel name="career"
+            ><Career :loader="loader" v-model:statusEdit="statusEdit" :step="step"
+          /></q-tab-panel>
 
-      <!-- ไฟล์ -->
-      <q-tab-panel name="document">
-        <Document :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
-      </q-tab-panel>
-    </q-tab-panels>
+          <!-- ไฟล์ -->
+          <q-tab-panel name="document">
+            <Document :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
+          </q-tab-panel>
+        </q-tab-panels>
+      </template>
+      <template v-slot:after>
+        <q-tabs v-model="tab" vertical class="text-teal">
+          <q-tab name="profile" label="ข้อมูลส่วนบุคคล" :disable="statusEdit" />
+          <q-tab name="education" label="ประวัติการศีกษา" :disable="statusEdit" />
+          <q-tab name="career" label="ประวัติการทำงาน/ฝึกงาน" :disable="statusEdit" />
+          <q-tab name="document" label="อัปโหลดเอกสาร" :disable="statusEdit" />
+        </q-tabs>
+      </template>
+    </q-splitter>
 
     <div>
       <q-checkbox
         v-model="acceptTermOfUse"
-        :disable="step !== 2"
+        :disable="step !== 2 || statusEdit"
         v-if="step !== 2 || tab == 'document'"
         label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
       />
@@ -54,6 +59,7 @@
         @click="clickPreview(tab)"
         v-if="step === 2 && (tab == 'education' || tab == 'career' || tab == 'document')"
         icon="mdi-chevron-left"
+        :disable="statusEdit"
       />
       <q-btn
         color="primary"
@@ -62,6 +68,7 @@
         @click="clickNext(tab)"
         v-if="step === 2 && (tab == 'profile' || tab == 'education' || tab == 'career')"
         icon-right="mdi-chevron-right"
+        :disable="statusEdit"
       />
       <q-btn
         color="primary"
@@ -69,7 +76,7 @@
         label="สมัครสอบ"
         @click="okModalComfirm"
         v-if="step === 2 && tab == 'document'"
-        :disable="!acceptTermOfUse"
+        :disable="!acceptTermOfUse || statusEdit"
       />
     </div>
   </div>
@@ -109,6 +116,7 @@ const props = defineProps({
 })
 
 const tab = ref<string>('profile')
+const splitterModel = ref<number>(90)
 const tabRaw = ref<string>('profile')
 const loader = ref<boolean>(false)
 const statusEdit = ref<boolean>(false)
diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index 8cb9506..a915ec1 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -13,8 +13,10 @@
         :add="clickAdd"
         :edit="clickEdit"
         :cancel="clickCancel"
-        :nameHeader="false"
-        :addData="addData"
+        :addData="false"
+        :editData="step == 2"
+        name="ประวัติการทำงาน/ฝึกงาน"
+        icon="mdi-briefcase"
       >
         <template #columns="props">
           <q-tr :props="props">
@@ -166,7 +168,7 @@
           :validate="validateData"
           :clickNext="clickNext"
           :clickPrevious="clickPrevious"
-          :editBtn="addData"
+          :editData="step == 2"
           v-model:editvisible="edit"
           v-model:next="next"
           v-model:previous="previous"
@@ -236,8 +238,6 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
 const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
 const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
 const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
-const addData = ref<boolean>(true)
-const rawHistory = ref<RequestItemsObject[]>([]) //raw data history
 const modalError = ref<boolean>(false) // modal สำหรับแจ้งเตือนerror
 const modalErrorTittle = ref<string>('') // tittle modal error
 const modalErrorDetail = ref<string>('') // detail modal error
@@ -341,10 +341,6 @@ watch(edit, (count: boolean, prevCount: boolean) => {
 
 onMounted(async () => {
   //   await fetchData()
-  rawHistory.value = rows.value
-  if (props.step !== 2) {
-    addData.value = false
-  }
 })
 
 const fetchData = async () => {}
@@ -437,6 +433,7 @@ const clickDeleteRow = (row: RequestItemsObject) => {
   })
     .onOk(() => {
       rows.value = rows.value.filter((val: any) => val.id != row.id)
+      edit.value = false
     })
     .onCancel(() => {})
     .onDismiss(() => {})
diff --git a/src/modules/01_exam/components/Form/Document.vue b/src/modules/01_exam/components/Form/Document.vue
index dd15887..3e07f2e 100644
--- a/src/modules/01_exam/components/Form/Document.vue
+++ b/src/modules/01_exam/components/Form/Document.vue
@@ -1,13 +1,14 @@
-<!-- card เอกสารหลักฐาน -->
+<!-- card อัปโหลดเอกสาร -->
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <HeaderTop
       v-model:edit="edit"
-      header="เอกสารหลักฐาน(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
+      header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
       icon="mdi-file-document"
-      :history="false"
-      :addData="addData"
+      :addData="true"
+      :editOnly="true"
       :cancel="cancelData"
+      :editData="step == 2"
     />
     <div class="row col-12 q-gutter-sm q-pt-sm">
       <q-card bordered flat class="full-width">
@@ -95,7 +96,6 @@ const props = defineProps({
 })
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(true)
 const name = ref<string>('')
 const files = ref<any>([
   {
@@ -117,11 +117,7 @@ watch(edit, (count: boolean, prevCount: boolean) => {
   emit('update:statusEdit', count)
 })
 
-onMounted(async () => {
-  if (props.step !== 2) {
-    addData.value = false
-  }
-})
+onMounted(async () => {})
 
 const fileUpload = async (file: any) => {
   return {
diff --git a/src/modules/01_exam/components/Form/Education.vue b/src/modules/01_exam/components/Form/Education.vue
index e9de0e0..caa61cf 100644
--- a/src/modules/01_exam/components/Form/Education.vue
+++ b/src/modules/01_exam/components/Form/Education.vue
@@ -13,8 +13,10 @@
         :add="clickAdd"
         :edit="clickEdit"
         :cancel="clickCancel"
-        :nameHeader="false"
-        :addData="addData"
+        :addData="false"
+        :editData="step == 2"
+        name="ประวัติการศีกษา"
+        icon="mdi-school"
       >
         <template #columns="props">
           <q-tr :props="props">
@@ -167,7 +169,7 @@
           :validate="validateData"
           :clickNext="clickNext"
           :clickPrevious="clickPrevious"
-          :editBtn="addData"
+          :editData="step == 2"
           v-model:editvisible="edit"
           v-model:next="next"
           v-model:previous="previous"
@@ -240,8 +242,6 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
 const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
 const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
 const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
-const addData = ref<boolean>(true)
-const rawHistory = ref<RequestItemsObject[]>([]) //raw data history
 const modalError = ref<boolean>(false) // modal สำหรับแจ้งเตือนerror
 const modalErrorTittle = ref<string>('') // tittle modal error
 const modalErrorDetail = ref<string>('') // detail modal error
@@ -347,10 +347,6 @@ watch(edit, (count: boolean, prevCount: boolean) => {
 onMounted(async () => {
   //   await fetchData()
   //   await fetchQualification()
-  rawHistory.value = rows.value
-  if (props.step !== 2) {
-    addData.value = false
-  }
 })
 
 const fetchQualification = async () => {
@@ -464,6 +460,7 @@ const clickDeleteRow = (row: RequestItemsObject) => {
   })
     .onOk(() => {
       rows.value = rows.value.filter((val: any) => val.id != row.id)
+      edit.value = false
     })
     .onCancel(() => {})
     .onDismiss(() => {})
diff --git a/src/modules/01_exam/components/Form/Profile/Address.vue b/src/modules/01_exam/components/Form/Profile/Address.vue
index a2e284d..8a5da1c 100644
--- a/src/modules/01_exam/components/Form/Profile/Address.vue
+++ b/src/modules/01_exam/components/Form/Profile/Address.vue
@@ -1,21 +1,17 @@
 <!-- card ข้อมูลที่อยู่ -->
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <!-- <HeaderTop
-        v-model:edit="edit"
-        header="ข้อมูลที่อยู่"
-        icon="mdi-map-marker"
-        :save="saveData"
-      /> -->
     <HeaderTop
       v-model:edit="edit"
       header="ข้อมูลที่อยู่"
       icon="mdi-map-marker"
       :save="saveData"
-      :history="true"
-      :addData="addData"
+      :addData="true"
+      :editOnly="false"
       :cancel="cancelData"
       :changeBtn="changeBtn"
+      :editData="step == 2"
+      :disable="statusEdit"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -239,7 +235,6 @@ const mixin = useCounterMixin()
 const { date2Thai, calAge } = mixin
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(true)
 const addressData = ref<Address>(defaultAddress)
 const myform = ref<any>()
 const codep = ref<string>('')
@@ -269,9 +264,6 @@ const props = defineProps({
 const emit = defineEmits(['update:statusEdit'])
 
 onMounted(() => {
-  if (props.step !== 2) {
-    addData.value = false
-  }
   //   fetchProvince()
   //   fetchDistrict(addressData.value.provinceId, '1')
   //   fetchDistrict(addressData.value.provinceIdC, '2')
diff --git a/src/modules/01_exam/components/Form/Profile/Family.vue b/src/modules/01_exam/components/Form/Profile/Family.vue
index e804fb7..82395ad 100644
--- a/src/modules/01_exam/components/Form/Profile/Family.vue
+++ b/src/modules/01_exam/components/Form/Profile/Family.vue
@@ -6,9 +6,12 @@
       header="ข้อมูลครอบครัว"
       icon="mdi-account-group"
       :save="saveData"
-      :addData="addData"
+      :addData="true"
+      :editOnly="false"
       :cancel="cancelData"
       :changeBtn="changeBtn"
+      :editData="step == 2"
+      :disable="statusEdit"
     />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -282,7 +285,6 @@ const mixin = useCounterMixin()
 const { date2Thai, calAge } = mixin
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(true)
 const myform = ref<any>()
 const familyData = ref<Family>(defaultFamily)
 const statusOptions = ref<DataOption[]>([])
@@ -314,11 +316,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:statusEdit'])
 
-onMounted(() => {
-  if (props.step !== 2) {
-    addData.value = false
-  }
-})
+onMounted(() => {})
 
 const saveData = async () => {
   await myform.value.validate().then(async (success: boolean) => {
diff --git a/src/modules/01_exam/components/Form/Profile/Information.vue b/src/modules/01_exam/components/Form/Profile/Information.vue
index 9af96b7..01c7a4f 100644
--- a/src/modules/01_exam/components/Form/Profile/Information.vue
+++ b/src/modules/01_exam/components/Form/Profile/Information.vue
@@ -6,9 +6,12 @@
       header="ข้อมูลส่วนตัว"
       icon="mdi-account"
       :save="saveData"
-      :addData="addData"
+      :addData="true"
+      :editOnly="false"
       :cancel="cancelData"
       :changeBtn="changeBtn"
+      :editData="step == 2"
+      :disable="statusEdit"
     />
     <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">
@@ -303,11 +306,11 @@
             borderless
             v-model="fileData"
             stack-label
-            :readonly="!edit"
+            :readonly="statusEdit"
             @update:model-value="pickFile"
           >
             <q-img src="@/assets/avatar_user.jpg" class="col-12">
-              <div class="overlay" v-if="edit">
+              <div class="overlay" v-if="!statusEdit">
                 <q-icon name="mdi-camera" />
                 <br />อัปเดต
               </div>
@@ -338,7 +341,6 @@ const mixin = useCounterMixin()
 const { date2Thai, calAge } = mixin
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(true)
 const informaData = ref<Information>(defaultInformation)
 const provinceOptions = ref<DataOption[]>([])
 const myform = ref<any>()
@@ -387,9 +389,6 @@ const props = defineProps({
 const emit = defineEmits(['update:statusEdit'])
 
 onMounted(() => {
-  if (props.step !== 2) {
-    addData.value = false
-  }
   //   fetchProvince()
 })
 
diff --git a/src/modules/01_exam/components/Form/Profile/Occupation.vue b/src/modules/01_exam/components/Form/Profile/Occupation.vue
index 31b951b..2ad3d35 100644
--- a/src/modules/01_exam/components/Form/Profile/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Profile/Occupation.vue
@@ -6,9 +6,12 @@
       header="อาชีพ"
       icon="mdi-briefcase"
       :save="saveData"
-      :addData="addData"
+      :addData="true"
+      :editOnly="false"
       :cancel="cancelData"
       :changeBtn="changeBtn"
+      :editData="step == 2"
+      :disable="statusEdit"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -238,7 +241,6 @@ import { defaultOccupation } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(true)
 const occupationData = ref<Occupation>(defaultOccupation)
 const myform = ref<any>()
 
@@ -259,11 +261,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:statusEdit'])
 
-onMounted(() => {
-  if (props.step !== 2) {
-    addData.value = false
-  }
-})
+onMounted(() => {})
 
 const saveData = async () => {
   await myform.value.validate().then(async (success: boolean) => {
diff --git a/src/modules/01_exam/views/ExamDetail.vue b/src/modules/01_exam/views/ExamDetail.vue
index d05783d..50baf47 100644
--- a/src/modules/01_exam/views/ExamDetail.vue
+++ b/src/modules/01_exam/views/ExamDetail.vue
@@ -9,10 +9,8 @@
   </q-toolbar>
   <q-card flat class="">
     <div class="justify-center">
-      <!-- done-color="deep-orange"
-        active-color="purple"
-        inactive-color="secondary" -->
       <q-stepper
+        class="col-2"
         v-model="step"
         ref="stepper"
         alternative-labels
@@ -21,28 +19,26 @@
         done-color="positive"
         active-color="blue-7"
         inactive-color="positive"
-        done-icon="check"
-        :active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil-outline' : 'mdi-eye-outline'"
+        done-icon="mdi-check-bold"
+        :active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye-outline'"
       >
-        <q-step
+        <!-- <q-step
           :done="step > 1"
           :disable="stepRaw < 1"
           :name="1"
           title="อ่านคำชี้แจง"
           :icon="
-            stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
+            stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'
           "
         >
           <ExamDetail :fetchStep="fetchStep" :step="stepRaw" />
-        </q-step>
+        </q-step> -->
         <q-step
           :done="step > 2"
           :disable="stepRaw < 2"
           :name="2"
           title="ข้อมูลสมัครสอบ"
-          :icon="
-            stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
-          "
+          :icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
         >
           <ExamForm :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
@@ -51,9 +47,7 @@
           :disable="stepRaw < 3"
           :name="3"
           title="ชำระค่าธรรมเนียมการสอบ"
-          :icon="
-            stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
-          "
+          :icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
         >
           <ExamPayment :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
@@ -62,9 +56,7 @@
           :disable="stepRaw < 4"
           :name="4"
           title="สำเร็จ"
-          :icon="
-            stepRaw >= 4 ? (stepRaw == 4 ? 'mdi-pencil-outline' : 'check') : 'mdi-pencil-outline'
-          "
+          :icon="stepRaw >= 4 ? (stepRaw == 4 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
         >
           <ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
@@ -84,8 +76,8 @@ import { useQuasar } from 'quasar'
 
 const $q = useQuasar()
 const examId = ref<string>('zxc')
-const step = ref<number>(1)
-const stepRaw = ref<number>(1)
+const step = ref<number>(2)
+const stepRaw = ref<number>(2)
 const examPost = ref<any>()
 const test = ref<any>()
 const loading = ref<boolean>(false)