Refactoring code module 04_registryPerson

src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue

@@ -1,19 +1,18 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { checkPermission } from "@/utils/permissions";
-import { ref, onMounted, reactive } from "vue";
-import type {
-  RowList,
-  FormFilter,
-  MyObjectRef,
-} from "@/modules/04_registryPerson/interface/index/other";
 
+import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
+
+import type { RowList } from "@/modules/04_registryPerson/interface/index/other";
+
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useRoute } from "vue-router";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue";
+
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -29,28 +28,22 @@ const {
 
 const id = ref<string>("");
 
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const mode = ref<string>("table");
-const filterKeyword = ref<string>("");
+const mode = ref<string>("table"); //การแสดงผล Table,Card
+const modal = ref<boolean>(false); //แสดง popup  ข้อมูลอื่นๆ
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
+const edit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
+
+const date = ref<Date | null>(null); //วันที่
+const detail = ref<string>(""); //รายละเอียด
+
+//Table
 const rows = ref<RowList[]>([]);
-
-/** modal */
-const modal = ref<boolean>(false);
-const edit = ref<boolean>(false);
-const modalHistory = ref<boolean>(false);
-
-const date = ref<Date | null>(null);
-const detail = ref<string>();
-
-const visibleColumns = ref<String[]>(["date", "detail"]);
+const filterKeyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -74,8 +67,33 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>(["date", "detail"]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
-/** เปิด dialog */
+/**
+ * fetch รายการข้อมูลอื่นๆ
+ */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.profileNewOtherByProfileId(profileId.value, empType.value))
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * เปิด dialog ข้อมูลอื่นๆ
+ */
 function openDialogAdd() {
   modal.value = true;
 }
@@ -91,7 +109,9 @@ function openDialogEdit(props: RowList) {
   date.value = props.date;
   detail.value = props.detail;
 }
-/** dialog ประติ
+
+/**
+ * dialog ประติ
  * @param id id รายการ
  */
 function openDialogHistory(idOrder: string) {
@@ -99,7 +119,9 @@ function openDialogHistory(idOrder: string) {
   modalHistory.value = true;
 }
 
-/** ปิด dialog */
+/**
+ * ปิด dialog
+ */
 function closeDialog() {
   modal.value = false;
   edit.value = false;
@@ -107,7 +129,9 @@ function closeDialog() {
   detail.value = "";
 }
 
-/** validate check*/
+/**
+ * validate check
+ */
 function validateForm() {
   dialogConfirm(
     $q,
@@ -171,24 +195,6 @@ function editData() {
     });
 }
 
-/**
- * fetch รายการข้อมูลอื่นๆ
- */
-function getData() {
-  showLoader();
-  http
-    .get(config.API.profileNewOtherByProfileId(profileId.value, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 onMounted(() => {
   getData();
 });

src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue

@@ -1,56 +1,32 @@
 <script setup lang="ts">
-import { ref, watch, reactive } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
+
 import { useRoute } from "vue-router";
-
-import type { RowList } from "@/modules/04_registryPerson/interface/index/other";
-
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type {
-  RequestItemsObject,
-  FormFilter,
-} from "@/modules/04_registryPerson/interface/index/discipline";
+import type { RowList } from "@/modules/04_registryPerson/interface/index/other";
 
-const modal = defineModel<boolean>("modal", { required: true });
-const id = defineModel<string>("id", { required: true });
+import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
   mixin;
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const filterKeyword = ref<string>("");
-const rows = ref<RowList[]>([]); //select data history
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 12,
-  keyword: "",
-  type: "",
-  posType: "",
-  posLevel: "",
-  retireYear: "",
-  rangeYear: { min: 0, max: 60 },
-  isShowRetire: false,
-  isProbation: false,
-});
+
+/** 
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const id = defineModel<string>("id", { required: true });
+
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const visibleColumns = ref<String[]>([
-  "date",
-  "detail",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
+const rows = ref<RowList[]>([]); // data history
+const filterKeyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -97,6 +73,16 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "date",
+  "detail",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+/**
+ * ฟังก์ชันดึงข้อมูลประวัติการแก่ไขข้อมูล
+ */
 function getHistory() {
   showLoader();
   http
@@ -122,12 +108,18 @@ function getHistory() {
     });
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
+ */
 watch(modal, (status) => {
   if (status == true) {
     getHistory();
     filterKeyword.value = "";
   } else {
     filterKeyword.value = "";
+    rows.value = [];
   }
 });
 </script>

src/modules/04_registryPerson/components/detail/Other/02_Document.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
+import { useQuasar } from "quasar";
+import axios from "axios";
 
+import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import axios from "axios";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+
 import type { ArrayFileList } from "@/modules/04_registryPerson/interface/index/document";
+
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
@@ -21,12 +23,15 @@ const {
   dialogRemove,
 } = mixin;
 
-const documentFile = ref<any>(null);
-const fileList = ref<ArrayFileList[]>([]);
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
+const documentFile = ref<any>(null);
+const fileList = ref<ArrayFileList[]>([]); //รายการเอกสารหลักฐาน
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายการเอกสารหลักฐาน
+ */
 async function getData() {
   showLoader();
   await http
@@ -45,31 +50,8 @@ async function getData() {
 }
 
 /**
- * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ * ฟังก์ชั่นสร้าง Path สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
  */
-async function uploadFileDoc(uploadUrl: string, file: any) {
-  const Data = new FormData();
-  Data.append("file", documentFile.value);
-  showLoader();
-  await axios
-    .put(uploadUrl, file, {
-      headers: {
-        "Content-Type": file.type,
-      },
-    })
-    .then(async () => {
-      await getData();
-      success($q, "อัปโหลดไฟล์สำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-      documentFile.value = null;
-    });
-}
-
 function clickUpload(file: any) {
   const fileName = { fileName: file.name };
   dialogConfirm(
@@ -109,6 +91,32 @@ function clickUpload(file: any) {
   );
 }
 
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", documentFile.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async () => {
+      await getData();
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      documentFile.value = null;
+    });
+}
+
 /**
  * ดาวน์โหลดลิงก์ไฟล์
  * @param fileName file name