From 70f6b07da1895f3071446b9017c33494d212c7d7 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Wed, 27 Mar 2024 11:44:11 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=84=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=A7=20=E0=B9=80=E0=B8=8A=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=A1=E0=B8=84=E0=B8=B3=E0=B8=99=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=8A=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/PersonalInformation/04_Family.vue  | 81 +++++++++++++++++--
 1 file changed, 73 insertions(+), 8 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
index 5996edee9..797cdfcfe 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -7,7 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
 import DialogHistory from "@/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue";
-
+import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
 const mixin = useCounterMixin();
 const $q = useQuasar();
 const {
@@ -20,6 +20,7 @@ const {
   date2Thai,
 } = mixin;
 
+const store = useProfileDataStore();
 const route = useRoute();
 const id = ref<string>(route.params.id.toString());
 const dialog = ref<boolean>(false);
@@ -64,7 +65,7 @@ const spouseData = reactive({
 
 const rows = ref<any>([]);
 const historyRows = ref<any>([]);
-
+const prefixFilter = ref([]);
 const childrenData: any = reactive({
   childrens: [],
 });
@@ -233,8 +234,32 @@ function deleteChildren(items: any) {
 }
 
 onMounted(async () => {
+  if (
+    store.Ops.prefixOps.length === 0 ||
+    store.Ops.genderOps.length === 0 ||
+    store.Ops.bloodOps.length === 0 ||
+    store.Ops.statusOps.length === 0 ||
+    store.Ops.religionOps.length === 0
+  ) {
+    await fetchPerson();
+  }
+  prefixFilter.value = store.Ops.prefixOps;
   await fetchData(id.value);
 });
+
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        store.Ops.prefixOps = prefixFilter.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
 </script>
 
 <template>
@@ -504,12 +529,22 @@ onMounted(async () => {
                   outlined
                   bg-color="white"
                   lazy-rules
+                  hidden-space
                   dense
-                  v-model="fatherData.prefix"
-                  :options="fatherData.optionPrefix"
                   :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                   label="คำนำหน้าชื่อ"
-                  hidden-space
+                  v-model="fatherData.prefix"
+                  use-input
+                  clearable
+                  input-debounce="0"
+                  emit-value
+                  map-options
+                  :options="store.Ops.prefixOps"
+                  option-label="name"
+                  option-value="name"
+                  @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
                 />
               </div>
               <div class="col">
@@ -625,10 +660,20 @@ onMounted(async () => {
                   lazy-rules
                   dense
                   v-model="motherData.prefix"
-                  :options="motherData.optionPrefix"
                   :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                   label="คำนำหน้าชื่อ"
                   hidden-space
+                  use-input
+                  clearable
+                  input-debounce="0"
+                  emit-value
+                  map-options
+                  :options="store.Ops.prefixOps"
+                  option-label="name"
+                  option-value="name"
+                  @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
                 />
               </div>
               <div class="col">
@@ -744,10 +789,20 @@ onMounted(async () => {
                   lazy-rules
                   dense
                   v-model="spouseData.prefix"
-                  :options="spouseData.optionPrefix"
                   :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                   label="คำนำหน้าชื่อ"
                   hidden-space
+                  use-input
+                  clearable
+                  input-debounce="0"
+                  emit-value
+                  map-options
+                  :options="store.Ops.prefixOps"
+                  option-label="name"
+                  option-value="name"
+                  @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
                 />
               </div>
               <div class="col">
@@ -857,8 +912,18 @@ onMounted(async () => {
                       bg-color="white"
                       v-model="items.childrenPrefix"
                       :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-                      :options="childrenOptionPrefix"
                       label="คำนำหน้าชื่อ"
+                      use-input
+                      clearable
+                      input-debounce="0"
+                      emit-value
+                      map-options
+                      :options="store.Ops.prefixOps"
+                      option-label="name"
+                      option-value="name"
+                      @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
                     />
                   </div>
                   <div class="col">