Refactoring code module 04_registryPerson

src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
 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 DialogHeader from "@/components/DialogHeader.vue";
-import DialogHisotory from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
-
 import type { QTableProps } from "quasar";
 import type { RowList } from "@/modules/04_registryPerson/interface/index/salary";
 import type { RequestNoPaidObject } from "@/modules/04_registryPerson/interface/request/Salary";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHisotory from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const {
@@ -25,17 +26,29 @@ const {
   success,
   pathRegistryEmp,
 } = useCounterMixin();
+
 const id = ref<string>("");
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const modelView = ref<string>("table");
-const modalDialog = ref<boolean>(false);
-const modalHistory = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-const rows = ref<RowList[]>([]);
+const modelView = ref<string>("table"); //การแสดงผล Table,Card
+const modalDialog = ref<boolean>(false); //แสดง popup บันทึกวันที่ไม่ได้รับเงินเดือนฯ
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ
+const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไจข้อมูล
+
+const formData = reactive<RequestNoPaidObject>({
+  date: null, //วัน/เดือน/ปี
+  reference: "", //เอกสารอ้างอิง
+  detail: "", //รายละเอียด
+  refCommandNo: "", //เลขที่คำสั่ง
+  refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)'
+});
+
+//Table
+const rows = ref<RowList[]>([]); //รายการ
+const keyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -103,15 +116,6 @@ const visibleColumns = ref<string[]>([
   "refCommandNo",
   "refCommandDate",
 ]);
-const formData = reactive<RequestNoPaidObject>({
-  date: null,
-  reference: "",
-  detail: "",
-  refCommandNo: "",
-  refCommandDate: null,
-});
-
-const keyword = ref<string>("");
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
@@ -153,12 +157,12 @@ function onClickCloseDialog() {
 /**
  * function fetch รายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ
  */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewNoPaidByProfileId(profileId.value, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
+    .then(async (res) => {
+      rows.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -181,8 +185,8 @@ function saveData() {
     })
     .then(async () => {
       await getData();
-      onClickCloseDialog();
       await success($q, "บันทึกข้อมูลสำเร็จ");
+      onClickCloseDialog();
     })
     .catch((e) => {
       messageError($q, e);
@@ -204,8 +208,8 @@ function editData() {
     })
     .then(async () => {
       await getData();
-      onClickCloseDialog();
       await success($q, "บันทึกข้อมูลสำเร็จ");
+      onClickCloseDialog();
     })
     .catch((e) => {
       messageError($q, e);
@@ -223,6 +227,9 @@ function onClickHistory(rowId: string) {
   modalHistory.value = true;
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   getData();
 });