refactor code

src/views/MainLayout.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useQuasar } from 'quasar'
 import { onMounted, ref } from 'vue'
-// import keycloak from '@/plugins/keycloak'
 import { useRoute } from 'vue-router'
-import { menuList, options, notiList } from '../interface/main/index'
 import { useExamDataStore } from '@/modules/01_exam/store'
+import { useDataStore } from '@/stores/data'
 import { useCounterMixin } from '@/stores/mixin'
+import { storeToRefs } from 'pinia'
 import keycloak from '@/plugins/keycloak'
 import http from '@/plugins/http'
 import config from '@/app.config'
@@ -13,14 +13,12 @@ import config from '@/app.config'
 const route = useRoute()
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { statusCandidate } = mixin
-const store = useExamDataStore()
-const miniState = ref<boolean>(false)
-const active = ref<number>(0)
-const drawerL = ref<boolean>(false)
-const fullname = ref<string>('')
-const notiTrigger = ref<boolean>(false)
-const loader = ref<boolean>(false)
+const { statusCandidate, messageError } = mixin
+const storeExam = useExamDataStore()
+const store = useDataStore()
+const { loader } = storeToRefs(store)
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
 const status = ref<string>('register')
 const examId = ref<string>('')
 const positionId = ref<string>('')
@@ -31,26 +29,6 @@ onMounted(async () => {
   await fetchStatus()
 })
 
-const toggleBtnLeft = () => {
-  if (window.innerWidth < 1024) {
-    drawerL.value = !drawerL.value
-  } else {
-    miniState.value = !miniState.value
-  }
-}
-
-/**
- * ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
- * ปกติ path จะ active เมื่อ path นั้นมีค่า ตรงตัวมันเช่น /main
- * แต่จะไม่ active เมื่อ path นั้น มี child path  /main/อื่นๆ
- * @param path string
- */
-const activeMenu = (path: string) => {
-  if (path == 'dashboard' && route.fullPath == '/') return true
-  const bool = route.fullPath.includes(path)
-  return bool
-}
-
 /**
  * logout keycloak
  * confirm ก่อนออกจากระบบ
@@ -68,16 +46,18 @@ const doLogout = () => {
 }
 
 const fetchStatus = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateStatus(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       status.value = data
     })
-    .catch(() => {})
+    .catch((e) => {
+      //   messageError($q, e)
+    })
     .finally(() => {
-      loader.value = false
+      loaderPage(false)
     })
 }
 
@@ -107,19 +87,10 @@ const getFontColor = (val: string) => {
       return '-'
   }
 }
-
-/**
- * ดิงชื่อผู้ใช้งานจาก keycloak
- */
-// if (keycloak.tokenParsed != null) {
-//   fullname.value = keycloak.tokenParsed.name
-// }
 </script>
 
 <!-- โครงเว็บ -->
 <template>
-  <!-- แบบเก่า design แรก -->
-  <!-- <q-layout view="lHh Lpr lff"> -->
   <!-- ปรับให้กับหน้า รายละเอียดรายการสอบทั้งหมด  -->
   <q-layout view="lHh LpR lff" class="bgColor text-dark">
     <!-- header -->
@@ -137,11 +108,8 @@ const getFontColor = (val: string) => {
           </div>
         </q-toolbar-title>
         <q-space />
-        <!-- <q-badge flat color="blue" class="q-mr-md text-bold">
-          {{ statusCandidate(status) }}
-        </q-badge> -->
-        <div class="q-mr-md text-bold" :class="getFontColor(store.status)">
-          {{ statusCandidate(store.status) }}&nbsp;&nbsp;
+        <div class="q-mr-md text-bold" :class="getFontColor(storeExam.status)">
+          {{ statusCandidate(storeExam.status) }}&nbsp;&nbsp;
         </div>
         <q-btn
           v-if="$q.screen.gt.xs"
@@ -169,14 +137,12 @@ const getFontColor = (val: string) => {
         <router-view :key="$route.fullPath" />
       </q-page>
     </q-page-container>
+    <full-loader :visibility="loader" />
   </q-layout>
 </template>
 
 <style>
 .bgColor {
-  /* background-image: url("../assets/bg.png");
-	background-size: cover;
-	background-size: 100%; */
   background: #f6f9fa;
 }