From 2920faf584627ba609f590e592f6c51025a7bca7 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Fri, 27 Oct 2023 09:33:31 +0700
Subject: [PATCH] =?UTF-8?q?update=20filter=20=E0=B8=A3=E0=B8=AD=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/componenst/Table.vue | 426 ++++++++++++----------
 1 file changed, 234 insertions(+), 192 deletions(-)

diff --git a/src/modules/05_leave/componenst/Table.vue b/src/modules/05_leave/componenst/Table.vue
index d74ef45..f3c19a0 100644
--- a/src/modules/05_leave/componenst/Table.vue
+++ b/src/modules/05_leave/componenst/Table.vue
@@ -1,225 +1,267 @@
 <template>
-  <div class="q-py-sm row">
-    <q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
-      <div class="items-center col-12 row q-col-gutter-sm">
-        <!-- ค้นหาข้อความใน table -->
-        <q-select
-            outlined
-            dense
-            lazy-rules
-            v-model="type"
-            :rules="[(val) => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
-            :label="`${'ประเภทใบลา'}`"
-            emit-value
-            map-options
-            option-label="name"
-            :options="typeOptions"
-            option-value="id"
-            hide-bottom-space
-            style="min-width: 150px;"
-            class="col-xs-12 col-sm-auto"
-          />
-          <q-select
-            outlined
-            dense
-            lazy-rules
-            v-model="status"
-            :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
-            :label="`${'สถานะ'}`"
-            emit-value
-            map-options
-            option-label="name"
-            :options="statusOptions"
-            option-value="id"
-            hide-bottom-space
-            style="min-width: 150px;"
-            class="col-xs-12 col-sm-auto"
-          />
-        <q-space/>
-        <q-input
-          standout
-          dense
-          :model-value="inputfilter"
-          ref="filterRef"
-          @update:model-value="updateInput"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          class="gt-xs"
-          style="max-width: 150px"
-        >
-          <template v-slot:append>
-            <q-icon v-if="inputfilter == ''" name="search" />
-            <q-icon
-              v-if="inputfilter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
-          </template>
-        </q-input>
-        <!-- แสดงคอลัมน์ใน table -->
-        <q-select
-          :model-value="inputvisible"
-          @update:model-value="updateVisible"
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="attrs.columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 150px"
-          class="gt-xs"
-        >
-          <template> </template>
-        </q-select>
-      </div>
-    </q-card>
-  </div>
-  <div>
-    <q-table
-      ref="table"
-      flat
-      bordered
-      class="custom-table2"
-      v-bind="attrs"
-      virtual-scroll
-      :virtual-scroll-sticky-size-start="48"
-      dense
-      :pagination-label="paginationLabel"
-      :pagination="initialPagination"
-      :rows-per-page-options="[0]"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium" v-html="col.label" />
-          </q-th>
-         
-        </q-tr>
-      </template>
-      <template #body="props">
-        <slot v-bind="props" name="columns"></slot>
-      </template>
-    </q-table>
-  </div>
+	<div class="q-py-sm row">
+		<q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
+			<div class="items-center col-12 row q-col-gutter-sm">
+				<!-- ค้นหาข้อความใน table -->
+				<q-select
+					outlined
+					dense
+					lazy-rules
+					v-model="type"
+					:rules="[val => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
+					:label="`${'ประเภทใบลา'}`"
+					emit-value
+					map-options
+					option-label="name"
+					:options="LeaveData.typeOptions"
+					option-value="id"
+					hide-bottom-space
+					style="min-width: 150px"
+					class="col-xs-12 col-sm-auto"
+					@update:model-value="searchFilterTable"
+					@filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'typeOptions'
+                    ) "
+				/>
+				<q-select
+					outlined
+					dense
+					lazy-rules
+					v-model="status"
+					:rules="[val => !!val || `${'กรุณาเลือกสถานะ'}`]"
+					:label="`${'สถานะ'}`"
+					emit-value
+					map-options
+					option-label="name"
+					:options="LeaveData.statusOptions"
+					option-value="id"
+					hide-bottom-space
+					style="min-width: 150px"
+					class="col-xs-12 col-sm-auto"
+					@update:model-value="searchFilterTable"
+					@filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
+                    ) "
+				/>
+				<q-space />
+				<q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined debounce="300" placeholder="ค้นหา" class="gt-xs" style="max-width: 150px">
+					<template v-slot:append>
+						<q-icon v-if="inputfilter == ''" name="search" />
+						<q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+					</template>
+				</q-input>
+				<!-- แสดงคอลัมน์ใน table -->
+				<q-select
+					:model-value="inputvisible"
+					@update:model-value="updateVisible"
+					:display-value="$q.lang.table.columns"
+					multiple
+					outlined
+					dense
+					:options="attrs.columns"
+					options-dense
+					option-value="name"
+					map-options
+					emit-value
+					style="min-width: 150px"
+					class="gt-xs"
+				>
+					<template> </template>
+				</q-select>
+			</div>
+		</q-card>
+	</div>
+	<div>
+		<q-table
+			ref="table"
+			flat
+			bordered
+			class="custom-table2"
+			v-bind="attrs"
+			virtual-scroll
+			:virtual-scroll-sticky-size-start="48"
+			dense
+			:pagination-label="paginationLabel"
+			:pagination="initialPagination"
+			:rows-per-page-options="[0]"
+		>
+			<template v-slot:header="props">
+				<q-tr :props="props">
+					<q-th v-for="col in props.cols" :key="col.name" :props="props">
+						<span class="text-weight-medium" v-html="col.label" />
+					</q-th>
+				</q-tr>
+			</template>
+			<template #body="props">
+				<slot v-bind="props" name="columns"></slot>
+			</template>
+		</q-table>
+	</div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
-const attrs = ref<any>(useAttrs());
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
+import { ref, useAttrs } from "vue"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import type { an } from "@fullcalendar/core/internal-common"
 
-const type = ref('ทั้งหมด');
-const typeOptions = ref([
-  'ทั้งหมด',
-  'ลาป่วย',
-  'ลากิจส่วนตัว',
-  'ลาคลอดบุตร',
-  'ลาช่วยเหลือภริยาที่คลอดบุตร',
-  'ลาพักผ่อน',
-  'ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ',
-  'ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล',
-  'ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน',
-  'ลาไปปฏิบัติงานในองค์การระหว่างประเทศ',
-  'ลาติดตามคู่สมรส',
-  'ลาฟื้นฟูสมรรถภาพด้านอาชีพ'
-])
-const status = ref('ทั้งหมด');
-const statusOptions = ref([
-  'อนุมัติ',
-  'ไม่อนุมัติ',
-  'อยู่ระหว่างดำเนินการ',
-  'ใหม่',
-])
+const DataStore = useLeaveStore()
+const LeaveData = useLeaveStore()
+const attrs = ref<any>(useAttrs())
+const table = ref<any>(null)
+const filterRef = ref<any>(null)
+const rows = ref<any[]>([])
+const type = ref("ทั้งหมด")
+const status = ref("ทั้งหมด")
 
 const initialPagination = ref({
-  rowsPerPage: 0,
-});
-const yearly = ref<number>(new Date().getFullYear());
+	rowsPerPage: 0,
+})
+const yearly = ref<number>(new Date().getFullYear())
+let OriginalData = ref<any[]>([])
+let UpdataData = ref<any[]>([])
+
+const OriginalDataFetch = async () => {
+	await DataStore.DataMain(rows.value)
+	OriginalData.value = await DataStore.DataMainOrig
+	UpdataData.value = OriginalData.value
+}
 
 const props = defineProps({
-  count: Number,
-  pass: Number,
-  notpass: Number,
+	count: Number,
+	pass: Number,
+	notpass: Number,
 
-  inputfilter: String,
-  name: String,
-  icon: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  grid: Boolean,
+	inputfilter: String,
+	name: String,
+	icon: String,
+	inputvisible: Array,
+	editvisible: Boolean,
+	grid: Boolean,
 
-  inputShow: Boolean,
-});
+	inputShow: Boolean,
+})
 
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
+const emit = defineEmits(["update:inputfilter", "update:inputvisible", "update:editvisible"])
 const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
+	emit("update:inputfilter", value)
+}
 const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
-};
+	emit("update:inputvisible", value)
+}
 
 const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
-};
+	return start + "-" + end + " ใน " + total
+}
 
 const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-};
+	// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+	emit("update:inputfilter", "")
+	filterRef.value.focus()
+}
 
+const searchFilterTable = async () => {
+	// ส่งไป filter รายการข้อมูลตามเงื่อนไข
+	await DataStore.DataUpdate(typeOptions.value, statusOptions.value)
+	UpdataData.value = DataStore.DataMainUpdate
+}
+
+// รายการข้อมูลประเภท
+const typeOptions = ref<string>("")
+const typeOptionsFilter1 = ref<any>([])
+const typeOptionsOption = ref<any[]>([{ id: "", name: "ทั้งหมด" }])
+
+const TypeFilter = async () => {
+	//   await http
+	//     .get(config.API.typeOrder())
+	//     .then((res) => {
+	//       const response = res.data.result;
+	//       LeaveData.typeOptions = [{ id: "", name: "ทั้งหมด" }];
+	//       TypeOption.value.push(...response);
+	//       typeOptionsFilter1.value = [{ id: "", name: "ทั้งหมด" }];
+	//       typeOptionsFilter1.value.push(...response);
+	//     })
+	//     .catch((e) => {
+	//       messageError($q, e);
+	//     });
+}
+
+// รายการข้อมูลประเภท
+const statusOptions = ref<string>("")
+const statusOptionsFilter1 = ref<any>([])
+const statusOptionsOption = ref<any[]>([{ id: "", name: "ทั้งหมด" }])
+
+const statusOptionsFilter = async () => {
+	//   await http
+	//     .get(config.API.typeOrder())
+	//     .then((res) => {
+	//       const response = res.data.result;
+	//       LeaveData.typeOptions = [{ id: "", name: "ทั้งหมด" }];
+	//       TypeOption.value.push(...response);
+	//       typeOptionsFilter1.value = [{ id: "", name: "ทั้งหมด" }];
+	//       typeOptionsFilter1.value.push(...response);
+	//     })
+	//     .catch((e) => {
+	//       messageError($q, e);
+	//     });
+}
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+	switch (refData) {
+		case "typeOptions":
+			update(() => {
+				LeaveData.typeOptions.values = typeOptionsFilter1.value.filter((v: any) => v.name.indexOf(val) > -1)
+			})
+			break
+		case "statusOptions":
+			update(() => {
+				LeaveData.statusOptions.values = statusOptionsFilter1.value.filter((v: any) => v.name.indexOf(val) > -1)
+			})
+			break
+		default:
+			break
+	}
+}
 </script>
 <style lang="scss">
 .icon-color {
-  color: #4154b3;
+	color: #4154b3;
 }
 
 .custom-table2 {
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
+	.q-table tr:nth-child(odd) td {
+		background: white;
+	}
 
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
+	.q-table tr:nth-child(even) td {
+		background: #f8f8f8;
+	}
 
-  .q-table thead tr {
-    background: #ecebeb;
-  }
+	.q-table thead tr {
+		background: #ecebeb;
+	}
 
-  .q-table thead tr th {
-    position: sticky;
-  }
+	.q-table thead tr th {
+		position: sticky;
+	}
 
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
+	.q-table td:nth-of-type(2) {
+		z-index: 3 !important;
+	}
 
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
+	.q-table th:nth-of-type(2),
+	.q-table td:nth-of-type(2) {
+		position: sticky;
+		left: 0;
+		z-index: 1;
+	}
 
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
+	/* this will be the loading indicator */
+	.q-table thead tr:last-child th {
+		/* height of all previous header rows */
+		top: 48px;
+	}
 
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
+	.q-table thead tr:first-child th {
+		top: 0;
+	}
 }
 </style>