refactor code

src/modules/01_exam/components/Form/Career.vue

@@ -11,7 +11,6 @@
       v-model:editvisible="edit"
       :add="clickAdd"
       :edit="clickEdit"
-      :cancel="clickCancel"
       :addData="false"
       :editData="status == 'register' || status == 'rejectRegister'"
       name="ประวัติการทำงาน/ฝึกงาน"
@@ -51,7 +50,6 @@
       </template>
     </Table>
   </q-form>
-  <!-- popup Edit window-->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
       <q-form ref="myForm">
@@ -165,7 +163,6 @@
         </q-card-section>
         <q-separator />
         <DialogFooter
-          :cancel="clickCancel"
           :edit="clickEdit"
           :save="clickSave"
           :validate="validateData"
@@ -185,9 +182,11 @@
 import { onMounted, ref, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useExamDataStore } from '@/modules/01_exam/store'
+import { useRoute } from 'vue-router'
 import type {
   RequestItemsObject,
   Columns,
@@ -197,7 +196,6 @@ import type { ResponseObject } from '@/modules/01_exam/interface/response/Career
 import Table from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
-import { useRoute } from 'vue-router'
 
 const props = defineProps({
   status: {
@@ -208,10 +206,11 @@ const props = defineProps({
 
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success } = mixin
+const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success, messageError } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
-const loader = ref<boolean>(false)
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
 const id = ref<string>('')
 const location = ref<string>()
 const position = ref<string>()
@@ -297,7 +296,7 @@ onMounted(async () => {
 })
 
 const fetchData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateCareer(examId.value, positionId.value))
     .then((res) => {
@@ -311,16 +310,18 @@ const fetchData = async () => {
         })
       })
     })
-    .catch(() => {})
+    .catch((e) => {
+      //   messageError($q, e)
+    })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
 /**
  * กดดูข้อมูลก่อนหน้า
  */
-const clickPrevious = () => {
+const clickPrevious = async () => {
   rowIndex.value -= 1
   const row = rows.value[rowIndex.value]
   location.value = row.location
@@ -329,13 +330,13 @@ const clickPrevious = () => {
   duration.value = row.duration
   reason.value = row.reason
   id.value = row.id
-  checkRowPage()
+  await checkRowPage()
 }
 
 /**
  * กดดูข้อมูลต่อไป
  */
-const clickNext = () => {
+const clickNext = async () => {
   rowIndex.value += 1
   const row = rows.value[rowIndex.value]
   location.value = row.location
@@ -344,7 +345,7 @@ const clickNext = () => {
   duration.value = row.duration
   reason.value = row.reason
   id.value = row.id
-  checkRowPage()
+  await checkRowPage()
 }
 
 /**
@@ -366,7 +367,6 @@ const checkRowPage = () => {
  * กดปุ่มแก้ไขใน dialog
  */
 const clickEdit = () => {
-  //   edit.value = true
   next.value = false
   previous.value = false
 }
@@ -374,8 +374,8 @@ const clickEdit = () => {
 /**
  * กดปุ่มเพิ่มด้านบน table
  */
-const clickAdd = () => {
-  addRow()
+const clickAdd = async () => {
+  await addRow()
 }
 
 const checkDelete = (row: RequestItemsObject) => {
@@ -388,26 +388,20 @@ const checkDelete = (row: RequestItemsObject) => {
  */
 const clickDeleteRow = async () => {
   if (rawItem.value != null) {
-    loader.value = true
+    loaderPage(true)
     await http
       .delete(config.API.candidateCareer(rawItem.value.id, ''))
       .then(() => {
         success($q, 'ลบข้อมูลสำเร็จ')
       })
-      .catch(() => {
-        //   modalError.value = true
-        //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
-        //   modalErrorDetail.value = e.response.data.message
-        // statusCode.value = e.response.data.status
+      .catch((e) => {
+        messageError($q, e)
       })
       .finally(async () => {
-        loader.value = false
         await fetchData()
-        // edit.value = false
       })
   } else {
     await fetchData()
-    // edit.value = false
   }
 }
 
@@ -417,15 +411,11 @@ const clickDeleteRow = async () => {
 const clickSave = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      //   if (store.consend == true) {
       if (modalEdit.value) {
         await editData()
       } else {
         await saveData()
       }
-      //   } else {
-      //     modalConsend.value = true
-      //   }
     }
   })
 }
@@ -434,7 +424,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .post(config.API.candidateCareer(examId.value, positionId.value), {
       name: location.value,
@@ -447,15 +437,10 @@ const saveData = async () => {
     .then(() => {
       success($q, 'บันทึกข้อมูลสำเร็จ')
     })
-    .catch(() => {
-      //   modalError.value = true
-      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
-      //   modalErrorDetail.value = e.response.data.message
-      //   statusCode.value = e.response.data.status
+    .catch((e) => {
+      messageError($q, e)
     })
     .finally(async () => {
-      loader.value = false
-      //   edit.value = false
       modal.value = false
       await fetchData()
     })
@@ -465,7 +450,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .put(config.API.candidateCareer(id.value, ''), {
       name: location.value,
@@ -478,15 +463,10 @@ const editData = async () => {
     .then(() => {
       success($q, 'บันทึกข้อมูลสำเร็จ')
     })
-    .catch(() => {
-      //   modalError.value = true
-      //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
-      //   modalErrorDetail.value = e.response.data.message
-      //   statusCode.value = e.response.data.status
+    .catch((e) => {
+      messageError($q, e)
     })
     .finally(async () => {
-      loader.value = false
-      //   edit.value = false
       modal.value = false
       await fetchData()
     })
@@ -527,12 +507,8 @@ const selectData = (props: DataProps) => {
   duration.value = props.row.duration
   reason.value = props.row.reason
   id.value = props.row.id
-  //   if (edit.value == true) {
   next.value = false
   previous.value = false
-  //   } else {
-  //     checkRowPage()
-  //   }
 }
 
 /**
@@ -548,13 +524,6 @@ const addRow = () => {
   reason.value = ''
 }
 
-/**
- * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
- */
-const clickCancel = async () => {
-  //   edit.value = false
-}
-
 /**
  * เช็คว่ามีการแก้ไขข้อมูล
  */