ปรับ code รายการลา Table

src/modules/05_leave/componenst/ListCalendar.vue

@@ -13,7 +13,6 @@ const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
   mixin;
 const LeaveData = useLeaveStore();
-const { fecthList } = LeaveData;
 
 const $q = useQuasar();
 
@@ -36,6 +35,7 @@ async function fetchDataTable() {
     .post(config.API.leaveTableList(), body)
     .then((res) => {
       console.log(res);
+      const data = res.data.result.data;
     })
     .catch((err) => {
       messageError($q, err);

src/modules/05_leave/interface/response/leave.ts

@@ -0,0 +1,21 @@
+interface ListLeave {
+  id: string; //*Id การยื่นขอลา
+  leaveTypeName: string; //Name ประเภทการลา
+  leaveTypeId: string; //Id ประเภทการลา
+  fullname: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
+  dateSendLeave: Date | null; //วันที่ยื่นใบลา
+  status: string; //สถานะการของลา
+  isDelete: boolean; //ขอยกเลิกคำขอลา ถ้าเคยขอแล้วจะเป็น true ไม่เคยเป็น false
+}
+
+interface ListLeaveTable {
+  id: string;
+  leaveTypeName: string;
+  leaveTypeId: string;
+  fullname: string;
+  dateSendLeave: string | null;
+  status: string;
+  isDelete: boolean;
+}
+
+export type { ListLeave, ListLeaveTable };

src/modules/05_leave/store.ts

@@ -1,28 +1,53 @@
 import { defineStore } from "pinia";
-import { ref, computed } from "vue";
+import { ref } from "vue";
+
 import type { QTableProps } from "quasar";
 import type {
-  FormLeavetMainData,
   OptionData,
-  formListLeaveData,
   TypeLeave,
 } from "@/modules/05_leave/interface/index/main";
+import type {
+  ListLeave,
+  ListLeaveTable,
+} from "@/modules/05_leave/interface/response/leave";
+
 import { useCounterMixin } from "@/stores/mixin";
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
 
 export const useLeaveStore = defineStore("Leave", () => {
   const tabValue = ref<string>("calendar");
   const typeLeave = ref<string | undefined>("");
-  const mixin = useCounterMixin();
-  const { date2Thai } = mixin;
+
   const LeaveType = ref<string | null>("0");
   const LeaveStatus = ref<string | null>("0");
   const fiscalYearyear = ref<Number | null>(new Date().getFullYear());
-  const rows = ref<formListLeaveData[]>([]);
-  const DataMainOrig = ref<formListLeaveData[]>([]); // ข้อมูลหลักดั้งเดิม
+  const rows = ref<ListLeaveTable[]>([]);
+
+  /**
+   * function เรียกข้อมูลรายการลา Table
+   * @param data ข้อมูลรายการลา Table
+   */
+  async function fetchListLeave(data: ListLeave[]) {
+    let datalist: ListLeaveTable[] = data.map((e: ListLeave) => ({
+      id: e.id,
+      leaveTypeName: e.leaveTypeName,
+      leaveTypeId: e.leaveTypeId,
+      fullname: e.fullname,
+      dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
+      status: e.status,
+      isDelete: e.isDelete,
+    }));
+    rows.value = datalist;
+  }
 
   /** ประเภทการลา */
   const typeOptions = ref<OptionData[]>([]);
   const typeOptionsMain = ref<OptionData[]>([]);
+  /**
+   * function เรียกข้อมูลประเภทการลา
+   * @param data ประเภทการลา
+   */
   async function fetchLeaveType(data: TypeLeave[]) {
     typeOptionsMain.value = [
       { id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
@@ -46,96 +71,13 @@ export const useLeaveStore = defineStore("Leave", () => {
   ]);
   const statusOptions = ref<OptionData[]>(statusOptionsMain.value);
 
-  async function fecthList(data: formListLeaveData[]) {
-    let datalist: formListLeaveData[] = data.map((e: any) => ({
-      no: e.no,
-      type: e.type,
-      status: e.status,
-      date: e.date,
-      year: e.year,
-    }));
-    rows.value = datalist;
-    DataMainOrig.value = datalist;
-  }
-
-  const DataMainUpdate = ref<formListLeaveData[]>([]); // ข้อมูลเปลี่ยนแปลง
-  const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val);
-  const DataUpdate = (
-    filterType: string,
-    filterStatus: string,
-    filterYear: string
-  ) => {
-    DataMainUpdate.value = [];
-
-    if (filterType === "" && filterStatus === "" && filterYear === "") {
-      DataMainUpdate.value = DataMainOrig.value;
-    } else if (filterType !== "" && filterStatus === "" && filterYear === "") {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) => item.type === filterType
-      );
-    } else if (
-      filterType !== "" &&
-      filterStatus !== "" &&
-      filterYear === null
-    ) {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) =>
-          item.type === filterType && item.status === filterStatus
-      );
-    } else if (filterType !== "" && filterStatus === "" && filterYear !== "") {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) =>
-          item.type === filterType && item.year === filterYear
-      );
-    } else if (filterType === "" && filterStatus !== "" && filterYear === "") {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) => item.status === filterStatus
-      );
-    } else if (filterType === "" && filterStatus === "" && filterYear !== "") {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) => item.year === filterYear
-      );
-    } else if (
-      filterType === "" &&
-      filterStatus !== "" &&
-      filterYear !== null
-    ) {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) =>
-          item.status === filterStatus && item.year === filterYear
-      );
-    } else if (filterType !== "" && filterStatus !== "" && filterYear === "") {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) =>
-          item.status === filterStatus && item.type === filterType
-      );
-    } else if (
-      filterType !== "" &&
-      filterStatus !== "" &&
-      filterYear !== null
-    ) {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) =>
-          item.type === filterType &&
-          item.status === filterStatus &&
-          item.year === filterYear
-      );
-    } else if (
-      filterType == "0" &&
-      filterStatus == "0" &&
-      filterYear !== null
-    ) {
-      DataMainUpdate.value = DataMainOrig.value;
-    }
-  };
-
   /**
-   *ฟังก์ชั่นเลือก selector ที่ใช่ในการฟิลเตอร์
+   * function ต้นหาข้อมูลของ Option
    * @param val ค่าที่ต้องการฟิลเตอร์
    * @param update  อัพเดทค่า
    * @param refData ดาต้าที่ต้องการฟิลเตอร์
    */
-  const filterOption = (val: any, update: Function, refData: string) => {
+  function filterOption(val: any, update: Function, refData: string) {
     switch (refData) {
       case "LeaveTypeOption":
         update(() => {
@@ -154,24 +96,6 @@ export const useLeaveStore = defineStore("Leave", () => {
       default:
         break;
     }
-  };
-
-  /** filter ปี */
-  const fiscalyearOP = ref<OptionData[]>([
-    { id: "0", name: "ทั้งหมด" },
-    { id: "1", name: "2566" },
-    { id: "2", name: "2567" },
-    { id: "2", name: "2568" },
-  ]);
-
-  /**
-   *ฟังก์ชั่นค้นหาแสดง option ของประเภทการลา
-   * @param val ค่าที่เเสดง
-   * @returns option ทั้งหมด
-   */
-  function convertType(val: string) {
-    if (val == "0") return "ทั้งหมด";
-    else return options.value.find((x) => x.id == val)?.name;
   }
 
   /** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
@@ -203,18 +127,13 @@ export const useLeaveStore = defineStore("Leave", () => {
     { id: "11", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
   ]);
 
-  /**
-   *ฟังก์ชั่นค้นหาแสดง option ของสถานะ
-   * @param val ค่าที่เเสดง
-   * @returns option ทั้งหมด
-   */
-  function convertStatus(val: string) {
-    if (val == "0") return "ทั้งหมด";
-    else return statusOptions.value.find((x) => x.id == val)?.name;
-  }
-
   /** data table filter & column ของรายการลา */
-  const visibleColumns = ref<String[]>(["no", "type", "date", "status"]);
+  const visibleColumns = ref<String[]>([
+    "no",
+    "leaveTypeName",
+    "dateSendLeave",
+    "status",
+  ]);
   const columns = ref<QTableProps["columns"]>([
     {
       name: "no",
@@ -226,20 +145,20 @@ export const useLeaveStore = defineStore("Leave", () => {
       style: "font-size: 14px; width:5%;",
     },
     {
-      name: "type",
+      name: "leaveTypeName",
       align: "left",
       label: "ประเภทการลา",
       sortable: true,
-      field: "type",
+      field: "leaveTypeName",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px; width:15%;",
     },
     {
-      name: "date",
+      name: "dateSendLeave",
       align: "left",
       label: "วันที่ยื่นใบลา",
       sortable: true,
-      field: "date",
+      field: "dateSendLeave",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px; width:15%;",
     },
@@ -302,24 +221,20 @@ export const useLeaveStore = defineStore("Leave", () => {
     typeOptions,
     optionsSpecific,
     statusOptions,
-    DataMain,
-    DataMainUpdate,
-    DataUpdate,
-    DataMainOrig,
+
     visibleColumns,
     columns,
     rows,
     LeaveType,
     LeaveStatus,
-    fecthList,
 
-    fiscalyearOP,
     fiscalYearyear,
     options,
     optionsOrdination,
     typeConvert,
     typeLeave,
 
+    fetchListLeave,
     fetchLeaveType,
     filterOption,
   };