From df29a5b02aeac6a9af20645e0a9df9824940234d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 14 Nov 2024 14:40:08 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20filter=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A0?=
 =?UTF-8?q?=E0=B8=97=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../18_command/interface/request/Main.ts      |  3 +-
 src/modules/18_command/views/lists.vue        | 61 +++++++++++++++++--
 src/style/quasar-variables.sass               |  6 ++
 3 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/src/modules/18_command/interface/request/Main.ts b/src/modules/18_command/interface/request/Main.ts
index 0848446eb..00f3f021f 100644
--- a/src/modules/18_command/interface/request/Main.ts
+++ b/src/modules/18_command/interface/request/Main.ts
@@ -3,6 +3,7 @@ interface FormQuery {
   pageSize: number;
   year: number;
   keyword: string;
+  commandTypeId: string;
 }
 
 interface FormCommand {
@@ -69,5 +70,5 @@ export type {
   FormDataDetail,
   ListCommandSalaryType,
   PersonInfo,
-  FormCommandList
+  FormCommandList,
 };
diff --git a/src/modules/18_command/views/lists.vue b/src/modules/18_command/views/lists.vue
index c48fef0cf..b708e4a10 100644
--- a/src/modules/18_command/views/lists.vue
+++ b/src/modules/18_command/views/lists.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import { checkPermission } from "@/utils/permissions";
@@ -8,7 +8,10 @@ import { useCommandListStore } from "@/modules/18_command/store/ListStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { ItemTabs } from "@/modules/18_command/interface/index/Main";
+import type {
+  ItemTabs,
+  DataOption,
+} from "@/modules/18_command/interface/index/Main";
 import type { FormQuery } from "@/modules/18_command/interface/request/Main";
 import type { ResListCommand } from "@/modules/18_command/interface/response/Main";
 
@@ -33,7 +36,11 @@ const queryParams = reactive<FormQuery>({
   pageSize: 10, //จำนวนต่อหน้า
   year: new Date().getFullYear(), //ปีงบประมาณ
   keyword: "", //คำค้นหา
+  commandTypeId: "",
 });
+const commandOpMain = ref<DataOption[]>([]);
+const commandOp = ref<DataOption[]>([]);
+
 const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง
 
 /**
@@ -58,6 +65,26 @@ async function fetchListCommand() {
       hideLoader();
     });
 }
+
+/**
+ * ฟังก์ชันค้นหาข้อมูลรายการประเภทคำสั่ง
+ * @param val คำที่ค้องการค้นหา
+ * @param update function จาก quasar
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    queryParams.commandTypeId = val ? "" : queryParams.commandTypeId;
+    commandOp.value = commandOpMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+onMounted(async () => {
+  const data = await store.fetchCommandType();
+  commandOpMain.value = data ? data : [];
+  commandOp.value = commandOpMain.value;
+});
 </script>
 
 <template>
@@ -65,7 +92,7 @@ async function fetchListCommand() {
 
   <!-- toolbar -->
   <q-card>
-    <q-toolbar class="q-pa-sm">
+    <q-toolbar class="q-pa-sm q-col-gutter-sm">
       <datepicker
         menu-class-name="modalfix"
         v-model="queryParams.year"
@@ -73,7 +100,7 @@ async function fetchListCommand() {
         autoApply
         year-picker
         :enableTimePicker="false"
-        @update:model-value="fetchListCommand"
+        @update:model-value="(queryParams.page = 1), fetchListCommand()"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -112,6 +139,32 @@ async function fetchListCommand() {
       />
 
       <q-space />
+      <q-select
+        clearable
+        @clear="queryParams.page = 1"
+        class="select_ellipsis3"
+        v-model="queryParams.commandTypeId"
+        :label="`${'ประเภทคำสั่ง'}`"
+        dense
+        emit-value
+        map-options
+        option-label="name"
+        :options="commandOp"
+        option-value="id"
+        lazy-rules
+        use-input
+        @update:model-value="(queryParams.page = 1), fetchListCommand()"
+        outlined
+        style="width: 690px"
+        @filter="(inputValue:string,
+          doneFn:Function) => filterSelector(inputValue, doneFn) "
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
       <q-input
         dense
         outlined
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index dc8a8c478..d49781c92 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -180,3 +180,9 @@ h3.resigtry-tab-title
     overflow: hidden
     text-overflow: ellipsis
     width: 300px
+
+.select_ellipsis3 .q-field__native > span
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    width: 550px