refactor code

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

@@ -8,7 +8,6 @@
     :editOnly="false"
     :editData="false"
   />
-  <!-- :changeBtn="changeBtn" -->
   <q-form ref="myform" class="col-12 row q-col-gutter-x-sm justify-center q-col-gutter-sm">
     <div class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
       <div class="col-xs-12 col-sm-2 col-md-2">
@@ -347,15 +346,16 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
 import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import type { PropType } from 'vue'
-import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
-import { defaultInformation, changeData } from '@/modules/01_exam/interface/index/Main'
-import HeaderTop from '@/components/top.vue'
 import { useRoute } from 'vue-router'
 import keycloak from '@/plugins/keycloak'
 import { useQuasar } from 'quasar'
+import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
+import { defaultInformation, changeData } from '@/modules/01_exam/interface/index/Main'
+import HeaderTop from '@/components/top.vue'
 
 const props = defineProps({
   prefixOptions: {
@@ -379,24 +379,21 @@ const props = defineProps({
     required: true
   }
 })
+const emit = defineEmits(['update:form'])
 
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, calAge, modalError, success } = mixin
+const { date2Thai, calAge, success, messageError } = mixin
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
 const districtOptions = ref<DataOption[]>([])
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
 const edit = ref<boolean>(true)
 const myform = ref<any>({})
-const disabledPic = ref<boolean>(false)
-const fileData = ref<File | null>()
-const loader = ref<boolean>(false)
 const img = ref<string>('')
 const fileProfile = ref<File[]>([])
-const fileDataUpload = ref<File>()
-
-const emit = defineEmits(['update:form'])
 
 watch(myform, async (count: any, prevCount: any) => {
   emit('update:form', count)
@@ -414,7 +411,7 @@ onMounted(async () => {
 })
 
 const fetchData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateInformation(examId.value, positionId.value))
     .then((res) => {
@@ -445,21 +442,23 @@ const fetchData = async () => {
         keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
     })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
 const fetchImgData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateProfile(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       img.value = data
     })
-    .catch(() => {})
-    .finally(async () => {
-      loader.value = false
+    .catch((e) => {
+      //   messageError($q, e)
+    })
+    .finally(() => {
+      loaderPage(false)
     })
 }
 
@@ -468,16 +467,16 @@ const uploadImage = async (e: any) => {
   if (input.length > 0) {
     const formData = new FormData()
     formData.append('', input[0])
-    // loaderPage(true);
+    loaderPage(true)
     await http
       .put(config.API.candidateProfile(examId.value, positionId.value), formData)
       .then((res) => {
         success($q, 'อัพโหลดรูปสำเร็จ')
       })
-      .catch((e) => {})
+      .catch((e) => {
+        messageError($q, e)
+      })
       .finally(async () => {
-        loader.value = false
-        // await fetchData()
         await fetchImgData()
         fileProfile.value = []
       })
@@ -485,14 +484,14 @@ const uploadImage = async (e: any) => {
   }
 }
 
-const selectProvince = (val: string) => {
+const selectProvince = async (val: string) => {
   defaultInformation.value.districtId = ''
   myform.value.resetValidation()
-  fetchDistrict(val)
+  await fetchDistrict(val)
 }
 
 const fetchDistrict = async (id: string) => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.listDistrict(id))
     .then((res) => {
@@ -503,14 +502,12 @@ const fetchDistrict = async (id: string) => {
       })
       districtOptions.value = option
     })
-    .catch(() => {})
-    .finally(() => {
-      loader.value = false
+    .catch((e) => {
+      messageError($q, e)
+    })
+    .finally(() => {
+      loaderPage(false)
     })
-}
-
-const savePic = () => {
-  disabledPic.value = false
 }
 
 const getClass = (val: boolean) => {