Merge branch 'phatt_dev' into develop

src/modules/04_registryNew/components/TableView.vue

@@ -74,7 +74,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "สายงาน",
     sortable: true,
-    field: (v) => v.posType.posTypeName,
+    field: (v) => (v.posType ? v.posType.posTypeName : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -85,7 +85,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ระดับชั้นงาน",
     sortable: true,
-    field: (v) => v.posLevel.posLevelName,
+    field: (v) => (v.posLevel ? v.posLevel.posLevelName : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>

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

@@ -12,7 +12,6 @@ import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { RequestObject } from "@/modules/04_registryNew/interface/request/Profile";
 import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Profile";
-import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Information";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -24,8 +23,7 @@ const {
   hideLoader,
   date2Thai,
   messageError,
-  convertDate,
-  dateToISO,
+  dialogConfirm,
 } = mixin;
 const { calculateAge, getGender, getRelationship, getReligion, getBloodGroup } =
   store;
@@ -34,9 +32,8 @@ const profileId = ref<string>(
 );
 
 const modal = ref<boolean>(false);
-const myForm = ref<any>();
 const informaData = ref<ResponseObject>();
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
+const rowsHistory = ref<ResponseObject[]>([]);
 const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
 const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
@@ -44,7 +41,7 @@ const modalHistory = ref<boolean>(false);
 const id = ref<string>("");
 const age = ref<string>("");
 // หลังบ้านไม่มีข้อมูล สัญชาติ
-const nationality = ref<string>("")
+const nationality = ref<string>("");
 const formData = reactive<RequestObject>({
   citizenId: "",
   prefix: "",
@@ -139,6 +136,7 @@ const columnsHistory = ref<QTableColumn[]>([
     field: "birthDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -147,7 +145,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "เพศ",
     sortable: true,
-    field: "gender",
+    field: (v) => (v.gender ? v.gender.name : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -158,7 +156,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "สถานภาพ",
     sortable: true,
-    field: "relationship",
+    field: (v) => (v.relationship ? v.relationship.name : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -169,7 +167,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "หมู่เลือด",
     sortable: true,
-    field: "bloodGroup",
+    field: (v) => (v.bloodGroup ? v.bloodGroup.name : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -187,11 +185,11 @@ const columnsHistory = ref<QTableColumn[]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "race",
+    name: "ethnicity",
     align: "left",
     label: "เชื้อชาติ",
     sortable: true,
-    field: "race",
+    field: "ethnicity",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -202,7 +200,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "ศาสนา",
     sortable: true,
-    field: "religion",
+    field: (v) => (v.religion ? v.religion.name : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -219,28 +217,6 @@ const columnsHistory = ref<QTableColumn[]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "employeeType",
-    align: "left",
-    label: "ประเภทการจ้าง",
-    sortable: true,
-    field: "employeeType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeClass",
-    align: "left",
-    label: "ประเภทลูกจ้าง",
-    sortable: true,
-    field: "employeeClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "createdFullName",
     align: "left",
@@ -260,6 +236,7 @@ const columnsHistory = ref<QTableColumn[]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -275,11 +252,9 @@ const visibleColumnsHistory = ref<String[]>([
   "relationship",
   "bloodGroup",
   "nationality",
-  "race",
+  "ethnicity",
   "religion",
   "phone",
-  "employeeType",
-  "employeeClass",
   "createdFullName",
   "createdAt",
 ]);
@@ -291,6 +266,7 @@ async function getData() {
     .then((res) => {
       informaData.value = res.data.result;
       if (informaData.value) {
+        id.value = informaData.value.id;
         age.value = calculateAge(informaData.value.birthDate);
       }
     })
@@ -302,6 +278,24 @@ async function getData() {
     });
 }
 
+async function editData() {
+  showLoader();
+  await http
+    .put(config.API.profileNewProfileById(id.value), {
+      ...formData,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      getData(), (modal.value = false);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function onClickOpenDialog() {
   if (!informaData.value) return;
   modal.value = true;
@@ -322,15 +316,24 @@ function onClickOpenDialog() {
   formData.phone = informaData.value.phone;
 }
 
-async function editData() {
-  showLoader();
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      editData();
+      modal.value = false;
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+async function clickHistory() {
+  modalHistory.value = true;
   await http
-    .put(config.API.profileNewProfileById(id.value), {
-      ...formData,
-    })
+    .get(config.API.profileNewProfileHisById(id.value))
     .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      getData(), (modal.value = false);
+      rowsHistory.value = res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -349,11 +352,6 @@ watch(
   }
 );
 
-function onSubmit() {
-  editData();
-  modal.value = false;
-}
-
 onMounted(async () => {
   await getData();
   store.genderOp.length === 0 ? await getGender() : "";
@@ -374,7 +372,7 @@ onMounted(async () => {
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn flat round icon="mdi-history" color="info">
+      <q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
         <q-tooltip>ประวัติข้อมูลส่วนตัว</q-tooltip>
       </q-btn>
     </div>
@@ -384,7 +382,7 @@ onMounted(async () => {
     <div v-if="informaData" :class="$q.screen.gt.xs ? 'row' : 'column'">
       <!-- column 1 -->
       <div class="col-md-7 col-12 row">
-        <div class="col-md-4 col-5 text-grey-6 text-weight-medium">
+        <div class="col-5 text-grey-6 text-weight-medium">
           <div
             v-for="label in Object.keys(dataLabel).slice(0, 6)"
             class="q-py-xs"
@@ -393,7 +391,7 @@ onMounted(async () => {
           </div>
         </div>
         <!-- data -->
-        <div class="col-md-8 col-7">
+        <div class="col-7">
           <div class="q-py-xs">
             {{ informaData.citizenId }}
           </div>
@@ -419,7 +417,7 @@ onMounted(async () => {
 
       <!-- column 2 -->
       <div class="col-md-5 col-12 row">
-        <div class="col-md-4 col-5 col text-grey-6 text-weight-medium">
+        <div class="col-5 col text-grey-6 text-weight-medium">
           <div
             v-for="label in Object.keys(dataLabel).slice(6, 11)"
             class="q-py-xs"
@@ -428,7 +426,7 @@ onMounted(async () => {
           </div>
         </div>
         <!-- data -->
-        <div class="col-md-8 col-7">
+        <div class="col-7">
           <div class="q-py-xs">
             {{ informaData.nationality ? informaData.nationality : "-" }}
           </div>
@@ -489,6 +487,7 @@ onMounted(async () => {
                 map-options
                 hide-bottom-space
                 input-debounce="0"
+                new-value-mode="add-unique"
                 v-model="formData.prefix"
                 class="inputgreen"
                 :options="store.prefixOp"
@@ -716,14 +715,8 @@ onMounted(async () => {
     <template #columns="props">
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
+          <div class="table_ellipsis">
+            {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
       </q-tr>

src/modules/04_registryNew/views/list.vue

@@ -109,13 +109,23 @@ function fetchYearOption() {
   }
 }
 
-function fetchDataPerson() {
+async function fetchDataPerson(search: boolean = false) {
   showLoader();
+
+  let queryParams = {
+    page: formFilter.page,
+    pageSize: formFilter.pageSize,
+  };
+
+  if (search) {
+    queryParams = Object.assign({}, queryParams, {
+      searchField: searchType.value,
+      searchKeyword: formFilter.keyword,
+    });
+  }
+
   http
-    .get(
-      config.API.registryNew +
-        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
-    )
+    .get(config.API.registryNew, { params: queryParams })
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       dataPersonMain.value = res.data.result.data;
@@ -149,7 +159,7 @@ function onclickSearch() {
     fetchYearOption();
   }
   formFilter.keyword = formFilter.keyword === null ? "" : formFilter.keyword;
-  fetchDataPerson();
+  fetchDataPerson(true);
 }
 
 function selectType(item: DataOption) {
@@ -194,9 +204,13 @@ onMounted(async () => {
 
   <q-card class="q-mt-md">
     <q-card-section class="card-img q-pb-lg">
-      <div class="text-h5 text-center q-py-md text-weight-medium">ค้นหาข้อมูลทะเบียนประวัติ</div>
+      <div class="text-h5 text-center q-py-md text-weight-medium">
+        ค้นหาข้อมูลทะเบียนประวัติ
+      </div>
       <div class="row justify-center">
-        <div class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders">
+        <div
+          class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders"
+        >
           <q-form @submit="onclickSearch">
             <div class="bg-white row col-12 q-pa-none rounded-borders">
               <div class="row col-11">
@@ -212,10 +226,9 @@ onMounted(async () => {
                     option-label="name"
                     option-value="id"
                     map-options
-                    class="selectS col-11 q-px-md "
+                    class="selectS col-11 q-px-md"
                     color="deep-orange"
                     dropdown-icon="mdi-chevron-down"
-                    
                   />
                   <q-separator vertical />
                 </div>
@@ -234,12 +247,18 @@ onMounted(async () => {
                 </q-input>
               </div>
               <div class="row col-1">
-                <q-btn class="fit btnSearch" unelevated color="deep-orange" label="ค้นหา" type="submit" />
+                <q-btn
+                  class="fit btnSearch"
+                  unelevated
+                  color="deep-orange"
+                  label="ค้นหา"
+                  type="submit"
+                />
               </div>
             </div>
           </q-form>
           <div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
-            <q-space/>
+            <q-space />
             <q-btn
               flat
               label="ตัวเลือกเพิ่มเติม"
@@ -299,8 +318,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-              
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   labelOption.posType !== "ทั้งหมด"
@@ -341,7 +359,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   labelOption.posLevel !== "ทั้งหมด"
@@ -382,7 +400,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{ `ปีเกษียณ${labelOption.retireYear}` }}
                 <q-btn
@@ -464,7 +482,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   `อายุราชการ (${formFilter.rangeYear.min} - ${formFilter.rangeYear.max} ปี)`
@@ -520,7 +538,7 @@ onMounted(async () => {
               dropdown-icon="mdi-chevron-down"
               :label="`เงื่อนไขอื่นๆ  ${conditionTotal}`"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <q-list>
                 <q-item clickable v-close-popup>
                   <q-item-section>
@@ -562,7 +580,7 @@ onMounted(async () => {
   </q-card>
 </template>
 
-<style >
+<style>
 .card-img {
   background: url("@/assets/registry-banner.png");
   background-size: cover;
@@ -581,19 +599,19 @@ onMounted(async () => {
   background-color: #36969f;
 }
 
-.btnSearch{
+.btnSearch {
   border-radius: 0px 4px 4px 0px;
 }
-.bg-Search{
+.bg-Search {
   background: #00000015;
 }
-.lineFil{
-  transform:rotate(30deg);
+.lineFil {
+  transform: rotate(30deg);
   height: 20px;
   margin-top: 15px;
   background: #ffffff7b !important;
 }
-.selectS .q-field__control .q-field__append .q-icon{
+.selectS .q-field__control .q-field__append .q-icon {
   color: #ff5722 !important;
 }
 </style>