active Stat card

src/modules/05_placement/components/pass/Detail.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watchEffect } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
 import { useRouter ,useRoute} from "vue-router";
 import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
 import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
 
+const $q = useQuasar
+const mixin = useCounterMixin()
+const { messageError } = mixin
 let roleAdmin = ref<boolean>(false);
 const router = useRouter();
 const route = useRoute();
@@ -27,11 +32,10 @@ const stat = ref<any>({
 
 const getStat = async () => {
   const examIdString = Array.isArray(examId) ? examId[0] : examId;
-
-  try {
-    const res = await http.get(config.API.getStatCard(examIdString));
+  await http
+  .get(config.API.getStatCard(examIdString))
+  .then((res) =>{
     const statCard = res.data.result;
-
     // อัปเดตค่าในตัวแปร stat
     stat.value = {
       total: statCard.total,
@@ -40,12 +44,12 @@ const getStat = async () => {
       contain: statCard.contain,
       disclaim: statCard.disclaim,
     };
-
+    
     console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
-  } catch (error) {
-    console.error("Error retrieving data:", error);
-    // จัดการข้อผิดพลาดที่เกิดขึ้นในการรับข้อมูล
-  }
+  })
+  .catch((e) => {
+    messageError($q, e);
+  })
 };
 
 onMounted(async () => {
@@ -54,6 +58,7 @@ onMounted(async () => {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
   }
 });
+
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
@@ -86,7 +91,7 @@ onMounted(async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
     <div>
-      <AddTablePosition class="q-pa-none" />
+      <AddTablePosition :statCard="getStat" class="q-pa-none" />
     </div>
   </q-card>
 </template>

src/modules/05_placement/components/pass/Table.vue

@@ -18,6 +18,12 @@ import router from "@/router";
 
 let roleAdmin = ref<boolean>(false);
 
+const props = defineProps({
+  statCard:{
+    type:Function,
+    default: () => console.log("getStat"),
+  }
+})
 const edit = ref<boolean>(true);
 const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
@@ -190,6 +196,7 @@ const savePostpone = async () => {
         })
         .finally(async () => {
           await getTable();
+          props.statCard();
           modalDefermentDisclaim.value = false;
           hideLoader();
         });
@@ -215,6 +222,7 @@ const saveDisclaim = async () => {
         .then(() => { success($q, "บันทึกสำเร็จ"); })
         .finally(async () => {
           await getTable();
+          props.statCard();
           modalDefermentDisclaim.value = false;
           hideLoader();
         });