ทะเบียนประวัติ: เชื่อมAPI ประวัติเปลี่ยนชื่อ

src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue

@@ -1,37 +1,73 @@
 <script setup lang="ts">
-import { onMounted, ref, useAttrs } from "vue";
+import { onMounted, ref, useAttrs, reactive } from "vue";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
+import axios from "axios";
 import type { QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import dialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import HistoryTable from "@/components/TableHistory.vue";
 import type { ResponseObject } from "@/components/information/interface/response/OldName";
 import type { Pagination } from "@/modules/04_registryNew/interface/index/Main";
 import type { RequestItemsObject } from "@/components/information/interface/request/OldName";
+import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
 
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
+const store = useProfileDataStore();
 const attrs = ref<any>(useAttrs());
 const {
   date2Thai,
   success,
-  dateToISO,
+  dialogConfirm,
   messageError,
   typeChangeName,
-  dialogMessage,
   showLoader,
   hideLoader,
+  dialogRemove,
 } = mixin;
-const profileId = ref<string>(route.params.id.toString());
 
+const { calculateAge, fetchPerson } = store;
+const profileId = ref<string>(route.params.id.toString());
+const editId = ref<string>("");
+const dialog = ref<boolean>(false);
+const dialogStatus = ref<string>("create");
 const filterSearch = ref("");
 const filterHistory = ref<string>("");
+const fileName = ref<string>("");
 const modalHistory = ref<boolean>(false);
 const rowsHistory = ref<RequestItemsObject[]>([]);
+const changeNameData = reactive<any>({
+  profileId: profileId.value,
+  prefixId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  status: "",
+  documentId: "",
+});
+
+const statusOption = ref([
+  "เปลี่ยนคำนำหน้าชื่อ",
+  "เปลี่ยนชื่อ",
+  "เปลี่ยนนามสกุล",
+  "เปลี่ยนชื่อ-นามสกุล",
+  "เปลี่ยนคำนำหน้าชื่อ และนามสกุล",
+  "เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล",
+]);
+const prefixFilter = ref([]);
+const statusOptionFilter = ref([
+  "เปลี่ยนคำนำหน้าชื่อ",
+  "เปลี่ยนชื่อ",
+  "เปลี่ยนนามสกุล",
+  "เปลี่ยนชื่อ-นามสกุล",
+  "เปลี่ยนคำนำหน้าชื่อ และนามสกุล",
+  "เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล",
+]);
+const alertUpload = ref<boolean>(false);
 const tittleHistory = ref<string>("ประวัติการเปลี่ยนชื่อ-นามสกุล");
 const visibleColumns = ref<string[]>([
   "prefix",
@@ -47,43 +83,44 @@ const visibleColumnsHistory = ref<String[]>([
   "createdFullName",
   "createdAt",
 ]);
-
+const rows = ref<ResponseObject[]>([]);
+const historyRows = ref<ResponseObject[]>([]);
 // mock data
-const rows = ref<RequestItemsObject[]>([
+// const rows = ref<RequestItemsObject[]>([
-  {
+//   {
-    id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
+//     id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
-    prefix: "นางสาว",
+//     prefix: "นางสาว",
-    prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+//     prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
-    firstName: "อรัญญาวินัย",
+//     firstName: "อรัญญาวินัย",
-    lastName: "พรไชยะสาร",
+//     lastName: "พรไชยะสาร",
-    status: "all",
+//     status: "all",
-    file: null,
+//     file: null,
-    createdFullName: "",
+//     createdFullName: "",
-    createdAt: new Date("2024-02-13T14:31:11.959404"),
+//     createdAt: new Date("2024-02-13T14:31:11.959404"),
-  },
+//   },
-  {
+//   {
-    id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
+//     id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
-    prefix: "นางสาว",
+//     prefix: "นางสาว",
-    prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+//     prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
-    firstName: "อรัญญาวินัย",
+//     firstName: "อรัญญาวินัย",
-    lastName: "พรไชยะสาร",
+//     lastName: "พรไชยะสาร",
-    status: "lastName",
+//     status: "lastName",
-    file: null,
+//     file: null,
-    createdFullName: "",
+//     createdFullName: "",
-    createdAt: new Date("2024-02-13T14:30:34.660735"),
+//     createdAt: new Date("2024-02-13T14:30:34.660735"),
-  },
+//   },
-  {
+//   {
-    id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
+//     id: "08dc2c65-c0e9-4692-8494-ab39e09aec24",
-    prefix: "นางสาว",
+//     prefix: "นางสาว",
-    prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+//     prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
-    firstName: "อรัญญาวินัย",
+//     firstName: "อรัญญาวินัย",
-    lastName: "พรไชยะสาร",
+//     lastName: "พรไชยะสาร",
-    status: "lastName",
+//     status: "lastName",
-    file: null,
+//     file: null,
-    createdFullName: "",
+//     createdFullName: "",
-    createdAt: new Date("2024-02-13T14:30:14.562741"),
+//     createdAt: new Date("2024-02-13T14:30:14.562741"),
-  },
+//   },
-]);
+// ]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "prefix",
@@ -192,16 +229,226 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "createdAt",
+    format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
+const uploadUrl = ref<string>("");
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
+const subId = ref<string>("");
+const fileUpload = ref<File>();
+
+function editForm(row: any) {
+  dialogStatus.value = "edit";
+  editId.value = row.id;
+  changeNameData.prefix = row.prefix;
+  changeNameData.firstName = row.firstName;
+  changeNameData.lastName = row.lastName;
+  changeNameData.status = row.status;
+  dialog.value = true;
+}
+
+function closeDialog() {
+  alertUpload.value = false;
+  dialog.value = false;
+}
+
+function clearForm() {
+  changeNameData.status = "";
+  changeNameData.prefix = "";
+  changeNameData.firstName = "";
+  changeNameData.lastName = "";
+  alertUpload.value = false;
+}
+
+async function onSubmit() {
+  if (!!fileUpload.value) {
+    await dialogConfirm(
+      $q,
+      async () => {
+        showLoader();
+        dialogStatus.value === "create"
+          ? await addData()
+          : await editData(editId.value);
+        closeDialog();
+        await uploadProfile(fileUpload.value);
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+
+async function uploadProfile(file: File | undefined) {
+  await http
+    .post(
+      config.API.subFile(
+        "ทะเบียนประวัติ",
+        "ประวัติการเปลี่ยนชื่อ-นามสกุล",
+        profileId.value,
+        subId.value
+      ),
+      {
+        replace: true,
+        fileList: [
+          {
+            fileName: "เอกสารหลักฐาน",
+          },
+        ],
+      }
+    )
+    .then(async (res) => {
+      uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
+      uploadFileURL(uploadUrl.value, file);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function uploadFileURL(uploadUrl: string, file: any) {
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      // fetchProfile(profileId.value);
+      // success($q, "อัปโหลดไฟล์สำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchProfile(id: string) {
+  showLoader();
+  await http
+    .get(
+      config.API.subFileByFileName(
+        "ทะเบียนประวัติ",
+        "ประวัติการเปลี่ยนชื่อ-นามสกุล",
+        profileId.value,
+        id,
+        "เอกสารหลักฐาน"
+      )
+    )
+    .then(async (res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function addData() {
+  await http
+    .post(config.API.profileNewChangeName, {
+      ...changeNameData,
+    })
+    .then((res) => {
+      subId.value = res.data.result;
+
+      fetchData(profileId.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function editData(idData: string) {
+  http
+    .patch(config.API.profileNewChangeNameByChangeNameId(idData), {
+      ...changeNameData,
+      profileId: undefined,
+    })
+    .then(() => {
+      fetchData(profileId.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function deleteData(idData: string) {
+  // dialogRemove($q, () =>
+  http
+    .delete(config.API.profileNewChangeNameByChangeNameId(idData))
+    .then(() => {
+      fetchData(profileId.value);
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  // );
+}
+
+function deleteFileData(idData: string) {
+  // dialogRemove($q, () =>
+  http
+    .delete(
+      config.API.subFile(
+        "ทะเบียนประวัติ",
+        "ประวัติการเปลี่ยนชื่อ-นามสกุล",
+        profileId.value,
+        idData
+      )
+    )
+    .then(() => {
+      fetchData(profileId.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  // );
+}
+
+async function fetchHistoryData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewChangeNameHisByChangeNameId(id))
+    .then(async (res) => {
+      historyRows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 const paginationLabel = (start: string, end: string, total: string) => {
   return start + "-" + end + " ใน " + total;
@@ -213,57 +460,17 @@ async function openFile(val: string | null) {
 
 async function clickHistory(row: RequestItemsObject) {
   modalHistory.value = true;
-  // showLoader();
-  // await http
-  //   .get(config.API.profileChangeNameHisId(row.id))
-  //   .then((res) => {
-  //     let data = res.data.result;
-  //     rowsHistory.value = [];
-  //     data.map((e: ResponseObject) => {
-  //       rowsHistory.value.push({
-  //         id: e.id,
-  //         prefix: e.prefix,
-  //         prefixId: e.prefixId,
-  //         firstName: e.firstName,
-  //         lastName: e.lastName,
-  //         status: e.status,
-  //         file: e.file,
-  //         createdFullName: e.createdFullName,
-  //         createdAt: new Date(e.createdAt),
-  //       });
-  //     });
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
 }
 
-async function fetchData() {
+async function fetchData(id: string) {
   showLoader();
   await http
-    .get(config.API.profileChangeNameId(profileId.value))
+    .get(config.API.profileNewChangeNameByProfileId(id))
-    .then((res) => {
+    .then(async (res) => {
-      let data = res.data.result;
+      rows.value = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          prefix: e.prefix,
-          prefixId: e.prefixId,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          status: e.status,
-          file: e.file,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
-      });
     })
-    .catch((e) => {
+    .catch((err) => {
-      messageError($q, e);
+      messageError($q, err);
     })
     .finally(() => {
       hideLoader();
@@ -271,11 +478,61 @@ async function fetchData() {
 }
 
 onMounted(async () => {
-  // await fetchData();
+  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;
+
+  fetchData(profileId.value);
 });
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "statusOptions":
+      update(() => {
+        statusOption.value = statusOptionFilter.value.filter(
+          (v: any) => v.indexOf(val) > -1
+        );
+      });
+      break;
+    case "prefixOps":
+      update(() => {
+        store.Ops.prefixOps = prefixFilter.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
 </script>
+
 <template>
   <q-toolbar style="padding: 0px" class="text-primary row justify-end">
+    <q-btn
+      round
+      flat
+      color="primary"
+      icon="add"
+      size="16px"
+      @click="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+          clearForm();
+        }
+      "
+    >
+      <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+    >
+
+    <q-space />
     <q-input
       dense
       outlined
@@ -332,24 +589,37 @@ onMounted(async () => {
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="(col, index) in props.cols" :key="col.name">
-          <div v-if="col.name == 'status'" class="table_ellipsis">
+          <div class="table_ellipsis">
-            {{ typeChangeName(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
             {{ col.value }}
           </div>
         </q-td>
         <q-td auto-width>
           <q-btn
-            v-if="props.row.file != null"
             color="green"
             flat
             dense
             round
             size="14px"
             icon="mdi-file-document-outline"
-            @click="openFile(props.row.file)"
+            @click="fetchProfile(props.row.id)"
           />
+          <q-btn
+            color="primary"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="14px"
+            icon="mdi-pencil-outline"
+            clickable
+            @click="
+              () => {
+                editForm(props.row);
+              }
+            "
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
           <q-btn
             color="info"
             flat
@@ -357,15 +627,30 @@ onMounted(async () => {
             round
             size="14px"
             icon="mdi-history"
-            @click="clickHistory(props.row)"
+            @click="
+              () => (fetchHistoryData(props.row.id), clickHistory(props.row))
+            "
           />
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-delete"
+            clickable
+            @click.stop="deleteData(props.row.id), deleteFileData(props.row.id)"
+            v-close-popup
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
       </q-tr>
     </template>
   </d-table>
 
   <history-table
-    :rows="rowsHistory"
+    :rows="historyRows"
     :columns="columnsHistory"
     :filter="filterHistory"
     :visible-columns="visibleColumnsHistory"
@@ -378,13 +663,7 @@ 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 == 'createdAt'" class="table_ellipsis">
+          <div class="table_ellipsis">
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else-if="col.name == 'status'" class="table_ellipsis">
-            {{ typeChangeName(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
             {{ col.value }}
           </div>
         </q-td>
@@ -403,6 +682,192 @@ onMounted(async () => {
       </q-tr>
     </template>
   </history-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 50%" class="bg-white">
+      <q-form @submit.prevent greedy @validation-success="onSubmit()">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <div class="q-pa-md">
+          <div class="row q-mb-md">
+            <div class="col-5">
+              <q-select
+                outlined
+                v-model="changeNameData.status"
+                :options="statusOption"
+                label="สถานะการเปลี่ยนชื่อ"
+                clearable
+                use-input
+                input-debounce="0"
+                :rules="[
+                  (val) => !!val || `${'กรุณาเลือกสถานะการเปลี่ยนชื่อ'}`,
+                ]"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
+                      ) "
+                dense
+              />
+            </div>
+          </div>
+          <div class="row q-gutter-md q-mb-md">
+            <div class="col">
+              <q-select
+                v-model="changeNameData.prefix"
+                :options="store.Ops.prefixOps"
+                label="คำนำหน้าชื่อ"
+                dense
+                outlined
+                use-input
+                lazy-rules
+                clearable
+                emit-value
+                map-options
+                :rules="[(val) => !!val || `${'กรุณาเลือกคำนำหน้าชื่อ'}`]"
+                hide-bottom-space
+                input-debounce="0"
+                option-label="name"
+                option-value="name"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+              />
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="changeNameData.firstName"
+                label="ชื่อ"
+                bg-color="white"
+                dense
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="changeNameData.lastName"
+                label="นามสกุล"
+                bg-color="white"
+                dense
+                :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+                hide-bottom-space
+              />
+            </div>
+          </div>
+          <div class="row">
+            <q-uploader
+              color="gray"
+              type="file"
+              flat
+              ref="uploader"
+              class="full-width"
+              text-color="white"
+              :max-size="10000000"
+              accept=".jpg,.png,.pdf,.csv,.doc,.docx"
+              bordered
+              label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
+              @added="(v) => (fileUpload = v[0])"
+            >
+              <template v-slot:header="scope">
+                <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+                  <q-btn
+                    v-if="scope.queuedFiles.length > 0"
+                    icon="clear_all"
+                    @click="scope.removeQueuedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบทั้งหมด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.uploadedFiles.length > 0"
+                    icon="done_all"
+                    @click="scope.removeUploadedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                  </q-btn>
+                  <q-spinner
+                    v-if="scope.isUploading"
+                    class="q-uploader__spinner"
+                  />
+                  <div class="col">
+                    <div class="q-uploader__title">
+                      {{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
+                    </div>
+                    <div class="q-uploader__subtitle">
+                      {{ scope.uploadSizeLabel }} /
+                      {{ scope.uploadProgressLabel }}
+                    </div>
+                  </div>
+                  <q-btn
+                    v-if="scope.canAddFiles"
+                    type="a"
+                    icon="add_box"
+                    @click="scope.pickFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-uploader-add-trigger />
+                    <q-tooltip>เลือกไฟล์</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.isUploading"
+                    icon="clear"
+                    @click="scope.abort"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                  </q-btn>
+                </div>
+              </template>
+            </q-uploader>
+            <div
+              v-if="alertUpload"
+              class="row text-negative items-center q-mt-sm"
+            >
+              กรุณาอัพโหลดเอกสาร
+              <q-icon name="mdi-alert-circle q-ml-sm" size="24px" />
+            </div>
+          </div>
+        </div>
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+            @click="
+              () => {
+                if (!!fileUpload) {
+                  alertUpload = false;
+                } else {
+                  alertUpload = true;
+                }
+              }
+            "
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue

@@ -400,7 +400,6 @@ async function fetchEducationLevel() {
         });
       });
       educationLevelOptionFilter.value = educationLevelOption.value;
-      console.log(educationLevelOptionFilter.value);
     })
     .catch((err) => {
       messageError($q, err);