ui การลา

src/modules/09_leave/components/1_Work/DialogDetail.vue

@@ -11,7 +11,7 @@ const props = defineProps({
     type: Function,
   },
 });
-//
+// รายละเอียดข้อมูง
 const titlename = ref<string>("");
 const timeIn = ref<string>("");
 const timeOut = ref<string>("");
@@ -32,6 +32,7 @@ watch(props, () => {
     }
   }
 });
+// ปิด popup
 function colsePopup() {
   props.colse ? props.colse() : false;
 }

src/modules/09_leave/components/1_Work/TableList.vue

@@ -1,4 +1,3 @@
-
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
@@ -13,10 +12,8 @@ const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
 
 const { date2Thai } = mixin;
-const { optionStatus, searchDataFn } = workStore;
-onMounted(() => {
-  optionStatusfn.value = optionStatus;
-});
+const { searchDataFn, filterFn } = workStore;
+onMounted(() => {});
 
 //ข้อมูล Table
 const columns = ref<QTableProps["columns"]>([
@@ -96,28 +93,15 @@ const visibleColumns = ref<string[]>([
 //DialogDetail
 const modal = ref<boolean>(false);
 const dataDetail = ref<any>([]);
+// เปิด popup ลายละเอียด
 function clickDetail(data: any) {
   modal.value = true;
   dataDetail.value = data;
-}
+} //ปิด popup ลายละเอียด
 function colseDeyail() {
   modal.value = false;
 }
-//filter Option
-const optionStatusfn = ref<any>([]);
-function filterFn(val: string, update: any) {
-  if (val == "") {
-    update(() => {
-      optionStatusfn.value = optionStatus;
-    });
-  } else {
-    update(() => {
-      optionStatusfn.value = optionStatus.filter(
-        (e: any) => e.name.search(val) !== -1
-      );
-    });
-  }
-}
+
 
 //pagination
 const pagination = ref({
@@ -178,7 +162,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
         outlined
         dense
         v-model="workStore.selectStatus"
-        :options="optionStatusfn"
+        :options="workStore.optionStatus"
         option-value="id"
         option-label="name"
         label="สถานะ"

src/modules/09_leave/components/2_Leave/TableList.vue

@@ -3,18 +3,19 @@ q
 import { ref } from "vue";
 import type { QTableProps } from "quasar";
 import { useRouter } from "vue-router";
+
 //import Stores
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
-
 const mixin = useCounterMixin();
 const leaveStore = useLeavelistDataStore();
 
 const router = useRouter();
 
 const { date2Thai } = mixin;
-const { optionYear, searchDataFn, filterOption } = leaveStore;
+const { optionYear, searchDataFn, filterOption } = leaveStore; // เรียน funtion จาก stores
 
+// ข้อมูล TABLE
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",

src/modules/09_leave/stores/WorkStore.ts

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
+import type { DataOption } from "@/modules/09_leave/interface/index/Main"
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 export const useWorklistDataStore = defineStore("work", () => {
@@ -21,6 +22,7 @@ export const useWorklistDataStore = defineStore("work", () => {
             status: convertSatatus(e.status)
         }))
         dataMain.value = datalist
+        fetchOption()
         searchDataFn(selectDate.value, selectStatus.value)
     }
 
@@ -28,7 +30,8 @@ export const useWorklistDataStore = defineStore("work", () => {
     const filterTable = ref<string>('')
     const selectDate = ref<Date | null>(null);
     const selectStatus = ref<String>('all')
-    const optionStatus = ref<any[]>([{ id: "all", name: 'ทั้งหมด' }, { id: "1", name: 'ลงเวลาเรียบร้อย' }, { id: "2", name: 'สายทำงานครบ' }])
+    const optionStatusMain = ref<DataOption[]>([])
+    const optionStatus = ref<DataOption[]>([])
     function searchDataFn(searchDate: any, srarchStatus: any) {
         srarchStatus = srarchStatus || "all";
         if (searchDate == null && srarchStatus == "all") {
@@ -37,6 +40,38 @@ export const useWorklistDataStore = defineStore("work", () => {
             rows.value = dataMain.value.filter((e: any) => e.status === convertSatatus(srarchStatus))
         }
     }
+    //
+    function fetchOption() {
+        const double_status = [
+            ...new Set(dataMain.value.map((item: any) => item.status)),
+        ];
+        optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
+        for (let i = 1; i <= double_status.length; i++) {
+            const status = double_status[i - 1];
+            if (typeof status === 'string') {
+                const listtype: DataOption = {
+                    id: status,
+                    name: status,
+                };
+                optionStatusMain.value.push(listtype)
+                optionStatus.value = optionStatusMain.value
+            }
+        }
+    }
+    function filterFn(val: string, update: any) {
+        if (val == "") {
+            update(() => {
+                optionStatus.value = optionStatusMain.value;
+            });
+        } else {
+            update(() => {
+                optionStatus.value = optionStatusMain.value.filter(
+                    (e: any) => e.name.search(val) !== -1
+                );
+            });
+        }
+    }
+
     // convertSatatus
     function convertSatatus(val: string) {
         switch (val) {
@@ -58,6 +93,7 @@ export const useWorklistDataStore = defineStore("work", () => {
         selectStatus,
         optionStatus,
         searchDataFn,
+        filterFn,
         convertSatatus
 
     };

src/modules/09_leave/views/LeaveListMain.vue

@@ -11,6 +11,7 @@ const { fecthList, clearFilter } = leaveStore;
 onMounted(() => {
   fecthLeaveList();
 });
+// เรียกข้อมูลจาก API
 function fecthLeaveList() {
   const data = [
     {
@@ -38,7 +39,7 @@ function fecthLeaveList() {
       status: "2",
     },
   ];
-  fecthList(data);
+  fecthList(data); // ส่งข้อมูลไป stores
 }
 //เปลี่ยน Tab
 function changTab() {

src/modules/09_leave/views/WorkingMain.vue

@@ -66,7 +66,7 @@ function fecthWorkList() {
       status: "1",
     },
   ];
-  fecthList(listData);
+  fecthList(listData); // ส่งข้อมูลไปยัง stores
 }
 </script>
 <template>