รายการยื่นคำร้องขอแก้ไขข้อมูล

src/api/org/api.org.ts

@@ -76,4 +76,9 @@ export default {
   profileNewProvince: `${metadata}province`,
   profileNewDistrictByPId: (id: string) => `${metadata}province/${id}`,
   profileNewSubDistrictByDId: (id: string) => `${metadata}district/${id}`,
+
+  /**
+   * รายการคำร้องขอแก้ไขข้อมูลทะเบียนประวัติ
+   */
+  requestEdit: `${profileOrg}/edit/`,
 };

src/modules/10_registry/components/DialogAddRequestEdit.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
+import axios from "axios";
+import keycloak from "@/plugins/keycloak";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -26,6 +28,7 @@ const props = defineProps({
 });
 
 const isReadOnly = ref<boolean>(false);
+const profileId = ref<string>("");
 const formData = reactive({
   topic: "",
   detail: "",
@@ -40,22 +43,92 @@ function closeDialog() {
   formData.document = null;
 }
 
+/**
+ * function ยืนยันการยื่นคำร้องขอแก้ไขข้อมูล
+ */
 function onSubmit() {
   dialogConfirm(
     $q,
-    async () => {
+    () => {
-      await showLoader();
+      showLoader();
-      console.log(formData);
+      http
-      props.fetchData?.();
+        .post(config.API.requestEdit, {
-      await success($q, "บันทึกข้อมูลสำเร็จ");
+          topic: formData.topic,
-      await closeDialog();
+          detail: formData.detail,
-      await hideLoader();
+          profileId: profileId.value,
+        })
+        .then((res) => {
+          createURLUpload(res.data.result, formData.document);
+        })
+        .catch((err) => {
+          messageError($q, err);
+          hideLoader();
+        });
     },
     "ยืนยันการยื่นคำร้อง",
     "ต้องการยืนยันการยื่นคำร้องนี้ใช่หรือไม่?"
   );
 }
 
+/**
+ * function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
+ */
+function createURLUpload(id: string, file: any) {
+  const fileName = { fileName: file.name };
+  http
+    .post(
+      config.API.file(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id
+      ),
+      {
+        replace: false,
+        fileList: fileName,
+      }
+    )
+    .then(async (res) => {
+      const foundKey: string | undefined = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      foundKey &&
+        uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+function uploadFileDoc(uploadUrl: string, file: any) {
+  showLoader();
+  axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async (res) => {
+      await props.fetchData?.();
+      await success($q, "บันทึกข้อมูลสำเร็จ");
+      closeDialog();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * class input
+ * @param val
+ */
 function classInput(val: boolean) {
   return {
     "full-width cursor-pointer ": val,
@@ -63,6 +136,11 @@ function classInput(val: boolean) {
   };
 }
 
+/**
+ * function ค้นหาข้อมูลใน select
+ * @param val คำค้นหา
+ * @param update Function
+ */
 function filterOption(val: string, update: Function) {
   update(() => {
     topicOption.value = store.optionTopic.filter(
@@ -70,6 +148,31 @@ function filterOption(val: string, update: Function) {
     );
   });
 }
+
+/**
+ * function fetch profileId
+ */
+function fetchProfile() {
+  showLoader();
+  http
+    .get(config.API.profilePosition())
+    .then((res) => {
+      const data = res.data.result;
+      profileId.value = data.profileId;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchProfile();
+  }
+);
 </script>
 
 <template>
@@ -130,6 +233,7 @@ function filterOption(val: string, update: Function) {
                 dense
                 outlined
                 hide-bottom-space
+                :rules="[(val:any) => !!val || `${'กรุณาเลือกไฟล์'}`]"
               />
             </div>
           </div>

src/modules/10_registry/interface/index/Main.ts

@@ -3,4 +3,11 @@ interface DataOption {
   name: string;
 }
 
-export type { DataOption };
+interface NewPagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
+}
+
+export type { DataOption,NewPagination };

src/modules/10_registry/interface/response/Main.ts

@@ -0,0 +1,14 @@
+interface DataRequest {
+  createdAt: string;
+  createdFullName: string;
+  detail: string;
+  fullname: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdatedAt: string;
+  remark: string;
+  status: string;
+  topic: string;
+}
+
+export type { DataRequest };

src/modules/10_registry/views/requestEditMain.vue

@@ -1,20 +1,39 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+/**
+ * importType
+ */
 import type { QTableProps } from "quasar";
-import type { DataOption } from "@/modules/10_registry/interface/index/Main";
+import type {
+  DataOption,
+  NewPagination,
+} from "@/modules/10_registry/interface/index/Main";
+import type { DataRequest } from "@/modules/10_registry/interface/response/Main";
 
-import DialogAddPetiton from "@/modules/10_registry/components/DialogAddPetiton.vue";
+/**
+ * importComponents
+ */
+import DialogAddRequestEdit from "@/modules/10_registry/components/DialogAddRequestEdit.vue";
 
+/**
+ * importStore
+ */
 import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
 
+/**
+ * use
+ */
+const $q = useQuasar();
 const store = useRequestEditStore();
 const router = useRouter();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogRemove, success } =
+  useCounterMixin();
 
 /**
  * ตัวแปร
@@ -23,12 +42,15 @@ const modalPetiton = ref<boolean>(false);
 const status = ref<string>("");
 const keyword = ref<string>("");
 const statusOption = ref<DataOption[]>(store.optionStatus);
-const dataList = ref<any[]>([]);
 
 /**
  * Table
  */
-const rows = ref<any[]>([]);
+const rows = ref<DataRequest[]>([]);
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
+const rowsTotal = ref<number>(0);
+const maxPage = ref<number>(0);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -65,7 +87,6 @@ const columns = ref<QTableProps["columns"]>([
     label: "หลักฐานอ้างอิง",
     sortable: true,
     field: "document",
-    format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -99,64 +120,158 @@ const visibleColumns = ref<string[]>([
   "remark",
 ]);
 
+/**
+ * function กลับไปหน้าทะเบียนประวัติ
+ */
 function onclickBackPage() {
   router.push(`/registry`);
 }
 
+/**
+ * function กดเพิ่มรายการยื่นคำร้องขอแก้ไขข้อมูล
+ */
 function onClickAdd() {
   modalPetiton.value = true;
 }
 
+/**
+ * function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล
+ */
 function fetchListRequset() {
-  const data = [
+  let queryParams = {
-    {
+    page: page.value,
-      topic: "ขอแก้ไขคำนำหน้านาม ชื่อ นามสกุล",
+    pageSize: pageSize.value,
-      detail: "ขอแก้ไขคำนำหน้านาม",
+    status: status.value,
-      document: null,
+    keyword: keyword.value,
-      status: "PENDING",
+  };
-      remark: "",
+  showLoader();
-    },
+  http
-    {
+    .get(config.API.requestEdit + `user`, { params: queryParams })
-      topic: "ขอแก้ไขข้อมูลประวัติการศึกษา",
+    .then((res) => {
-      detail: "ขอแก้ไขคำนำหน้านาม",
+      const data = res.data.result;
-      document: null,
+      maxPage.value = Math.ceil(data.total / pageSize.value);
-      status: "COMPLETE",
+      rowsTotal.value = data.total;
-      remark: "",
+      rows.value = data.data;
-    },
+    })
-    {
+    .catch((err) => {
-      topic: "ขอแก้ไขชื่อ - นามสกุล คู่สมรส",
+      messageError($q, err);
-      detail: "ขอแก้ไขคำนำหน้านาม",
+    })
-      document: null,
+    .finally(() => {
-      status: "REJECT",
+      hideLoader();
-      remark: "",
+    });
-    },
-  ];
-  dataList.value = data;
-  rows.value = dataList.value;
 }
 
-function updateStatusValue(val: string) {
+/**
-  if (val) {
+ * function เลือกสถานะคำร้อง
-    rows.value = dataList.value.filter((e) => e.status === val);
+ */
-  } else {
+function updateStatusValue() {
-    rows.value = dataList.value;
+  page.value = 1;
-  }
+  fetchListRequset();
 }
 
+/**
+ * function เคลียร์ข้อมูลสถานะคำร้อง
+ */
 function clearStatus() {
   status.value = "";
   statusOption.value = store.optionStatus;
 }
 
+/**
+ * function ค้นหาข้อมูลใน select
+ * @param val คำค้นหา
+ * @param update Function
+ */
 function filterOption(val: string, update: Function) {
   update(() => {
     status.value = val ? "" : status.value;
     statusOption.value = store.optionStatus.filter(
-      (v: any) => v.name.indexOf(val) > -1
+      (v: DataOption) => v.name.indexOf(val) > -1
     );
   });
 }
 
+function updatePageSizePagination(newPagination: NewPagination) {
+  page.value = 1;
+  pageSize.value = newPagination.rowsPerPage;
+}
+
+/**
+ * function หาชื่อไฟล์
+ * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
+ */
+function onDownloadFile(id: string) {
+  showLoader();
+  http
+    .get(
+      config.API.file(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id
+      )
+    )
+    .then((res) => {
+      if (res.data.length !== 0) {
+        downloadUrl(id, res.data[0].fileName);
+      } else {
+        hideLoader();
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+/**
+ * function  โหลดไฟล์
+ * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
+ * @param fileName  ชื่อไฟล์
+ */
+function downloadUrl(id: string, fileName: string) {
+  http
+    .get(
+      config.API.fileByFile(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id,
+        fileName
+      )
+    )
+    .then((res) => {
+      window.open(res.data.downloadUrl, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onDeleteLidt(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.requestEdit + `${id}`)
+      .then(async (res) => {
+        await fetchListRequset();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      });
+  });
+}
+
+watch(
+  () => pageSize.value,
+  () => {
+    fetchListRequset();
+  }
+);
+
 onMounted(() => {
   fetchListRequset();
 });
@@ -227,6 +342,7 @@ onMounted(() => {
             dense
             label="ค้นหา"
             style="width: 250px"
+            @keydown.enter="updateStatusValue()"
           >
           </q-input>
 
@@ -253,13 +369,14 @@ onMounted(() => {
             :rows-per-page-options="[10, 25, 50, 100]"
             :paging="true"
             :visible-columns="visibleColumns"
-            :filter="keyword"
+            @update:pagination="updatePageSizePagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
+                <q-th auto-width />
               </q-tr>
             </template>
             <template v-slot:body="props">
@@ -268,19 +385,59 @@ onMounted(() => {
                   <div v-if="col.name == 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
+                  <div v-else-if="col.name === 'document'">
+                    <q-btn
+                      icon="mdi-download"
+                      round
+                      dense
+                      flat
+                      color="primary"
+                      size="12px"
+                      @click.pervent="onDownloadFile(props.row.id)"
+                    >
+                      <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
+                    </q-btn>
+                  </div>
                   <div v-else class="table_ellipsis2">
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
+                <q-td>
+                  <q-btn
+                    v-if="props.row.status === 'PENDING'"
+                    flat
+                    round
+                    color="red"
+                    icon="mdi-delete"
+                    size="12px"
+                    @click="onDeleteLidt(props.row.id)"
+                  >
+                    <q-tooltip>ลบคำร้องขอแก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
               </q-tr>
             </template>
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ rowsTotal }} รายการ
+              <q-pagination
+                v-model="page"
+                active-color="primary"
+                color="dark"
+                :max="Number(maxPage)"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+                @update:model-value="fetchListRequset()"
+              ></q-pagination>
+            </template>
           </d-table>
         </div>
       </q-card>
     </div>
   </div>
 
-  <DialogAddPetiton
+  <DialogAddRequestEdit
     v-model:modal="modalPetiton"
     :fetchData="fetchListRequset"
   />