From 9d77ed62988a5801e0707da1117e355d95e23408 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 26 Mar 2024 10:28:41 +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:=20store=20=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=AA=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99=E0=B8=95=E0=B8=B1=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/PersonalInformation/01_Profile.vue |  45 ++-
 src/modules/04_registryNew/stores/profile.ts  | 297 ++++++++++++++----
 2 files changed, 262 insertions(+), 80 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
index 29e5c4558..b0a40d157 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -25,8 +25,16 @@ const {
   messageError,
   dialogConfirm,
 } = mixin;
-const { calculateAge, getGender, getRelationship, getReligion, getBloodGroup } =
-  store;
+const {
+  calculateAge,
+  fetchPerson,
+  filterSelector,
+  // getGender,
+  // getRelationship,
+  // getReligion,
+  // getBloodGroup,
+  // getPersonOp,
+} = store;
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
@@ -354,10 +362,19 @@ watch(
 
 onMounted(async () => {
   await getData();
-  store.genderOp.length === 0 ? await getGender() : "";
-  store.relationshipOp.length === 0 ? await getRelationship() : "";
-  store.religionOp.length === 0 ? await getReligion() : "";
-  store.bloodGroupOp.length === 0 ? await getBloodGroup() : "";
+  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();
+  }
+  // store.genderOp.length === 0 ? await getGender() : "";
+  // store.relationshipOp.length === 0 ? await getRelationship() : "";
+  // store.religionOp.length === 0 ? await getReligion() : "";
+  // store.bloodGroupOp.length === 0 ? await getBloodGroup() : "";
 });
 </script>
 <template>
@@ -487,12 +504,16 @@ onMounted(async () => {
                 map-options
                 hide-bottom-space
                 input-debounce="0"
-                new-value-mode="add-unique"
+                option-label="name"
+                option-value="id"
                 v-model="formData.prefix"
                 class="inputgreen"
-                :options="store.prefixOp"
+                :options="store.Ops.prefixOps"
                 :label="dataLabel.prefix"
                 :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
+              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -590,7 +611,7 @@ onMounted(async () => {
                 option-value="id"
                 v-model="formData.genderId"
                 class="inputgreen"
-                :options="store.genderOp"
+                :options="store.Ops.genderOps"
                 :label="dataLabel.gender"
               />
             </div>
@@ -608,7 +629,7 @@ onMounted(async () => {
                 input-debounce="0"
                 class="inputgreen"
                 v-model="formData.relationshipId"
-                :options="store.relationshipOp"
+                :options="store.Ops.statusOps"
                 :label="dataLabel.relationship"
               />
             </div>
@@ -648,7 +669,7 @@ onMounted(async () => {
                 input-debounce="0"
                 v-model="formData.religionId"
                 class="inputgreen"
-                :options="store.religionOp"
+                :options="store.Ops.religionOps"
                 :label="dataLabel.religion"
               />
             </div>
@@ -666,7 +687,7 @@ onMounted(async () => {
                 input-debounce="0"
                 v-model="formData.bloodGroupId"
                 class="inputgreen"
-                :options="store.bloodGroupOp"
+                :options="store.Ops.bloodOps"
                 :label="dataLabel.bloodGroup"
               />
             </div>
diff --git a/src/modules/04_registryNew/stores/profile.ts b/src/modules/04_registryNew/stores/profile.ts
index 00b7d21e7..d575b245c 100644
--- a/src/modules/04_registryNew/stores/profile.ts
+++ b/src/modules/04_registryNew/stores/profile.ts
@@ -6,11 +6,15 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type {
-  Gender,
-  Religion,
-  Relationship,
-  BloodGroup,
-} from "@/modules/04_registryNew/interface/response/Profile";
+  DataOption,
+  InformationOps,
+} from "@/modules/04_registryNew/interface/index/Main";
+// import type {
+//   Gender,
+//   Religion,
+//   Relationship,
+//   BloodGroup,
+// } from "@/modules/04_registryNew/interface/response/Profile";
 
 export const useProfileDataStore = defineStore("profile", () => {
   const $q = useQuasar();
@@ -24,11 +28,45 @@ export const useProfileDataStore = defineStore("profile", () => {
     dateToISO,
   } = mixin;
 
-  const genderOp = ref<Gender[]>([]);
-  const religionOp = ref<Religion[]>([]);
-  const relationshipOp = ref<Relationship[]>([]);
-  const bloodGroupOp = ref<BloodGroup[]>([]);
-  const prefixOp = ref<string[]>(["นาย", "นาง", "นางสาว"]);
+  const Ops = ref<InformationOps>({
+    prefixOps: [],
+    prefixOldOps: [],
+    genderOps: [],
+    bloodOps: [],
+    statusOps: [],
+    religionOps: [],
+    employeeClassOps: [
+      { id: "perm", name: "ลูกจ้างประจำ" },
+      { id: "temp", name: "ลูกจ้างชั่วคราว" },
+    ],
+    employeeTypeOps: [
+      { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+      { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+    ],
+  });
+
+  const OpsFilter = ref<InformationOps>({
+    prefixOps: [],
+    prefixOldOps: [],
+    genderOps: [],
+    bloodOps: [],
+    statusOps: [],
+    religionOps: [],
+    employeeClassOps: [
+      { id: "perm", name: "ลูกจ้างประจำ" },
+      { id: "temp", name: "ลูกจ้างชั่วคราว" },
+    ],
+    employeeTypeOps: [
+      { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+      { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+    ],
+  });
+
+  // const genderOp = ref<Gender[]>([]);
+  // const religionOp = ref<Religion[]>([]);
+  // const relationshipOp = ref<Relationship[]>([]);
+  // const bloodGroupOp = ref<BloodGroup[]>([]);
+  // const prefixOp = ref<string[]>(["นาย", "นาง", "นางสาว"]);
 
   function calculateAge(birthDate: Date): string {
     const birthDateTimeStamp = new Date(birthDate).getTime();
@@ -47,77 +85,200 @@ export const useProfileDataStore = defineStore("profile", () => {
     return `${years} ปี ${months} เดือน ${days} วัน`;
   }
 
-  async function getGender() {
+  const fetchPerson = async () => {
     showLoader();
     await http
-      .get(config.API.profileNewGender)
+      .get(config.API.person)
       .then((res) => {
-        genderOp.value = res.data.result;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
+        const data = res.data.result;
+        let optionbloodGroups: DataOption[] = [];
+        data.bloodGroups.map((r: any) => {
+          optionbloodGroups.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+          });
+        });
+        Ops.value.bloodOps = optionbloodGroups;
+        OpsFilter.value.bloodOps = optionbloodGroups;
 
-  async function getRelationship() {
-    showLoader();
-    await http
-      .get(config.API.profileNewRelationship)
-      .then((res) => {
-        relationshipOp.value = res.data.result;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
+        let optiongenders: DataOption[] = [];
+        data.genders.map((r: any) => {
+          optiongenders.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+          });
+        });
+        Ops.value.genderOps = optiongenders;
+        OpsFilter.value.genderOps = optiongenders;
 
-  async function getReligion() {
-    showLoader();
-    await http
-      .get(config.API.profileNewReligion)
-      .then((res) => {
-        religionOp.value = res.data.result;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
+        let optionprefixs: DataOption[] = [];
+        data.prefixs.map((r: any) => {
+          optionprefixs.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+          });
+        });
+        Ops.value.prefixOps = optionprefixs;
+        OpsFilter.value.prefixOps = optionprefixs;
 
-  async function getBloodGroup() {
-    showLoader();
-    await http
-      .get(config.API.profileNewBloodGroup)
-      .then((res) => {
-        bloodGroupOp.value = res.data.result;
-      })
-      .catch((e) => {
-        messageError($q, e);
+        let optionrelationships: DataOption[] = [];
+        data.relationships.map((r: any) => {
+          optionrelationships.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+          });
+        });
+        Ops.value.statusOps = optionrelationships;
+        OpsFilter.value.statusOps = optionrelationships;
+
+        let optionreligions: DataOption[] = [];
+        data.religions.map((r: any) => {
+          optionreligions.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+          });
+        });
+        Ops.value.religionOps = optionreligions;
+        OpsFilter.value.religionOps = optionreligions;
       })
+      .catch((e: any) => {})
       .finally(() => {
         hideLoader();
       });
-  }
+  };
+
+  const filterSelector = (val: any, update: Function, refData: string) => {
+    switch (refData) {
+      case "prefixOps":
+        update(() => {
+          Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+      case "genderOps":
+        update(() => {
+          Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+      case "bloodOps":
+        update(() => {
+          Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+      case "statusOps":
+        update(() => {
+          Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+      case "religionOps":
+        update(() => {
+          Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+      case "employeeClassOps":
+        update(() => {
+          Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+      case "employeeTypeOps":
+        update(() => {
+          Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+  
+      default:
+        break;
+    }
+  };
+
+  // async function getGender() {
+  //   showLoader();
+  //   await http
+  //     .get(config.API.profileNewGender)
+  //     .then((res) => {
+  //       genderOp.value = res.data.result;
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+  // }
+
+  // async function getRelationship() {
+  //   showLoader();
+  //   await http
+  //     .get(config.API.profileNewRelationship)
+  //     .then((res) => {
+  //       relationshipOp.value = res.data.result;
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+  // }
+
+  // async function getReligion() {
+  //   showLoader();
+  //   await http
+  //     .get(config.API.profileNewReligion)
+  //     .then((res) => {
+  //       religionOp.value = res.data.result;
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+  // }
+
+  // async function getBloodGroup() {
+  //   showLoader();
+  //   await http
+  //     .get(config.API.profileNewBloodGroup)
+  //     .then((res) => {
+  //       bloodGroupOp.value = res.data.result;
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+  // }
 
   return {
-    prefixOp,
-    genderOp,
-    religionOp,
-    relationshipOp,
-    bloodGroupOp,
+    Ops,
+    OpsFilter,
+    // prefixOp,
+    // genderOp,
+    // religionOp,
+    // relationshipOp,
+    // bloodGroupOp,
 
     calculateAge,
-    getGender,
-    getRelationship,
-    getReligion,
-    getBloodGroup,
+    fetchPerson,
+    filterSelector,
+    // getGender,
+    // getRelationship,
+    // getReligion,
+    // getBloodGroup,
   };
 });