From c1fce2e3c535989d70d47b30877c20967cbdff16 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 24 Nov 2023 09:48:30 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20code=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2=E0=B8=9B=E0=B8=8F?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Work/DialogDetail.vue        | 14 +++---
 .../09_leave/components/1_Work/Tab1.vue       | 21 +++++---
 .../09_leave/components/1_Work/Tab2.vue       |  8 ++-
 .../09_leave/components/1_Work/TableList.vue  | 34 +++++++------
 .../09_leave/components/1_Work/ToolBar.vue    | 50 +++++++++++++------
 .../components/1_Work/ToolBarDate.vue         | 24 +++++----
 src/modules/09_leave/stores/WorkStore.ts      |  6 +--
 7 files changed, 96 insertions(+), 61 deletions(-)

diff --git a/src/modules/09_leave/components/1_Work/DialogDetail.vue b/src/modules/09_leave/components/1_Work/DialogDetail.vue
index 35edb002f..7d26b171f 100644
--- a/src/modules/09_leave/components/1_Work/DialogDetail.vue
+++ b/src/modules/09_leave/components/1_Work/DialogDetail.vue
@@ -48,13 +48,6 @@ const formData = reactive<FormDetail>({
   fullName: "",
   checkOutDescription: "",
 });
-watch(props, () => {
-  if (props.modal) {
-    if (props.detail) {
-      fetchDetailByid(props.detail.id);
-    }
-  }
-});
 
 /**
  * function เรียกรายการลงเวลาตาม
@@ -105,6 +98,13 @@ async function fetchDetailByid(id: string) {
 function colsePopup() {
   props.colse ? props.colse() : false;
 }
+
+watch(
+  () => props.modal,
+  () => {
+    props.modal === true && props.detail && fetchDetailByid(props.detail.id);
+  }
+);
 </script>
 
 <template>
diff --git a/src/modules/09_leave/components/1_Work/Tab1.vue b/src/modules/09_leave/components/1_Work/Tab1.vue
index bed1e3c3e..2339d2e13 100644
--- a/src/modules/09_leave/components/1_Work/Tab1.vue
+++ b/src/modules/09_leave/components/1_Work/Tab1.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -10,7 +10,6 @@ import type {
   DataResTime,
   TableRowsTime,
 } from "@/modules/09_leave/interface/response/work";
-import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 
 /** importComponents */
 import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
@@ -26,13 +25,14 @@ const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
 
 const $q = useQuasar(); //ใช้ noti quasar
 
+/** ตัวแปร querySting*/
 const keyword = ref<string>("");
 const page = ref<number>(1);
-const rowsPerPage = ref<number>(3);
+const rowsPerPage = ref<number>(10);
 const maxPage = ref<number>(1);
-const filetStatus = ref<string>("LATE");
+const filetStatus = ref<string>("ALL");
 
-/** ข้อมูลหัวตาราง*/
+/** ข้อมูลตาราง*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -119,6 +119,7 @@ const visibleColumns = ref<string[]>([
 ]);
 const rows = ref<TableRowsTime[]>([]);
 
+/** function เรียกข้อมูล รายการลงเวลาที่ประมวลผลแล้ว*/
 async function fetchListTimeRecord() {
   const date = new Date(workStore.selectDate as string | Date);
   const querySting = {
@@ -168,6 +169,13 @@ async function fetchListTimeRecord() {
     });
 }
 
+/**
+ * function updatePaging และเรียกข้อมูลอีกรอบ
+ * @param params pagin
+ * @param currentPage page
+ * @param key คำค้นหา
+ * @param status สถานะ
+ */
 async function updatePaging(
   params: any,
   currentPage: number,
@@ -183,13 +191,10 @@ async function updatePaging(
 
 /** Hook*/
 onMounted(async () => {
-  console.log("TAB1");
   workStore.columns = columns.value;
   workStore.visibleColumns = visibleColumns.value;
   await fetchListTimeRecord();
 });
-
-onUnmounted(() => {});
 </script>
 <template>
   <ToolBar :filetStatus="filetStatus" @update:pagination="updatePaging" />
diff --git a/src/modules/09_leave/components/1_Work/Tab2.vue b/src/modules/09_leave/components/1_Work/Tab2.vue
index 2052ef9b8..6592f8278 100644
--- a/src/modules/09_leave/components/1_Work/Tab2.vue
+++ b/src/modules/09_leave/components/1_Work/Tab2.vue
@@ -5,7 +5,6 @@ import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-/** import Type */
 import type {
   DataResLog,
   TableRows,
@@ -23,7 +22,7 @@ const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
 const { date2Thai, dateToISO, showLoader, hideLoader } = mixin;
 
-/** ข้อมูลหัวตาราง*/
+/** ข้อมูลตาราง*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -88,16 +87,15 @@ const visibleColumns = ref<string[]>([
   "checkOutTime",
   "checkOutLocation",
 ]);
-
 const rows = ref<TableRows[]>([]);
 
-/** QueryString*/
+/** ตัวแปร QueryString*/
 const keyword = ref<string>("");
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(2);
 const maxPage = ref<number>(1);
 
-/** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
+/** function เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
 async function fetchListLogRecord() {
   showLoader();
   const date = new Date(workStore.selectDate as string | Date);
diff --git a/src/modules/09_leave/components/1_Work/TableList.vue b/src/modules/09_leave/components/1_Work/TableList.vue
index be14801bc..d539d4367 100644
--- a/src/modules/09_leave/components/1_Work/TableList.vue
+++ b/src/modules/09_leave/components/1_Work/TableList.vue
@@ -37,18 +37,29 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["update:pagination"]);
-const updateProp = (newPagination: any, page: number) => {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, page);
-};
-
-/** Hook */
-onMounted(() => {});
 
 /** ข้อมูล popup */
 const modal = ref<boolean>(false);
 const dataDetail = ref<any>([]);
 
+/** pagination */
+const currentPage = ref<number>(1);
+const pagination = ref({
+  descending: false,
+  page: Number(props.page),
+  rowsPerPage: props.rowsPerPage,
+});
+
+/**
+ * function อัปเดท props
+ * @param newPagination paging
+ * @param page หน้าปัจุบัน
+ */
+function updateProp(newPagination: any, page: number) {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, page);
+}
+
 /**
  * Function openPopup และแสดงรายละเอียด
  * @param data ข้อมูลรายละเอียด
@@ -63,14 +74,7 @@ function colseDeyail() {
   modal.value = false;
 }
 
-/** pagination */
-const pagination = ref({
-  descending: false,
-  page: Number(props.page),
-  rowsPerPage: props.rowsPerPage,
-});
-
-const currentPage = ref<number>(1);
+/** function Callblck ทำงานเมื่อ pagination มีการเปลี่ยนแปลง */
 watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
   updateProp(pagination.value, currentPage.value);
 });
diff --git a/src/modules/09_leave/components/1_Work/ToolBar.vue b/src/modules/09_leave/components/1_Work/ToolBar.vue
index 96ebec7ba..23412af3a 100644
--- a/src/modules/09_leave/components/1_Work/ToolBar.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBar.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+/** importType*/
+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
+
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
@@ -9,6 +12,7 @@ const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
+/** props จาก Tab 1*/
 const props = defineProps({
   filetStatus: {
     type: String,
@@ -17,32 +21,49 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["update:pagination"]);
-const updateProp = (newPagination: any, keyword: string, status: string) => {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, 1, keyword, status);
-};
 
-const option = ref<any[]>([
+/** ตัแปร filter**/
+const filetStatus = ref<string>(
+  props.filetStatus?.toString() || "default-value"
+);
+const keyword = ref<string>("");
+const optionMain = ref<DataOption[]>([
   { id: "ALL", name: "ทั้งหมด" },
   { id: "NORMAL", name: "ปกติ" },
   { id: "LATE", name: "สาย" },
   { id: "ABSENT", name: "ขาดราชการ" },
 ]);
+const option = ref<DataOption[]>(optionMain.value);
 
-// const filetStatus = ref<string>(
-//   props.filetStatus?.toString() || "default-value"
-// );
-
-// const filetStatus = ref<string>(props.filetStatus.toString());
-const filetStatus = ref<string>(
-  props.filetStatus?.toString() || "default-value"
-);
-const keyword = ref<string>("");
+/**
+ * function updateProps
+ * @param newPagination paging
+ * @param keyword คำค้น
+ * @param status สถานะ
+ */
+function updateProp(newPagination: any, keyword: string, status: string) {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, 1, keyword, status);
+}
 
+/** function ค้นหาข้อมูลแล้วไปอัปเดท props*/
 function filterFn() {
   updateProp([], keyword.value, filetStatus.value);
 }
 
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    option.value = optionMain.value.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
   const today = new Date();
@@ -104,6 +125,7 @@ function calculateMaxDate() {
         v-model="filetStatus"
         :options="option"
         @update:model-value="filterFn"
+        @filter="filterOptionFn"
       >
         <template v-slot:no-option>
           <q-item>
diff --git a/src/modules/09_leave/components/1_Work/ToolBarDate.vue b/src/modules/09_leave/components/1_Work/ToolBarDate.vue
index 318a7b48d..67b62fc02 100644
--- a/src/modules/09_leave/components/1_Work/ToolBarDate.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBarDate.vue
@@ -9,14 +9,23 @@ const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
-/** คำค้นหา*/
-const keyword = ref<string>("");
-
 const emit = defineEmits(["update:pagination"]);
-const updateProp = (newPagination: any, keyword: string) => {
+
+/** ตัวแปร filter*/
+const keyword = ref<string>("");
+const pagination = ref({
+  page: 1,
+});
+
+/**
+ * function updateProps
+ * @param newPagination paging
+ * @param keyword คำค้นหา
+ */
+function updateProp(newPagination: any, keyword: string) {
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
   emit("update:pagination", newPagination, 1, keyword);
-};
+}
 
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
@@ -25,10 +34,7 @@ function calculateMaxDate() {
   return today;
 }
 
-/** pagination */
-const pagination = ref({
-  page: 1,
-});
+/** function ค้นหาข้อมูล แล้ว อัปเดท Props*/
 function filterFn() {
   updateProp(pagination.value, keyword.value);
 }
diff --git a/src/modules/09_leave/stores/WorkStore.ts b/src/modules/09_leave/stores/WorkStore.ts
index 07cead076..aacbcdac0 100644
--- a/src/modules/09_leave/stores/WorkStore.ts
+++ b/src/modules/09_leave/stores/WorkStore.ts
@@ -33,11 +33,11 @@ export const useWorklistDataStore = defineStore("work", () => {
    */
   function convertSatatus(val: string) {
     switch (val) {
-      case "normal":
+      case "NORMAL ":
         return "ปกติ";
-      case "late":
+      case "LATE":
         return "สาย";
-      case "absent":
+      case "ABSENT":
         return "ขาดราชการ";
     }
   }