แก้ไข filter

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, useAttrs, watchEffect } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
@@ -10,19 +10,14 @@ import type {
 import { useCounterMixin } from "@/stores/mixin";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const DataStore = usePlacementDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dateText, messageError } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 const selectedFiscalYear = ref(0);
-// แปลงเวลา ค.ศ ให้เป็น พ.ศ
-const textDate = (value: Date) => {
-  return dateText(value);
-};
 
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@@ -109,31 +104,96 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<FormPlacementMainData[]>([]);
+const rows = ref<QTableProps["rows"]>([]);
-const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
+// const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
 
-let OriginalData = ref<FormPlacementMainData[]>([]);
+// let OriginalData = ref<FormPlacementMainData[]>([]);
-let UpdataData = ref<FormPlacementMainData[]>([]);
+// let UpdataData = ref<FormPlacementMainData[]>([]);
-watchEffect(() => {
+const searchYear = ref();
-  rows.value = OriginalData.value;
+const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+
+const dataPlacement = ref<any>([]);
+const visibleColumns = ref([
+  "id",
+  "examRound",
+  "examOrder",
+  "examOrder",
+  "fiscalYear",
+  "numberOfCandidates",
+  "examTypeName",
+  "accountStartDate",
+  "accountExpirationDate",
+]);
+
+onMounted(async () => {
+  await fetchYearOptions();
+  // await fiscalYearFilter();
+  // examTimeFilter();
+  // await examTypeFilter();
+  // expiredAccountFilter();
+  // await searchFilterTable();
 });
-const OriginalDataFetch = async (year: number) => {
+const fetchPlacementData = async (val: number) => {
-  yearValue.value = year;
+  showLoader();
-  try {
+  http
-    const response = await http.get(config.API.MainDetail(year));
+    .get(config.API.MainDetail(val))
-    const apiData = response.data.result;
+    .then((res) => {
-    console.log(`🚀 ข้อมูลจากการ get (${year})`, apiData);
+      dataPlacement.value = res.data.result;
-    await DataStore.DataMain(apiData);
+      DataStore.DataMainOrig = dataPlacement.value;
-    OriginalData.value = await DataStore.DataMainOrig;
+      rows.value = DataStore.DataMainOrig;
-    UpdataData.value = OriginalData.value.filter(
+      examTypeFilter();
-      (data) => data.fiscalYear === year
+      examTimeFilter();
-    );
+      expiredAccountFilter();
-  } catch (error) {
+    })
-    messageError($q, error);
+    .catch((e) => {
-  }
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
+const fetchYearOptions = async () => {
+  http
+    .get(config.API.yearOptions())
+    .then((res) => {
+      const response = res.data.result;
+      yearOptions.push(...response);
+      const maxNumber = yearOptions.reduce((max, e) => {
+        return e.id > max ? e.id : max;
+      }, "");
+      searchYear.value = maxNumber;
+      DataStore.DataMainYearSet(searchYear.value);
+      DataStore.DataMainYear = yearOptions.value;
+      fetchPlacementData(searchYear.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+const filterYear = () => {
+  console.log("searchYear", searchYear.value);
+  fetchPlacementData(searchYear.value);
+};
+
+// 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(`🚀 ข้อมูลจากการ get (${year})`, apiData);
+//     await DataStore.DataMain(apiData);
+//     OriginalData.value = await DataStore.DataMainOrig;
+//     UpdataData.value = OriginalData.value.filter(
+//       (data) => data.fiscalYear === year
+//     );
+//   } catch (error) {
+//     messageError($q, error);
+//   }
+// };
 
 // ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (examId?: number) => {
@@ -144,58 +204,54 @@ const redirectToPage = (examId?: number) => {
 const fiscalyear = ref<number>(0);
 const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedfiscalYearValues: number[] = [];
-const fiscalYearFilter = async () => {
+// const fiscalYearFilter = async () => {
-  try {
+//   try {
-    const response = await http.get(config.API.yearOptions());
+//     const response = await http.get(config.API.yearOptions());
-    const dataOptions = response.data.result;
+//     const dataOptions = response.data.result;
-    fiscalyearOP.push(...dataOptions);
+//     fiscalyearOP.push(...dataOptions);
 
-    let maxYear = 0;
+//     let maxYear = 0;
-    for (let data of dataOptions) {
+//     for (let data of dataOptions) {
-      if (data.id > maxYear) {
+//       if (data.id > maxYear) {
-        maxYear = data.id;
+//         maxYear = data.id;
-      }
+//       }
-    }
+//     }
 
-    fiscalyear.value = maxYear;
+//     fiscalyear.value = maxYear;
 
-    // อัพเดตค่าของ selectedFiscalYear
+//     // อัพเดตค่าของ selectedFiscalYear
-    selectedFiscalYear.value = fiscalyear.value;
+//     selectedFiscalYear.value = fiscalyear.value;
 
-    // โหลดข้อมูลใหม่เมื่อตัวเลือกปีเปลี่ยนแปลง
+//     // โหลดข้อมูลใหม่เมื่อตัวเลือกปีเปลี่ยนแปลง
-    await OriginalDataFetch(selectedFiscalYear.value);
+//     await OriginalDataFetch(selectedFiscalYear.value);
-  } catch (e) {
+//   } catch (e) {
-    messageError($q, e);
+//     messageError($q, e);
-  }
+//   }
-};
+// };
 
 //-------------------|เลือกปีงบประมาณตาม API|--------------------//
-interface YearOption {
-  id: number;
-  name: number;
-}
 
-const searchfiscalyear = async () => {
+// const searchfiscalyear = async () => {
-  try {
+//   try {
-    const res = await http.get(config.API.yearOptions());
+//     const res = await http.get(config.API.yearOptions());
-    const dataOptions: YearOption[] = res.data.result;
+//     const dataOptions: YearOption[] = res.data.result;
-    if (fiscalyear.value === 0) {
+//     if (fiscalyear.value === 0) {
-      await OriginalDataFetch(0);
+//       await OriginalDataFetch(0);
-    } else {
+//     } else {
-      const selectedYearObject = dataOptions.find(
+//       const selectedYearObject = dataOptions.find(
-        (option: YearOption) => option.id === fiscalyear.value
+//         (option: YearOption) => option.id === fiscalyear.value
-      );
+//       );
-      OriginalDataFetch(fiscalyear.value);
+//       OriginalDataFetch(fiscalyear.value);
 
-      if (selectedYearObject) {
+//       if (selectedYearObject) {
-      } else {
+//       } else {
-        console.log("No Selected Year Object");
+//         console.log("No Selected Year Object");
-      }
+//       }
-    }
+//     }
-  } catch (e) {
+//   } catch (e) {
-    messageError($q, e);
+//     messageError($q, e);
-  }
+//   }
-};
+// };
 
 //-------------------|ค้นหาในตาราง|-----------------//
 const filterKeyword = ref<string>("");
@@ -205,28 +261,14 @@ const resetFilter = () => {
   filterRef.value.focus();
 };
 
-const attrs = ref<any>(useAttrs());
-const visibleColumns = ref<any[]>([
-  "id",
-  "examRound",
-  "examOrder",
-  "fiscalYear",
-  "numberOfCandidates",
-  "examTypeValue",
-  "examTypeName",
-  "accountStartDate",
-  "accountExpirationDate",
-]);
-
 //-------------------|ครั้งที่สอบ|------------------------------//
 const examTime = ref<number | string>("all");
-const examTimeOP = reactive<DataOption1[]>([]);
+const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
 const addedExamTimeValues: Set<number> = new Set();
 
 const examTimeFilter = async () => {
-  examTimeOP.push({ id: "all", name: "ทั้งหมด" });
+  // examTimeOP.push({ id: "all", name: "ทั้งหมด" });
-
+  for (const data of dataPlacement.value) {
-  for (const data of OriginalData.value) {
     const examOrder = data.examOrder;
     if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
       examTimeOP.push({ id: examOrder.toString(), name: examOrder.toString() });
@@ -244,10 +286,40 @@ const examTimeFilter = async () => {
 const examType = ref<string | null>("all");
 const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
 const addedExamTypeValues: Set<string> = new Set();
+const data = [
+  {
+    accountEndDate: "2024-06-21T01:22:59.251572",
+    accountExpirationDate: "2024-06-21T01:22:59.251572",
+    accountStartDate: "2023-06-22T01:22:59.251572",
+    examOrder: "1",
+    examRound:
+      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+    examTypeName: "แข่งขัน",
+    examTypeValue: "0a846508-4932-40de-9a9e-5b519492211c",
+    fiscalYear: 2566,
+    id: "0a846508-4932-40de-9a9e-5b519492216c",
+    isExpired: false,
+    numberOfCandidates: 1,
+  },
+  {
+    accountEndDate: "2024-06-21T01:22:59.251572",
+    accountExpirationDate: "2024-06-21T01:22:59.251572",
+    accountStartDate: "2023-06-22T01:22:59.251572",
+    examOrder: "2",
+    examRound:
+      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+    examTypeName: "แข่งขัน",
+    examTypeValue: "0a846508-4932-40de-9a9e-5b519492211c",
+    fiscalYear: 2566,
+    id: "0a846508-4932-40de-9a9e-5b519492216c",
+    isExpired: false,
+    numberOfCandidates: 1,
+  },
+];
 const examTypeFilter = () => {
-  for (const data of OriginalData.value) {
+  dataPlacement.value.forEach((item) => {
-    const examTypeName = data.examTypeName;
+    const examTypeName = item.examTypeName;
-    const examTypeValue = data.examTypeValue;
+    const examTypeValue = item.examTypeValue;
     if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
       examTypeOP.value.push({
         id: examTypeValue,
@@ -255,7 +327,7 @@ const examTypeFilter = () => {
       });
       addedExamTypeValues.add(examTypeName);
     }
-  }
+  });
 };
 //--------------|ฟิลเตอร์|--------------------------------------//
 const searchFilterTable = async () => {
@@ -265,7 +337,7 @@ const searchFilterTable = async () => {
       examType.value,
       expiredAccount.value
     );
-    UpdataData.value = DataStore.DataMainUpdate;
+    rows.value = DataStore.DataMainUpdate;
   }
 };
 
@@ -273,7 +345,7 @@ const searchFilterTable = async () => {
 const expiredAccount = ref<boolean>(false);
 const expiredAccountFilter = async () => {
   const currentDate = new Date();
-  const updatedRows = OriginalData.value.map((data) => {
+  const updatedRows = dataPlacement.value.map((data) => {
     let expirationDate = new Date(data.accountExpirationDate);
     let isExpired = currentDate > expirationDate;
 
@@ -293,13 +365,6 @@ 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>
@@ -311,12 +376,12 @@ onMounted(async () => {
       <div class="row col-12 q-col-gutter-sm">
         <q-select
           class="col-xs-12 col-sm-3 col-md-2"
-          v-model="fiscalyear"
+          v-model="searchYear"
           label="ปีงบประมาณ"
           dense
           emit-value
           map-options
-          :options="fiscalyearOP"
+          :options="yearOptions"
           option-value="id"
           option-label="name"
           lazy-rules
@@ -325,7 +390,7 @@ onMounted(async () => {
           :borderless="false"
           :outlined="true"
           :hide-dropdown-icon="false"
-          @update:model-value="searchfiscalyear"
+          @update:model-value="filterYear"
         />
         <q-space />
         <q-input
@@ -413,19 +478,16 @@ onMounted(async () => {
         </q-card>
       </div>
       <div class="col-12">
-        {{ rows }}
         <q-table
           ref="table"
-          :row="rows"
+          :rows="rows"
           :columns="columns"
-          :rows="UpdataData"
           :filter="filterKeyword"
           row-key="id"
           flat
           bordered
           dense
           class="custom-header-table"
-          v-bind="attrs"
           :visible-columns="visibleColumns"
           :pagination-label="paginationLabel"
           v-model:pagination="pagination"
@@ -466,10 +528,10 @@ onMounted(async () => {
                 {{ props.row.examTypeName }}
               </q-td>
               <q-td key="accountStartDate" :props="props">
-                {{ textDate(props.row.accountStartDate) }}
+                {{ date2Thai(props.row.accountStartDate) }}
               </q-td>
               <q-td key="accountExpirationDate" :props="props">
-                {{ textDate(props.row.accountExpirationDate) }}
+                {{ date2Thai(props.row.accountExpirationDate) }}
               </q-td>
             </q-tr>
           </template>