From 11e11933cc7699567aa3253b85ee02d99dbe64b7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 1 Dec 2023 17:44:35 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20=20filte?=
 =?UTF-8?q?r=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=96=E0=B8=B4=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/3_Report/DetailReport.vue      | 198 ++++++++++++------
 src/modules/09_leave/views/ReportMain.vue     |  21 +-
 2 files changed, 150 insertions(+), 69 deletions(-)

diff --git a/src/modules/09_leave/components/3_Report/DetailReport.vue b/src/modules/09_leave/components/3_Report/DetailReport.vue
index 6a80c059c..7086336b6 100644
--- a/src/modules/09_leave/components/3_Report/DetailReport.vue
+++ b/src/modules/09_leave/components/3_Report/DetailReport.vue
@@ -17,12 +17,8 @@ const { messageError, showLoader, hideLoader, date2Thai, monthYear2Thai } =
 const typeReport = route.params.type.toString();
 const titleReport = computed(() => {
   const title =
-    typeReport === "daily"
-      ? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายวัน"
-      : typeReport === "monthly"
-      ? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายเดือน"
-      : typeReport === "yearly"
-      ? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายปี"
+    typeReport === "time-records"
+      ? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงาน"
       : typeReport === "leaveday"
       ? "บัญชีแสดงวันลา"
       : "";
@@ -37,25 +33,56 @@ const dateMonth = ref<DataDateMonthObject>({
 const year = ref<number>(new Date().getFullYear());
 const dateStart = ref<Date>(new Date());
 const dateEnd = ref<Date>(new Date());
-const employeeClass = ref<string>("");
+const employeeClass = ref<string>("employee");
+const yearType = ref<string>("fullyear");
+const filterType = ref<string>("daily");
 
 function monthYearThai(val: DataDateMonthObject) {
   if (val == null) return "";
   else return monthYear2Thai(val.month, val.year);
 }
 
+const filterTypeMain = ref<DataOption[]>([
+  { id: "daily", name: "รายวัน" },
+  { id: "monthly", name: "รายเดือน" },
+  { id: "yearly", name: "รายปี" },
+]);
 const employeeClassMain = ref<DataOption[]>([
   { id: "employee", name: "ข้าราชการ" },
   { id: "perm", name: "ลูกจ้างประจำ" },
 ]);
+const yearTypeOptionMain = ref<DataOption[]>([
+  { id: "fullyear", name: "รายปี" },
+  { id: "halfyear", name: "ครึ่งปี" },
+]);
 const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
+const yearTypeOptionOption = ref<DataOption[]>(yearTypeOptionMain.value);
+const filterTypeOption = ref<DataOption[]>(filterTypeMain.value);
 
-function filterFnOptions(val: any, update: Function) {
-  update(() => {
-    employeeClassOption.value = employeeClassMain.value.filter(
-      (v: DataOption) => v.name.indexOf(val) > -1
-    );
-  });
+function filterFnOptions(val: any, update: Function, type: string) {
+  switch (type) {
+    case "filterType":
+      update(() => {
+        filterTypeOption.value = filterTypeMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClass":
+      update(() => {
+        employeeClassOption.value = employeeClassMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "yearType":
+      update(() => {
+        yearTypeOptionOption.value = yearTypeOptionMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+  }
 }
 
 const splitterModel = ref(14);
@@ -99,7 +126,87 @@ function backHistory() {
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="q-pa-md q-gutter-y-sm">
       <q-toolbar style="padding: 0">
-        <div class="q-pr-xs" v-if="typeReport === 'daily'">
+        <div class="q-pr-xs" v-if="typeReport === 'time-records'">
+          <q-select
+            class="bg-white"
+            outlined
+            dense
+            v-model="filterType"
+            :options="filterTypeOption"
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            use-input
+            style="width: 230px"
+            @filter="(inputValue: any,
+      doneFn: Function) => filterFnOptions(inputValue, doneFn,'filterType')"
+            ><template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
+
+        <div class="q-pr-xs" v-if="typeReport === 'leaveday'">
+          <q-select
+            outlined
+            dense
+            v-model="employeeClass"
+            :options="employeeClassOption"
+            label="สถานภาพ"
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            use-input
+            style="width: 230px"
+            @filter="(inputValue: any,
+      doneFn: Function) => filterFnOptions(inputValue, doneFn,'employeeClass')"
+            ><template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
+        <div class="q-pr-xs" v-if="typeReport === 'leaveday'">
+          <q-select
+            outlined
+            dense
+            v-model="yearType"
+            :options="yearTypeOptionOption"
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            use-input
+            style="width: 230px"
+            @filter="(inputValue: any,
+      doneFn: Function) => filterFnOptions(inputValue, doneFn,'yearType')"
+            ><template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
+
+        <q-space />
+        <div class="q-py-xs">
+          <q-btn unelevated color="primary" @click="modalFull = true">
+            <q-icon left size="2em" name="mdi-eye-outline" />
+            <div>แสดงรายงาน</div>
+          </q-btn>
+        </div>
+      </q-toolbar>
+      <q-toolbar
+        v-if="typeReport === 'time-records'"
+        class="q-pa-sm bg-grey-2"
+        style="border-radius: 5px"
+      >
+        <div class="q-pr-xs" v-if="filterType === 'daily'">
           <datepicker
             menu-class-name="modalfix"
             v-model="date"
@@ -114,7 +221,7 @@ function backHistory() {
             }}</template>
             <template #trigger>
               <q-input
-                class="full-width inputgreen cursor-pointer"
+                class="bg-white"
                 outlined
                 dense
                 lazy-rules
@@ -130,7 +237,7 @@ function backHistory() {
             </template>
           </datepicker>
         </div>
-        <div class="q-pr-xs" v-if="typeReport === 'monthly'">
+        <div class="q-pr-xs" v-if="filterType === 'monthly'">
           <datepicker
             v-model="dateMonth"
             :locale="'th'"
@@ -144,12 +251,12 @@ function backHistory() {
             }}</template>
             <template #trigger>
               <q-input
-                class="full-width inputgreen cursor-pointer"
+                class="bg-white"
                 outlined
                 dense
                 lazy-rules
                 borderless
-                :label="`${'เดือนที่'}`"
+                :label="`${'เดือน'}`"
                 :model-value="monthYearThai(dateMonth)"
               >
                 <template v-slot:prepend>
@@ -163,7 +270,7 @@ function backHistory() {
             </template>
           </datepicker>
         </div>
-        <div class="q-pr-xs" v-if="typeReport === 'yearly'">
+        <div class="q-pr-xs" v-if="filterType === 'yearly'">
           <datepicker
             menu-class-name="modalfix"
             v-model="year"
@@ -179,6 +286,7 @@ function backHistory() {
             }}</template>
             <template #trigger>
               <q-input
+                class="bg-white"
                 dense
                 lazy-rules
                 outlined
@@ -197,8 +305,14 @@ function backHistory() {
             </template>
           </datepicker>
         </div>
+      </q-toolbar>
 
-        <div class="q-pl-xs" v-if="typeReport === 'leaveday'">
+      <q-toolbar
+        v-if="typeReport === 'leaveday'"
+        class="q-pa-sm bg-grey-2"
+        style="border-radius: 5px"
+      >
+        <div class="q-pr-xs">
           <datepicker
             menu-class-name="modalfix"
             v-model="dateStart"
@@ -213,7 +327,7 @@ function backHistory() {
             }}</template>
             <template #trigger>
               <q-input
-                class="full-width inputgreen cursor-pointer"
+                class="bg-white"
                 outlined
                 dense
                 lazy-rules
@@ -229,7 +343,7 @@ function backHistory() {
             </template>
           </datepicker>
         </div>
-        <div class="q-pl-xs" v-if="typeReport === 'leaveday'">
+        <div class="q-pr-xs">
           <datepicker
             menu-class-name="modalfix"
             v-model="dateEnd"
@@ -244,7 +358,7 @@ function backHistory() {
             }}</template>
             <template #trigger>
               <q-input
-                class="full-width inputgreen cursor-pointer"
+                class="bg-white"
                 outlined
                 dense
                 lazy-rules
@@ -260,45 +374,7 @@ function backHistory() {
             </template>
           </datepicker>
         </div>
-
-        <q-space />
-        <div class="q-py-xs">
-          <q-btn unelevated color="primary" @click="modalFull = true">
-            <q-icon left size="2em" name="mdi-eye-outline" />
-            <div>แสดงรายงาน</div>
-          </q-btn>
-        </div>
       </q-toolbar>
-
-      <q-toolbar
-        v-if="typeReport === 'leaveday'"
-        class="q-pa-sm bg-grey-2"
-        style="border-radius: 5px"
-      >
-        <div class="q-pr-xs">
-          <q-select
-            class="bg-white"
-            outlined
-            dense
-            v-model="employeeClass"
-            :options="employeeClassOption"
-            label="สถานภาพ"
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            use-input
-            style="width: 230px"
-            @filter="(inputValue: any,
-      doneFn: Function) => filterFnOptions(inputValue, doneFn)"
-            ><template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </div></q-toolbar
-      >
       <q-splitter
         v-model="splitterModel"
         horizontal
diff --git a/src/modules/09_leave/views/ReportMain.vue b/src/modules/09_leave/views/ReportMain.vue
index 4892317d7..76848de66 100644
--- a/src/modules/09_leave/views/ReportMain.vue
+++ b/src/modules/09_leave/views/ReportMain.vue
@@ -3,7 +3,7 @@ import { useRouter } from "vue-router";
 
 const router = useRouter();
 
-function nextPage(type: string,) {
+function nextPage(type: string) {
   router.push(`/statistics-report/${type}`);
 }
 </script>
@@ -12,16 +12,16 @@ function nextPage(type: string,) {
   <div>
     <q-card flat bordered class="col-12 q-mt-sm">
       <div class="q-pa-md">
-        <q-item clickable dense class="hover-green" @click="nextPage('daily')">
+        <q-item clickable dense class="hover-green" @click="nextPage('time-records')">
           <q-item-section avatar>
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายวัน
+            รายงานสรุปบันทึกการลงเวลาปฏิบัติงาน
           </q-item-section>
         </q-item>
 
-        <q-item
+        <!-- <q-item
           clickable
           dense
           class="hover-green"
@@ -33,18 +33,23 @@ function nextPage(type: string,) {
           <q-item-section class="text-dark">
             รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายเดือน
           </q-item-section>
-        </q-item>
+        </q-item> -->
 
-        <q-item clickable dense class="hover-green" @click="nextPage('yearly')">
+        <!-- <q-item clickable dense class="hover-green" @click="nextPage('yearly')">
           <q-item-section avatar>
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
             รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายปี
           </q-item-section>
-        </q-item>
+        </q-item> -->
 
-        <q-item clickable dense class="hover-green" @click="nextPage('leaveday')">
+        <q-item
+          clickable
+          dense
+          class="hover-green"
+          @click="nextPage('leaveday')"
+        >
           <q-item-section avatar>
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>