ทะเบียนประวัติ: ข้อมูลส่วนตัว (เพิ่ม ยศ แก้ q-select)

src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue

@@ -25,16 +25,7 @@ const {
   messageError,
   dialogConfirm,
 } = mixin;
-const {
+const { calculateAge, fetchPerson, filterSelector } = store;
-  calculateAge,
-  fetchPerson,
-  filterSelector,
-  // getGender,
-  // getRelationship,
-  // getReligion,
-  // getBloodGroup,
-  // getPersonOp,
-} = store;
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
@@ -47,31 +38,8 @@ const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
 
 const id = ref<string>("");
-const age = ref<string>("");
+const age = ref<string | null>("");
-// หลังบ้านไม่มีข้อมูล สัญชาติ
+const formData = reactive<RequestObject>(store.defaultProfile);
-const nationality = ref<string>("");
-const formData = reactive<RequestObject>({
-  citizenId: "",
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  birthDate: null,
-  genderId: "",
-  relationshipId: "",
-  // nationality: "",
-  ethnicity: "",
-  religionId: "",
-  bloodGroupId: "",
-  phone: "",
-  posTypeId: "",
-  posLevelId: "",
-  telephoneNumber: null,
-  dateRetire: null,
-  isProbation: false,
-  keycloak: "",
-  email: null,
-  position: "",
-});
 
 const dataLabel = {
   citizenId: "เลขบัตรประจำตัวประชาชน",
@@ -87,6 +55,7 @@ const dataLabel = {
   phone: "เบอร์โทร",
 
   prefix: "คำนำหน้าชื่อ",
+  rank: "ยศ",
   firstName: "ชื่อ",
   lastName: "นามสกุล",
 };
@@ -114,6 +83,17 @@ const columnsHistory = ref<QTableColumn[]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "rank",
+    align: "left",
+    label: "ยศ",
+    sortable: true,
+    field: "rank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "firstName",
     align: "left",
@@ -153,7 +133,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "เพศ",
     sortable: true,
-    field: (v) => (v.gender ? v.gender.name : "-"),
+    field: "gender",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -164,7 +144,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "สถานภาพ",
     sortable: true,
-    field: (v) => (v.relationship ? v.relationship.name : "-"),
+    field: "relationship",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -175,7 +155,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "หมู่เลือด",
     sortable: true,
-    field: (v) => (v.bloodGroup ? v.bloodGroup.name : "-"),
+    field: "bloodGroup",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -208,7 +188,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "ศาสนา",
     sortable: true,
-    field: (v) => (v.religion ? v.religion.name : "-"),
+    field: "religion",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -253,6 +233,7 @@ const columnsHistory = ref<QTableColumn[]>([
 const visibleColumnsHistory = ref<String[]>([
   "citizenId",
   "prefix",
+  "rank",
   "firstName",
   "lastName",
   "birthDate",
@@ -291,6 +272,7 @@ async function editData() {
   await http
     .put(config.API.profileNewProfileById(id.value), {
       ...formData,
+      dateRetire: store.retireDate,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -312,15 +294,16 @@ function onClickOpenDialog() {
   age.value = calculateAge(informaData.value.birthDate);
   formData.citizenId = informaData.value.citizenId;
   formData.prefix = informaData.value.prefix;
+  formData.rank = informaData.value.rank;
   formData.firstName = informaData.value.firstName;
   formData.lastName = informaData.value.lastName;
   formData.birthDate = informaData.value.birthDate;
-  formData.genderId = informaData.value.genderId;
+  formData.gender = informaData.value.gender;
-  formData.relationshipId = informaData.value.relationshipId;
+  formData.relationship = informaData.value.relationship;
-  // formData.nationality = informaData.value.nationality;
+  formData.nationality = informaData.value.nationality;
   formData.ethnicity = informaData.value.ethnicity;
-  formData.religionId = informaData.value.religionId;
+  formData.religion = informaData.value.religion;
-  formData.bloodGroupId = informaData.value.bloodGroupId;
+  formData.bloodGroup = informaData.value.bloodGroup;
   formData.phone = informaData.value.phone;
 }
 
@@ -414,7 +397,9 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              `${informaData.prefix} ${informaData.firstName} ${informaData.lastName}`
+              `${informaData.rank ? informaData.rank : informaData.prefix} ${
+                informaData.firstName
+              } ${informaData.lastName}`
             }}
           </div>
           <div class="q-py-xs">
@@ -424,10 +409,10 @@ onMounted(async () => {
             {{ age ? age : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.gender ? informaData.gender.name : "-" }}
+            {{ informaData.gender ? informaData.gender : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.relationship ? informaData.relationship.name : "-" }}
+            {{ informaData.relationship ? informaData.relationship : "-" }}
           </div>
         </div>
       </div>
@@ -451,10 +436,10 @@ onMounted(async () => {
             {{ informaData.ethnicity ? informaData.ethnicity : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.religion ? informaData.religion.name : "-" }}
+            {{ informaData.religion ? informaData.religion : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.bloodGroup ? informaData.bloodGroup.name : "-" }}
+            {{ informaData.bloodGroup ? informaData.bloodGroup : "-" }}
           </div>
           <div class="q-py-xs">
             {{ informaData.phone ? informaData.phone : "-" }}
@@ -505,7 +490,7 @@ onMounted(async () => {
                 hide-bottom-space
                 input-debounce="0"
                 option-label="name"
-                option-value="id"
+                option-value="name"
                 v-model="formData.prefix"
                 class="inputgreen"
                 :options="store.Ops.prefixOps"
@@ -516,6 +501,28 @@ onMounted(async () => {
               )"
               />
             </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                clearable
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                input-debounce="0"
+                option-label="name"
+                option-value="name"
+                v-model="formData.rank"
+                class="inputgreen"
+                :options="store.Ops.rankOps"
+                :label="dataLabel.rank"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'rankOps'
+              )"
+              />
+            </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
                 dense
@@ -601,6 +608,7 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
+                use-input
                 clearable
                 lazy-rules
                 emit-value
@@ -608,29 +616,36 @@ onMounted(async () => {
                 hide-bottom-space
                 input-debounce="0"
                 option-label="name"
-                option-value="id"
+                option-value="name"
-                v-model="formData.genderId"
+                v-model="formData.gender"
                 class="inputgreen"
                 :options="store.Ops.genderOps"
                 :label="dataLabel.gender"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
+              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-select
                 dense
                 outlined
+                use-input
                 clearable
                 lazy-rules
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
+                option-value="name"
                 option-label="name"
                 input-debounce="0"
                 class="inputgreen"
-                v-model="formData.relationshipId"
+                v-model="formData.relationship"
                 :options="store.Ops.statusOps"
                 :label="dataLabel.relationship"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
+              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -640,7 +655,7 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 class="inputgreen"
-                v-model="nationality"
+                v-model="formData.nationality"
                 :label="dataLabel.nationality"
               />
             </div>
@@ -659,36 +674,44 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
+                use-input
                 clearable
                 lazy-rules
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
+                option-value="name"
                 option-label="name"
                 input-debounce="0"
-                v-model="formData.religionId"
+                v-model="formData.religion"
                 class="inputgreen"
                 :options="store.Ops.religionOps"
                 :label="dataLabel.religion"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
+              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-select
                 dense
                 outlined
+                use-input
                 clearable
                 lazy-rules
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
+                option-value="name"
                 option-label="name"
                 input-debounce="0"
-                v-model="formData.bloodGroupId"
+                v-model="formData.bloodGroup"
                 class="inputgreen"
                 :options="store.Ops.bloodOps"
                 :label="dataLabel.bloodGroup"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
+              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">

src/modules/04_registryNew/interface/index/Main.ts

@@ -25,7 +25,7 @@ interface zipCodeOption {
 
 interface InformationOps {
   prefixOps: DataOption[];
-  prefixOldOps: DataOption[];
+  rankOps: DataOption[];
   genderOps: DataOption[];
   bloodOps: DataOption[];
   statusOps: DataOption[];

src/modules/04_registryNew/interface/request/Profile.ts

@@ -1,24 +1,25 @@
 interface RequestObject {
-  bloodGroupId: string | null;
-  relationshipId: string | null;
-  genderId: string | null;
-  posTypeId: string;
-  posLevelId: string;
-  religionId: string | null;
-  citizenId: string;
-  telephoneNumber: string | null;
-  // nationality: string | null;
-  ethnicity: string | null;
   birthDate: Date | null;
+  bloodGroup: string | null;
+  citizenId: string;
   dateRetire: Date | null;
+  email: string | null;
+  ethnicity: string | null;
+  firstName: string;
+  gender: string | null;
   isProbation: boolean;
   keycloak: string;
-  phone: string | null;
-  email: string | null;
-  position: string;
   lastName: string;
-  firstName: string;
+  nationality: string | null;
+  phone: string | null;
+  posLevelId: string;
+  posTypeId: string;
+  position: string;
   prefix: string;
+  rank: string | null;
+  relationship: string | null;
+  religion: string | null;
+  telephoneNumber: string | null;
 }
 
 export type { RequestObject };

src/modules/04_registryNew/interface/response/Profile.ts

@@ -1,38 +1,35 @@
 interface ResponseObject {
-  id: string;
+  birthDate: Date | null;
-  createdAt: Date;
+  bloodGroup: string | null;
-  createdUserId: string;
-  lastUpdatedAt: Date;
-  lastUpdateUserId: string;
-  createdFullName: string;
-  lastUpdateFullName: string;
-  prefix: string;
-  firstName: string;
-  lastName: string;
   citizenId: string;
-  position: string;
+  createdAt: Date | null;
-  posLevelId: string | null;
+  createdFullName: string;
-  posTypeId: string | null;
+  createdUserId: string;
-  email: string | null;
-  phone: string | null;
-  keycloak: string | null;
-  isProbation: boolean;
   dateRetire: Date | null;
-  birthDate: Date;
+  email: string | null;
   ethnicity: string | null;
-  religionId: string | null;
+  firstName: string;
-  religion: Religion | null;
+  gender: string | null;
-  telephoneNumber: null | null;
+  id: string;
-  genderId: string | null;
+  isLeave: boolean;
-  gender: Gender | null;
+  isProbation: boolean;
-  relationshipId: string | null;
+  keycloak: string | null;
-  relationship: Relationship | null;
+  lastName: string;
-  bloodGroupId: string | null;
+  lastUpdateFullName: string;
-  bloodGroup: BloodGroup | null;
+  lastUpdateUserId: string;
+  lastUpdatedAt: Date | null;
+  nationality: string | null;
+  phone: string | null;
   posLevel: PosLevel | null;
+  posLevelId: string | null;
   posType: PosType | null;
-
+  posTypeId: string | null;
-  nationality?: string;
+  position: string | null;
+  prefix: string;
+  rank: string | null
+  relationship: string | null;
+  religion: string | null;
+  telephoneNumber: string | null;
 }
 
 interface Religion {

src/modules/04_registryNew/stores/profile.ts

@@ -5,16 +5,11 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { RequestObject } from "@/modules/04_registryNew/interface/request/Profile";
 import type {
   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();
@@ -27,10 +22,35 @@ export const useProfileDataStore = defineStore("profile", () => {
     convertDate,
     dateToISO,
   } = mixin;
+  const retireDate = ref<Date>();
+
+  const defaultProfile: RequestObject = {
+    bloodGroup: null,
+    relationship: null,
+    gender: null,
+    posTypeId: "",
+    posLevelId: "",
+    religion: null,
+    citizenId: "",
+    telephoneNumber: null,
+    nationality: null,
+    ethnicity: null,
+    birthDate: null,
+    dateRetire: null,
+    isProbation: false,
+    keycloak: "",
+    phone: null,
+    email: null,
+    position: "",
+    lastName: "",
+    firstName: "",
+    prefix: "",
+    rank: null,
+  };
 
   const Ops = ref<InformationOps>({
     prefixOps: [],
-    prefixOldOps: [],
+    rankOps: [],
     genderOps: [],
     bloodOps: [],
     statusOps: [],
@@ -47,7 +67,7 @@ export const useProfileDataStore = defineStore("profile", () => {
 
   const OpsFilter = ref<InformationOps>({
     prefixOps: [],
-    prefixOldOps: [],
+    rankOps: [],
     genderOps: [],
     bloodOps: [],
     statusOps: [],
@@ -62,13 +82,16 @@ export const useProfileDataStore = defineStore("profile", () => {
     ],
   });
 
-  // const genderOp = ref<Gender[]>([]);
+  const prefixOp = ref<string[]>([
-  // const religionOp = ref<Religion[]>([]);
+    "นาย",
-  // const relationshipOp = ref<Relationship[]>([]);
+    "นาง",
-  // const bloodGroupOp = ref<BloodGroup[]>([]);
+    "นางสาว",
-  // const prefixOp = ref<string[]>(["นาย", "นาง", "นางสาว"]);
+    "เด็กชาย",
+    "เด็กหญิง",
+  ]);
 
-  function calculateAge(birthDate: Date): string {
+  function calculateAge(birthDate: Date | null) {
+    if (!birthDate) return null;
     const birthDateTimeStamp = new Date(birthDate).getTime();
     const now = new Date();
     const diff = now.getTime() - birthDateTimeStamp;
@@ -77,6 +100,9 @@ export const useProfileDataStore = defineStore("profile", () => {
     const years = ageDate.getUTCFullYear() - 1970;
     const months = ageDate.getUTCMonth();
     const days = ageDate.getUTCDate() - 1;
+    const retire = new Date(birthDate);
+    retire.setFullYear(retire.getFullYear() + 60);
+    retireDate.value = retire
 
     if (years > 60) {
       return "อายุเกิน 60 ปี";
@@ -118,9 +144,25 @@ export const useProfileDataStore = defineStore("profile", () => {
             name: r.name.toString(),
           });
         });
+        optionprefixs = optionprefixs.filter((o) =>
+          prefixOp.value.find((p) => o.name === p)
+        );
         Ops.value.prefixOps = optionprefixs;
         OpsFilter.value.prefixOps = optionprefixs;
 
+        let optionrank: DataOption[] = [];
+        data.prefixs.map((r: any) => {
+          optionrank.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+          });
+        });
+        optionrank = optionrank.filter(
+          (o) => !prefixOp.value.find((p) => o.name === p)
+        );
+        Ops.value.rankOps = optionrank;
+        OpsFilter.value.rankOps = optionrank;
+
         let optionrelationships: DataOption[] = [];
         data.relationships.map((r: any) => {
           optionrelationships.push({
@@ -156,6 +198,13 @@ export const useProfileDataStore = defineStore("profile", () => {
           );
         });
         break;
+      case "rankOps":
+        update(() => {
+          Ops.value.rankOps = OpsFilter.value.rankOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
       case "genderOps":
         update(() => {
           Ops.value.genderOps = OpsFilter.value.genderOps.filter(
@@ -198,87 +247,20 @@ export const useProfileDataStore = defineStore("profile", () => {
           );
         });
         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 {
+    defaultProfile,
+    retireDate,
     Ops,
     OpsFilter,
-    // prefixOp,
-    // genderOp,
-    // religionOp,
-    // relationshipOp,
-    // bloodGroupOp,
 
     calculateAge,
     fetchPerson,
     filterSelector,
-    // getGender,
-    // getRelationship,
-    // getReligion,
-    // getBloodGroup,
   };
 });