feat: Advanced Search scholarship

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>