From 845edd36bace1b85b70eeb264881dc80b6b92bbc Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Mar 2026 11:21:24 +0700
Subject: [PATCH] feat: Advanced Search scholarship

---
 .../scholarship/DialogAdvancedSearch.vue      |  72 +++++++++
 .../15_development/views/Scholarship.vue      | 138 ++++++++++++++++--
 2 files changed, 201 insertions(+), 9 deletions(-)
 create mode 100644 src/modules/15_development/components/scholarship/DialogAdvancedSearch.vue

diff --git a/src/modules/15_development/components/scholarship/DialogAdvancedSearch.vue b/src/modules/15_development/components/scholarship/DialogAdvancedSearch.vue
new file mode 100644
index 000000000..d5870a08e
--- /dev/null
+++ b/src/modules/15_development/components/scholarship/DialogAdvancedSearch.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const showDialog = defineModel<boolean>("modal", { default: false });
+const formQuery = defineModel<{
+  citizenId: string;
+  guarantorCitizenId: string;
+}>("formQuery", { default: () => ({ citizenId: "", guarantorCitizenId: "" }) });
+
+const props = defineProps({
+  onSearchData: Function,
+});
+
+function handleSearch() {
+  props?.onSearchData?.();
+  handleCloseDialog();
+}
+
+function handleCloseDialog() {
+  showDialog.value = false;
+}
+</script>
+
+<template>
+  <q-dialog v-model="showDialog" persistent>
+    <q-card style="max-width: 400px">
+      <q-form @submit.prevent="handleSearch">
+        <DialogHeader tittle="ค้นหาขั้นสูง" :close="handleCloseDialog" />
+        <q-separator />
+        <q-card-section>
+          <div class="col-12 row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                v-model="formQuery.citizenId"
+                dense
+                outlined
+                label="เลขประจำตัวประชาชนข้าราชการฯ ผู้ได้รับทุน"
+                maxlength="13"
+                mask="#############"
+                hide-bottom-space
+                :rules="[(val: string) => !val || val.length >= 13 || 'กรุณากรอกเลขประจำตัวประชาชนข้าราชการฯ ผู้ได้รับทุนให้ครบ']"
+                clearable
+                @clear="formQuery.citizenId = ''"
+              />
+            </div>
+
+            <div class="col-12">
+              <q-input
+                v-model="formQuery.guarantorCitizenId"
+                dense
+                outlined
+                label="เลขประจำตัวประชาชนผู้ค้ำประกัน"
+                maxlength="13"
+                mask="#############"
+                hide-bottom-space
+                :rules="[(val: string) => !val || val.length >= 13 || 'กรุณากรอกเลขประจำตัวประชาชนผู้ค้ำประกันให้ครบ']"
+                clearable
+                @clear="formQuery.guarantorCitizenId = ''"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="ค้นหา" color="secondary" type="submit" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index ffdf765e4..dc08a04d5 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, computed } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -10,14 +10,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import { calculateFiscalYear } from "@/utils/function";
 import { usePagination } from "@/composables/usePagination";
 
+import DialogAdvancedSearch from "@/modules/15_development/components/scholarship/DialogAdvancedSearch.vue";
+
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
 import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship";
 
 /** use */
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
-const { pagination, params, onRequest } = usePagination("", fetchList);
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("startDate", fetchList);
 /** หัวตาราง */
 const rows = ref<ListSholarship[]>([]);
 const columns = ref<QTableProps["columns"]>([
@@ -88,6 +90,62 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "scholarshipType",
+    align: "left",
+    label: "ประเภททุน",
+    sortable: true,
+    field: "scholarshipType",
+    format(val) {
+      return convertScholarshipType(val);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันที่เริ่มต้น",
+    sortable: true,
+    field: "startDate",
+    format(val) {
+      return date2Thai(val);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันที่สิ้นสุด",
+    sortable: true,
+    field: "endDate",
+    format(val) {
+      return date2Thai(val);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "guarantorCitizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชนผู้ค้ำประกัน",
+    sortable: true,
+    field: "guarantorCitizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "fullNameGuarantor",
+    align: "left",
+    label: "ชื่อ–นามสกุลผู้ค้ำประกัน",
+    sortable: true,
+    field: "fullNameGuarantor",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 
   {
     name: "status",
@@ -96,7 +154,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "status",
     format(val, row) {
-      return conventStatus(val, row.type);
+      return conventStatus(val, row.scholarshipType);
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -110,10 +168,16 @@ const visibleColumns = ref<string[]>([
   "posType",
   "posLevel",
   "posExecutive",
+  "scholarshipType",
+  "startDate",
+  "endDate",
+  "guarantorCitizenId",
+  "fullNameGuarantor",
   "status",
 ]);
 
 const scholarshipTypeOp = ref<DataOption[]>([
+  { id: "ALL", name: "ทั้งหมด" },
   { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
   {
     id: "NOABROAD",
@@ -137,12 +201,24 @@ const scholarshipTypeOp = ref<DataOption[]>([
   },
 ]);
 
+const modalAdvancedSearch = ref(false);
+const badgeAdvancedSearch = ref<number>(0);
+
 const formQuery = reactive({
   year: calculateFiscalYear(new Date()), //ปีงบประมาณ
-  type: "DOMESTICE",
+  type: "ALL", //ประเภททุน
   keyword: "",
+  citizenId: "",
+  guarantorCitizenId: "",
 });
 
+// const badgeAdvancedSearch = computed(() => {
+//   let count = 0;
+//   if (formQuery.citizenId.length === 13) count++;
+//   if (formQuery.guarantorCitizenId.length === 13) count++;
+//   return count;
+// });
+
 /** ดึงข้อมูล */
 async function fetchList() {
   showLoader();
@@ -152,7 +228,9 @@ async function fetchList() {
         ...params.value,
         keyword: formQuery.keyword.trim(),
         year: formQuery.year,
-        scholarshipType: formQuery.type,
+        scholarshipType: formQuery.type === "ALL" ? undefined : formQuery.type,
+        citizenId: formQuery.citizenId.trim() || undefined,
+        guarantorCitizenId: formQuery.guarantorCitizenId.trim() || undefined,
       },
     })
     .then((res) => {
@@ -172,6 +250,7 @@ async function fetchList() {
 function fetchNewList() {
   pagination.value.page = 1;
   fetchList();
+  checkBadgeAdvancedSearch();
 }
 
 /** ย้ายไป หน้า เพิ่ม หรือ แก้ไข */
@@ -213,8 +292,24 @@ function conventStatus(val: string, type: string) {
   }
 }
 
+function convertScholarshipType(val: string) {
+  return scholarshipTypeOp.value.find((e) => e.id === val)?.name || "-";
+}
+
+function handlerAdvancedSearch() {
+  modalAdvancedSearch.value = true;
+}
+
+function checkBadgeAdvancedSearch() {
+  let count = 0;
+  if (formQuery.citizenId.length === 13) count++;
+  if (formQuery.guarantorCitizenId.length === 13) count++;
+  badgeAdvancedSearch.value = count;
+}
+
 /** ดึงข้อมูลเมื่ออยู่ในหน้า */
 onMounted(() => {
+  pagination.value.descending = true;
   fetchList();
 });
 </script>
@@ -281,10 +376,12 @@ onMounted(() => {
           label="เลือกประเภททุน"
           @update:model-value="fetchNewList"
           class="select_ellipsis"
+          :clearable="formQuery.type !== 'ALL'"
+          @clear="formQuery.type = 'ALL'"
         >
-          <q-tooltip>{{
-            scholarshipTypeOp.find((e) => e.id === formQuery.type)?.name
-          }}</q-tooltip>
+          <q-tooltip>
+            {{ scholarshipTypeOp.find((e) => e.id === formQuery.type)?.name }}
+          </q-tooltip>
         </q-select>
       </div>
 
@@ -302,6 +399,23 @@ onMounted(() => {
 
       <q-space />
       <div class="row q-gutter-sm">
+        <q-btn
+          flat
+          round
+          dense
+          icon="mdi-filter-variant"
+          color="primary"
+          @click="handlerAdvancedSearch"
+        >
+          <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
+          <q-badge
+            v-if="badgeAdvancedSearch !== 0"
+            color="red"
+            floating
+            transparent
+            >{{ badgeAdvancedSearch }}</q-badge
+          >
+        </q-btn>
         <q-input
           standout
           dense
@@ -396,6 +510,12 @@ onMounted(() => {
       </p-table>
     </div>
   </q-card>
+
+  <DialogAdvancedSearch
+    v-model:modal="modalAdvancedSearch"
+    v-model:formQuery="formQuery"
+    :onSearchData="fetchNewList"
+  />
 </template>
 
 <style scoped></style>