From f79335d5b9db623e5969204913a9ffbfe4701128 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 30 Nov 2023 14:58:32 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20API=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20=20=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=81=E0=B9=80=E0=B8=A5=E0=B8=B4=E0=B8=81=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/09_leave/api.leave.ts                 |  1 +
 .../09_leave/components/2_Leave/Tab1.vue      | 39 +++++++++---
 .../09_leave/components/2_Leave/Tab2.vue      | 31 ++++++++--
 .../09_leave/components/2_Leave/TableList.vue | 10 ++-
 .../components/2_Leave/ToolBarLeave.vue       | 61 +++++++------------
 5 files changed, 89 insertions(+), 53 deletions(-)

diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index 369549925..764503896 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -20,5 +20,6 @@ export default {
   /** รายการลา*/
   leaveType: () => `${leave}/type`,
   leaveList: () => `${leave}/admin`,
+  leaveListDelete: () => `${leave}/admin/delete`,
   leaveListById: (id: string) => `${leave}/admin/${id}`,
 };
diff --git a/src/modules/09_leave/components/2_Leave/Tab1.vue b/src/modules/09_leave/components/2_Leave/Tab1.vue
index c40561b04..82cf89ef0 100644
--- a/src/modules/09_leave/components/2_Leave/Tab1.vue
+++ b/src/modules/09_leave/components/2_Leave/Tab1.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /**importType*/
 import type {
@@ -12,19 +15,17 @@ import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
 import CalendarView from "@/modules/09_leave/components/2_Leave/Calendar.vue";
 
 /**importStroe*/
+import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
 
+const mixin = useCounterMixin();
 const leaveStore = useLeavelistDataStore();
 const APIDATA = useLeavelistDataStoreTest();
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
 const { fetchListLeave } = leaveStore;
 
-//** เรียกข้อมูลจาก API*/
-function fecthLeaveList() {
-  const data = APIDATA.data;
-  maxPage.value = Math.ceil(data.length / querySting.pageSize);
-  fetchListLeave(data); /** ส่งข้อมูลไป stores*/
-}
+const $q = useQuasar(); //ใช้ noti quasar
 
 //
 const querySting = reactive<QuerySting>({
@@ -37,13 +38,34 @@ const querySting = reactive<QuerySting>({
 });
 const maxPage = ref<number>(1);
 
+//** เรียกข้อมูลจาก API*/
+async function fecthLeaveList() {
+  // showLoader();
+  // await http
+  //   .post(config.API.leaveList(), querySting)
+  //   .then((res) => {
+  //     console.log(res);
+
+  //     maxPage.value = Math.ceil(data.length / querySting.pageSize);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+  const data = APIDATA.data;
+  maxPage.value = Math.ceil(data.length / querySting.pageSize);
+  fetchListLeave(data); /** ส่งข้อมูลไป stores*/
+}
+
 /**
  *
  * @param newPage หน้า
  * @param pageSize จำนวนต่อแถว
  * @param dateFilter ข้อมูลค้นหา
  */
-function updatePaging(
+async function updatePaging(
   newPage: number,
   pageSize: number,
   dateFilter: DateFilter
@@ -52,9 +74,10 @@ function updatePaging(
   querySting.type = dateFilter ? dateFilter.type : querySting.type;
   querySting.status = dateFilter ? dateFilter.status : querySting.status;
   querySting.page = newPage;
-  querySting.pageSize = pageSize;
+  querySting.pageSize = pageSize ? pageSize : querySting.pageSize;
   querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
   console.log(querySting);
+  await fecthLeaveList();
 }
 
 onMounted(async () => {
diff --git a/src/modules/09_leave/components/2_Leave/Tab2.vue b/src/modules/09_leave/components/2_Leave/Tab2.vue
index 0cd0fdcb7..17e7fe91b 100644
--- a/src/modules/09_leave/components/2_Leave/Tab2.vue
+++ b/src/modules/09_leave/components/2_Leave/Tab2.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /**importType*/
 import type {
@@ -11,15 +14,20 @@ import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
 import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
 
 /**importStroe*/
+import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
 
+const mixin = useCounterMixin();
 const leaveStore = useLeavelistDataStore();
 const APIDATA = useLeavelistDataStoreTest();
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
 const { fetchListLeaveReject } = leaveStore;
 
+const $q = useQuasar(); //ใช้ noti quasar
+
 const querySting = reactive<QuerySting>({
-  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  year: new Date().getFullYear(), //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
   type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
   status: "ALL", //*สถานะการของลา
   page: 1, //*หน้า
@@ -29,9 +37,23 @@ const querySting = reactive<QuerySting>({
 const maxPage = ref<number>(1);
 
 //** เรียกข้อมูลจาก API*/
-function fecthLeaveList() {
+async function fecthLeaveList() {
+  // showLoader();
+  // await http
+  //   .post(config.API.leaveListDelete(), querySting)
+  //   .then((res) => {
+  //     console.log(res);
+
+  //     maxPage.value = Math.ceil(data.length / querySting.pageSize);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
   const data = APIDATA.data;
-  maxPage.value = Math.ceil(data.length / querySting.pageSize);
+
   fetchListLeaveReject(data); /** ส่งข้อมูลไป stores*/
 }
 
@@ -41,7 +63,7 @@ function fecthLeaveList() {
  * @param pageSize จำนวนต่อแถว
  * @param dateFilter ข้อมูลค้นหา
  */
-function updatePaging(
+async function updatePaging(
   newPage: number,
   pageSize: number,
   dateFilter: DateFilter
@@ -54,6 +76,7 @@ function updatePaging(
   querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
 
   console.log(querySting);
+  await fecthLeaveList();
 }
 
 onMounted(async () => {
diff --git a/src/modules/09_leave/components/2_Leave/TableList.vue b/src/modules/09_leave/components/2_Leave/TableList.vue
index eefba63b8..ad3a1298c 100644
--- a/src/modules/09_leave/components/2_Leave/TableList.vue
+++ b/src/modules/09_leave/components/2_Leave/TableList.vue
@@ -163,8 +163,12 @@ function redirectToDetail(id: string) {
   router.push(`${routePrefix}/detail/${id}`);
 }
 
+function updatedPagination(newPageZize: any) {
+  currentPage.value = 1;
+  pagination.value.rowsPerPage = newPageZize.rowsPerPage;
+}
+
 watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  // updateProp(pagination.value, currentPage.value);
   currentPage.value &&
     pagination.value.rowsPerPage &&
     updateQuerySting(currentPage.value, pagination.value.rowsPerPage);
@@ -172,7 +176,6 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
 
 /** Hook*/
 onMounted(() => {
-  console.log(leaveStore.tabMenu);
   if (leaveStore.tabMenu === "1") {
     leaveStore.visibleColumns = visibleColumnsLeave.value;
     leaveStore.columns = columnsLeave.value;
@@ -195,7 +198,8 @@ onMounted(() => {
     dense
     class="custom-header-table"
     :visible-columns="leaveStore.visibleColumns"
-    v-model:pagination="pagination"
+    :pagination="pagination"
+    @update:pagination="updatedPagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
diff --git a/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
index 79bfa610e..63bef1b53 100644
--- a/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
@@ -47,20 +47,12 @@ function updateQuerySting(
 
 /** function ค้นหาข้อมูลใน Table*/
 async function filterListLeave() {
-  console.log("test");
-
-  // filter.status &&
-  //   filter.type &&
-  //   (await updateQuerySting(1, Number(props.rowsPerPage), filter));
+  updateQuerySting(1, 0, filter);
 }
 
 /** Option*/
-const optionType = ref<DataOption[]>([
-  {
-    id: "00000000-0000-0000-0000-000000000000",
-    name: "ทั้งหมด",
-  },
-]);
+const optionTypeMain = ref<DataOption[]>([]);
+const optionType = ref<DataOption[]>([]);
 const optionStatus = ref<DataOption[]>([
   {
     id: "ALL",
@@ -93,29 +85,37 @@ const optionStatus2 = ref<DataOption[]>([
     name: "ขอยกเลิก",
   },
   {
-    id: "PENDING ",
+    id: "APPROVE  ",
     name: "อนุมัติ",
   },
   {
-    id: "APPROVE ",
+    id: "REJECT  ",
     name: "ไม่อนุมัติ",
   },
 ]);
-const optionTypeMain = ref<DataOption[]>(optionType.value);
+
 const optionStatusMain = ref<DataOption[]>(
   leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value
 );
 
 async function fetchOption() {
-  console.log("loadOption  รอ API");
-  //   await http
-  //     .get(config.API.leaveType())
-  //     .then((res) => {
-  //       console.log(res);
-  //     })
-  //     .catch((err) => {
-  //       console.log(err);
-  //     });
+  await http
+    .get(config.API.leaveType())
+    .then((res) => {
+      const data = res.data.result;
+      optionTypeMain.value = [
+        { id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
+      ];
+      const option = data.map((e: DataOption) => ({
+        id: e.id,
+        name: e.name,
+      }));
+      optionTypeMain.value.push(...option);
+      optionType.value = optionTypeMain.value;
+    })
+    .catch((err) => {
+      console.log(err);
+    });
 }
 
 /**
@@ -141,8 +141,6 @@ function filterOption(val: string, update: any, name: string) {
 
 onMounted(async () => {
   await fetchOption();
-  // optionTypeMain.value =
-  //   leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value;
 });
 </script>
 
@@ -182,19 +180,6 @@ onMounted(async () => {
           </q-input>
         </template>
       </datepicker>
-      <!-- <q-select
-        for="selectYear"
-        emit-value
-        map-options
-        outlined
-        dense
-        v-model="filter.year"
-        :options="optionStatus"
-        option-value="id"
-        option-label="name"
-        label="ปีงบประมาณ"
-        @update:model-value="filterListLeave"
-      /> -->
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">
       <q-select