Merge branch 'develop' into devTee

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>

src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { QForm, useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = mixin;
+
+const historyRows = ref<any>([]);
+
+const historyDialog = defineModel<boolean>("historyDialog", { required: true });
+const id = defineModel<string>("id", { required: true });
+const index = ref<number>(10);
+function closeHistoryDialog() {
+  historyDialog.value = false;
+}
+
+async function fetchHistoryData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewFamilyHisByFamilyId(id))
+    .then(async (res) => {
+      console.log(res.data.result);
+      historyRows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+</script>
+
+<template>
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-white">
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <dialog-header
+          tittle="ประวัติแก้ไขข้อมูลครอบครัว"
+          :close="closeHistoryDialog"
+        />
+      </q-card-section>
+      <q-separator color="grey-4" />
+      <div class="q-pa-md">
+        <div>
+          <div class="col-12 row q-pb-sm">
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • บิดา
+            </div>
+          </div>
+          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+            <div class="row items-center">
+              <div class="col-2">
+                <div>เลขบัตรประจำตัวประชาชน</div>
+              </div>
+              <div class="col">
+                {{ historyRows[index].fatherCitizenId }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">คำนำหน้าชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].fatherPrefix }}
+              </div>
+              <div class="col-1">ชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].fatherFirstName }}
+              </div>
+              <div class="col-1">นามสกุล</div>
+              <div class="col-2">
+                {{ historyRows[index].fatherLastName }}
+              </div>
+              <div class="col-1">อาชีพ</div>
+              <div class="col">
+                {{ historyRows[index].fatherCareer }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">สถานภาพการมีชีวิต</div>
+              <div class="col-10">
+                <div v-if="historyRows[index].fatherLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+        <div>
+          <div class="col-12 row q-pb-sm q-pt-md">
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • มารดา
+            </div>
+          </div>
+          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+            <div class="row items-center">
+              <div class="col-2">
+                <div>เลขบัตรประจำตัวประชาชน</div>
+              </div>
+              <div class="col">
+                {{ historyRows[index].motherCitizenId }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">คำนำหน้าชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].motherPrefix }}
+              </div>
+              <div class="col-1">ชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].motherFirstName }}
+              </div>
+              <div class="col-1">นามสกุล</div>
+              <div class="col-2">
+                {{ historyRows[index].motherLastName }}
+              </div>
+              <div class="col-1">อาชีพ</div>
+              <div class="col">
+                {{ historyRows[index].motherCareer }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">สถานภาพการมีชีวิต</div>
+              <div class="col">
+                <div v-if="historyRows[index].motherLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+        <div>
+          <div class="col-12 row q-pb-sm q-pt-md">
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • คู่สมรส
+            </div>
+          </div>
+          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+            <div class="row items-center">
+              <div class="col-2">
+                <div>เลขบัตรประจำตัวประชาชน</div>
+              </div>
+              <div class="col">
+                {{ historyRows[index].coupleCitizenId }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">คำนำหน้าชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].couplePrefix }}
+              </div>
+              <div class="col-1">ชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].firstName }}
+              </div>
+              <div class="col-1">นามสกุล</div>
+              <div class="col-2">
+                {{ historyRows[index].coupleLastName }}
+              </div>
+              <div class="col-1">อาชีพ</div>
+              <div class="col">
+                {{ historyRows[index].coupleCareer }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">สถานภาพการมีชีวิต</div>
+              <div class="col">
+                <div v-if="historyRows[index].coupleLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+        <!-- <div>
+          <div class="col-12 row q-pb-sm q-pt-md">
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • บุตร
+            </div>
+          </div>
+          <div
+            v-for="(children, indexIn) in historyRows[index].children"
+            :key="index"
+          >
+            <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
+              <div class="text-medium">บุตรคนที่ : {{ indexIn + 1 }}</div>
+            </div>
+            <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+              <div class="row items-center">
+                <div class="col-2">
+                  <div>เลขบัตรประจำตัวประชาชน</div>
+                </div>
+                <div class="col-10">
+                  {{ children.childrenCitizenId }}
+                </div>
+              </div>
+              <div class="row items-center">
+                <div class="col-2">คำนำหน้าชื่อ</div>
+                <div class="col-2">
+                  {{ children.childrenPrefix }}
+                </div>
+                <div class="col-1">ชื่อ</div>
+                <div class="col-2">
+                  {{ children.childrenFirstName }}
+                </div>
+                <div class="col-1">นามสกุล</div>
+                <div class="col-2">
+                  {{ children.childrenLastName }}
+                </div>
+                <div class="col-1">อาชีพ</div>
+                <div class="col">
+                  {{ children.childrenCareer }}
+                </div>
+              </div>
+              <div class="row items-center">
+                <div class="col-2">สถานภาพการมีชีวิต</div>
+                <div class="col">
+                  <div v-if="children.childrenLive">มีชีวิตอยู่</div>
+                  <div v-else>ถึงแก่กรรม</div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div> -->
+      </div>
+    </q-card>
+  </q-dialog>
+</template>

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