เพิ่ม filter ประเภทคำสั่งหน้ารายการคำสั่ง

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,
 };

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

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