refactor code

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

@@ -27,7 +27,7 @@
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
-    <Education :status="status" />
+    <Education :educationLevelOptions="educationLevelOptions" :status="status" />
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
@@ -44,6 +44,9 @@
 import { ref, onMounted, watch } from 'vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
+import { useQuasar } from 'quasar'
 import type { DataOption } from '@/modules/01_exam/interface/index/Main'
 import Information from '@/modules/01_exam/components/Form/Information.vue'
 import Address from '@/modules/01_exam/components/Form/Address.vue'
@@ -75,16 +78,6 @@ const props = defineProps({
     required: true
   }
 })
-
-const loader = ref<boolean>(true)
-const prefixOptions = ref<DataOption[]>([])
-const relationshipOptions = ref<DataOption[]>([])
-const provinceOptions = ref<DataOption[]>([])
-const formInformation = ref<any>({})
-const formAddress = ref<any>({})
-const formFamily = ref<any>({})
-const formOccupation = ref<any>({})
-
 const emit = defineEmits([
   'update:formInformation',
   'update:formAddress',
@@ -92,6 +85,20 @@ const emit = defineEmits([
   'update:formOccupation'
 ])
 
+const $q = useQuasar()
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
+const mixin = useCounterMixin()
+const { messageError } = mixin
+const prefixOptions = ref<DataOption[]>([])
+const relationshipOptions = ref<DataOption[]>([])
+const provinceOptions = ref<DataOption[]>([])
+const educationLevelOptions = ref<DataOption[]>([])
+const formInformation = ref<any>({})
+const formAddress = ref<any>({})
+const formFamily = ref<any>({})
+const formOccupation = ref<any>({})
+
 watch(formInformation, async (count: Object, prevCount: Object) => {
   emit('update:formInformation', count)
 })
@@ -108,63 +115,45 @@ watch(formOccupation, async (count: Object, prevCount: Object) => {
   emit('update:formOccupation', count)
 })
 
-onMounted(() => {
-  fetchPrefix()
-  fetchRelationship()
-  fetchProvince()
+onMounted(async () => {
+  await fetchPerson()
 })
 
-const fetchPrefix = async () => {
-  loader.value = true
+const fetchPerson = async () => {
+  loaderPage(true)
   await http
-    .get(config.API.prefix)
+    .get(config.API.person)
     .then((res) => {
       const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
+      let optionPrefix: DataOption[] = []
+      data.prefixs.map((r: any) => {
+        optionPrefix.push({ id: r.id.toString(), name: r.name.toString() })
       })
-      prefixOptions.value = option
-    })
-    .catch((e) => {})
-    .finally(() => {
-      loader.value = false
-    })
-}
+      prefixOptions.value = optionPrefix
 
-const fetchRelationship = async () => {
-  loader.value = true
-  await http
-    .get(config.API.relationship)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
+      let optionRelationship: DataOption[] = []
+      data.relationships.map((r: any) => {
+        optionRelationship.push({ id: r.id.toString(), name: r.name.toString() })
       })
-      relationshipOptions.value = option
-    })
-    .catch((e) => {})
-    .finally(() => {
-      loader.value = false
-    })
-}
+      relationshipOptions.value = optionRelationship
 
-const fetchProvince = async () => {
-  loader.value = true
-  await http
-    .get(config.API.province)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
+      let optionProvince: DataOption[] = []
+      data.provinces.map((r: any) => {
+        optionProvince.push({ id: r.id.toString(), name: r.name.toString() })
       })
-      provinceOptions.value = option
+      provinceOptions.value = optionProvince
+
+      let optionEducationLevel: DataOption[] = []
+      data.educationLevels.map((r: any) => {
+        optionEducationLevel.push({ id: r.id.toString(), name: r.name.toString() })
+      })
+      educationLevelOptions.value = optionEducationLevel
+    })
+    .catch((e) => {
+      messageError($q, e)
     })
-    .catch((e) => {})
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 </script>