no message

src/modules/05_placement/components/Main.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, useAttrs } from "vue";
+import { onMounted, reactive, ref, useAttrs, watchEffect } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
-import type { DataOption,DataOption1 } from "@/modules/05_placement/interface/index/Main";
+import type {
+  DataOption,
+  DataOption1,
+} from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
@@ -15,7 +18,7 @@ const DataStore = usePlacementDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dateText, messageError } = mixin;
-
+const selectedFiscalYear = ref(0);
 // แปลงเวลา ค.ศ ให้เป็น พ.ศ
 const textDate = (value: Date) => {
   return dateText(value);
@@ -108,46 +111,30 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<FormPlacementMainData[]>([
-  {
-    id: 0,
-    examRound: "",
-    examOrder: 0,
-    fiscalYear: 0,
-    numberOfCandidates: 0,
-    examTypeValue: "",
-    examTypeName: "",
-    accountStartDate: "",
-    accountExpirationDate: "",
-  },
-]);
+const rows = ref<FormPlacementMainData[]>([]);
+const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
 
 let OriginalData = ref<FormPlacementMainData[]>([]);
 let UpdataData = ref<FormPlacementMainData[]>([]);
-
+watchEffect(() => {
+  rows.value = OriginalData.value;
+});
 const OriginalDataFetch = async (year: number) => {
+  yearValue.value = year;
   try {
     const response = await http.get(config.API.MainDetail(year));
     const apiData = response.data.result;
-    console.log("🚀 ~ file: Main.vue:160 ~ .then ~ res:", apiData);
+    console.log(`🚀 ข้อมูลจากการ get (${year})`, apiData);
     await DataStore.DataMain(apiData);
     OriginalData.value = await DataStore.DataMainOrig;
-    UpdataData.value = OriginalData.value.filter((data) => data.fiscalYear === year); // ใช้ค่า fiscalYear ในการกรองข้อมูล
+    UpdataData.value = OriginalData.value.filter(
+      (data) => data.fiscalYear === year
+    );
   } catch (error) {
     messageError($q, error);
   }
 };
 
-
-onMounted(async () => {
-  await fiscalYearFilter();
-  await OriginalDataFetch(fiscalyear.value);
-  examTimeFilter();
-  await examTypeFilter();
-  expiredAccountFilter();
-  await searchFilterTable();
-});
-
 // ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (examId?: number) => {
   router.push(`/placement/pass/${examId}`);
@@ -158,27 +145,30 @@ const fiscalyear = ref<number>(0);
 const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedfiscalYearValues: number[] = [];
 const fiscalYearFilter = async () => {
-  let maxYear = 0;
   try {
     const response = await http.get(config.API.yearOptions());
     const dataOptions = response.data.result;
-    console.log("🚀 ", dataOptions);
-    for (let data of dataOptions) {
-      fiscalyearOP.push(data);
+    fiscalyearOP.push(...dataOptions);
 
+    let maxYear = 0;
+    for (let data of dataOptions) {
       if (data.id > maxYear) {
         maxYear = data.id;
       }
     }
+
     fiscalyear.value = maxYear;
-    console.log("Selected Year:", fiscalyear.value);
-    await OriginalDataFetch(fiscalyear.value); // เรียกใช้งานฟังก์ชันที่ดึงข้อมูลใหม่เมื่อมีการเลือกใน fiscalyear
+
+    // อัพเดตค่าของ selectedFiscalYear
+    selectedFiscalYear.value = fiscalyear.value;
+
+    // โหลดข้อมูลใหม่เมื่อตัวเลือกปีเปลี่ยนแปลง
+    await OriginalDataFetch(selectedFiscalYear.value);
   } catch (e) {
     messageError($q, e);
   }
 };
 
-
 //-------------------|เลือกปีงบประมาณตาม API|--------------------//
 interface YearOption {
   id: number;
@@ -187,20 +177,17 @@ interface YearOption {
 
 const searchfiscalyear = async () => {
   try {
-    const response = await http.get(config.API.yearOptions());
-    const dataOptions: YearOption[] = response.data.result;
-    console.log("🚀 ~ file: Main.vue:189 ~ .then ~ dataOptions:", dataOptions);
-    
+    const res = await http.get(config.API.yearOptions());
+    const dataOptions: YearOption[] = res.data.result;
     if (fiscalyear.value === 0) {
-      // Perform any desired operations for selecting "ทั้งหมด" option
-      // เช่นตัวอย่างข้างล่างนี้ ที่แสดงผลลัพธ์ทั้งหมดใน console.log
-      console.log("All Year Objects:", dataOptions);
+      await OriginalDataFetch(0);
     } else {
-      // Find the selected object based on the chosen year
-      const selectedYearObject = dataOptions.find((option: YearOption) => option.id === fiscalyear.value);
+      const selectedYearObject = dataOptions.find(
+        (option: YearOption) => option.id === fiscalyear.value
+      );
+      OriginalDataFetch(fiscalyear.value);
+
       if (selectedYearObject) {
-        console.log("Selected Year Object:", selectedYearObject);
-        // Perform any desired operations with the selected object here
       } else {
         console.log("No Selected Year Object");
       }
@@ -210,8 +197,6 @@ const searchfiscalyear = async () => {
   }
 };
 
-
-
 //-------------------|ค้นหาในตาราง|-----------------//
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -290,7 +275,7 @@ const expiredAccountFilter = async () => {
   const currentDate = new Date();
   const updatedRows = OriginalData.value.map((data) => {
     let expirationDate = new Date(data.accountExpirationDate);
-    let isExpired = expirationDate < currentDate;
+    let isExpired = currentDate > expirationDate;
 
     return { ...data, isExpired };
   });
@@ -308,6 +293,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+onMounted(async () => {
+  await fiscalYearFilter();
+  examTimeFilter();
+  await examTypeFilter();
+  expiredAccountFilter();
+  await searchFilterTable();
+});
 </script>
 
 <template>
@@ -315,7 +307,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
     รายการสอบแข่งขัน / คัดเลือก
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-sm">
+    <div class="row q-col-gutter-md">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
           class="col-xs-12 col-sm-3 col-md-2"
@@ -421,8 +413,10 @@ const paginationLabel = (start: string, end: string, total: string) => {
         </q-card>
       </div>
       <div class="col-12">
+        {{ rows }}
         <q-table
           ref="table"
+          :row="rows"
           :columns="columns"
           :rows="UpdataData"
           :filter="filterKeyword"

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

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
-import { useRouter } from "vue-router";
+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";
 
 let roleAdmin = ref<boolean>(false);
-
 const router = useRouter();
+const route = useRoute();
+const examId = route.params.examId;
 const year = ref<string>("2566");
 const round = ref<string>("1");
 const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
@@ -15,14 +18,38 @@ const AddTablePosition = defineAsyncComponent(
   () => import("@/modules/05_placement/components/pass/Table.vue")
 );
 const stat = ref<any>({
-  total: 5,
-  unContain: 1,
-  prepareContain: 3,
-  contain: 1,
+  total: 0,
+  unContain: 0,
+  prepareContain: 0,
+  contain: 0,
   disclaim: 0,
 });
 
+const getStat = async () => {
+  const examIdString = Array.isArray(examId) ? examId[0] : examId;
+
+  try {
+    const res = await http.get(config.API.getStatCard(examIdString));
+    const statCard = res.data.result;
+
+    // อัปเดตค่าในตัวแปร stat
+    stat.value = {
+      total: statCard.total,
+      unContain: statCard.unContain,
+      prepareContain: statCard.prepareContain,
+      contain: statCard.contain,
+      disclaim: statCard.disclaim,
+    };
+
+    console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
+  } catch (error) {
+    console.error("Error retrieving data:", error);
+    // จัดการข้อผิดพลาดที่เกิดขึ้นในการรับข้อมูล
+  }
+};
+
 onMounted(async () => {
+  await getStat()
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
   }

src/modules/05_placement/interface/request/placement.ts

@@ -48,6 +48,7 @@ interface PartialTableName {
   positionPath: string;
   reportingDate: string;
   bmaOfficer: string;
+  number: number;
   statusId: string;
   disclaim: string;
 }