From 333515f57022a0af0383034d99e1e309552b6162 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 9 Oct 2023 09:31:01 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            | 56 +++++++++----------
 .../components/1_Work/DialogDetail.vue        |  3 +-
 .../09_leave/components/1_Work/TableList.vue  | 28 ++--------
 .../09_leave/components/2_Leave/TableList.vue |  5 +-
 src/modules/09_leave/stores/WorkStore.ts      | 38 ++++++++++++-
 src/modules/09_leave/views/LeaveListMain.vue  |  3 +-
 src/modules/09_leave/views/WorkingMain.vue    |  2 +-
 7 files changed, 79 insertions(+), 56 deletions(-)

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 17cdc587a..10cb37f18 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -374,34 +374,34 @@ const menuList = readonly<any[]>([
       },
     ],
   },
-  // {
-  //   key: 9,
-  //   icon: "mdi-calendar",
-  //   activeIcon: "mdi-calendar",
-  //   label: "การลา",
-  //   path: "leave",
-  //   role: "coin",
-  //   children: [
-  //     {
-  //       key: 9.1,
-  //       label: "รายการลงเวลาปฏิบัติงาน",
-  //       path: "/work-list",
-  //       role: "coin",
-  //     },
-  //     {
-  //       key: 9.2,
-  //       label: "รายการลา",
-  //       path: "/leave-list",
-  //       role: "coin",
-  //     },
-  //     {
-  //       key: 9.3,
-  //       label: "รายงานสถิติ",
-  //       path: "/statistics-report",
-  //       role: "coin",
-  //     },
-  //   ],
-  // },
+  {
+    key: 9,
+    icon: "mdi-calendar",
+    activeIcon: "mdi-calendar",
+    label: "การลา",
+    path: "leave",
+    role: "coin",
+    children: [
+      {
+        key: 9.1,
+        label: "รายการลงเวลาปฏิบัติงาน",
+        path: "/work-list",
+        role: "coin",
+      },
+      {
+        key: 9.2,
+        label: "รายการลา",
+        path: "/leave-list",
+        role: "coin",
+      },
+      {
+        key: 9.3,
+        label: "รายงานสถิติ",
+        path: "/statistics-report",
+        role: "coin",
+      },
+    ],
+  },
 ]);
 
 const tabList = readonly<tabType[]>([
diff --git a/src/modules/09_leave/components/1_Work/DialogDetail.vue b/src/modules/09_leave/components/1_Work/DialogDetail.vue
index 28ca10a94..f7b561a0b 100644
--- a/src/modules/09_leave/components/1_Work/DialogDetail.vue
+++ b/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;
 }
diff --git a/src/modules/09_leave/components/1_Work/TableList.vue b/src/modules/09_leave/components/1_Work/TableList.vue
index 7a23e9d18..78028f5de 100644
--- a/src/modules/09_leave/components/1_Work/TableList.vue
+++ b/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="สถานะ"
diff --git a/src/modules/09_leave/components/2_Leave/TableList.vue b/src/modules/09_leave/components/2_Leave/TableList.vue
index 2213b09ba..bd3c01482 100644
--- a/src/modules/09_leave/components/2_Leave/TableList.vue
+++ b/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",
diff --git a/src/modules/09_leave/stores/WorkStore.ts b/src/modules/09_leave/stores/WorkStore.ts
index 4afc1d769..9e7404dc0 100644
--- a/src/modules/09_leave/stores/WorkStore.ts
+++ b/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
 
     };
diff --git a/src/modules/09_leave/views/LeaveListMain.vue b/src/modules/09_leave/views/LeaveListMain.vue
index 2b5ad6226..c184af5e1 100644
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/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() {
diff --git a/src/modules/09_leave/views/WorkingMain.vue b/src/modules/09_leave/views/WorkingMain.vue
index 41bb2331e..639cac988 100644
--- a/src/modules/09_leave/views/WorkingMain.vue
+++ b/src/modules/09_leave/views/WorkingMain.vue
@@ -66,7 +66,7 @@ function fecthWorkList() {
       status: "1",
     },
   ];
-  fecthList(listData);
+  fecthList(listData); // ส่งข้อมูลไปยัง stores
 }
 </script>
 <template>