Refactoring code 09_leave

src/modules/09_leave/views/SpecialTimeMain.vue

@@ -1,34 +1,32 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-/** importType*/
-import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
-
-/** importComponents*/
-import DialogReason from "@/components/Dialogs/PopupReason.vue";
-import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
-
-/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
-
 import { checkPermission } from "@/utils/permissions";
 
+import type {
+  DataDateMonthObject,
+  DetailData,
+  Pagination,
+} from "@/modules/09_leave/interface/request/specialTime";
+
+import DialogReason from "@/components/Dialogs/PopupReason.vue";
+import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
+
 const dataSpecialTime = useSpecialTimeStore();
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
-
 const { hideLoader, monthYear2Thai, messageError, showLoader, success } = mixin;
-
 const emit = defineEmits(["update:change-page"]);
 
 /**ตัวแปรที่ใช้ */
-const modalUnapprove = ref(false);
-const modalApprove = ref(false);
-const detailData = ref<any>();
+const modalUnapprove = ref<boolean>(false);
+const modalApprove = ref<boolean>(false);
+const detailData = ref<DetailData[]>([]);
 const editCheck = ref<string>("");
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
@@ -38,6 +36,34 @@ const dateDialog = ref<string>("");
 const dateFixDialog = ref<string>("");
 const dateYear = ref<number>(new Date().getFullYear());
 
+/** Function Date */
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+
+// paging
+const currentPage = ref<number>(1);
+const pageSize = ref<number>(10);
+const initialPagination = ref<Pagination>({
+  sortBy: null,
+  descending: false,
+  page: 1,
+  rowsPerPage: pageSize.value, // set ตาม page หลักส่งมา
+});
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  dataSpecialTime.filter = filterKeyword.value;
+  dataSpecialTime.fetchData();
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+
 /**
  * ฟังก์ชั่นไม่อนุมัติ
  * @param fullname ชื่อ
@@ -59,7 +85,6 @@ function openModal(
   personId: string
 ) {
   id.value = personId;
-  console.log(personId);
   modalApprove.value = true;
   dateDialog.value = date;
   dateFixDialog.value = dateFix;
@@ -70,14 +95,14 @@ function openModal(
 }
 
 /** function closeDialog */
-const closeDialog = () => {
+function closeDialog() {
   modalUnapprove.value = false;
   modalApprove.value = false;
   editCheck.value = "PENDING";
-};
+}
 
 /** API reject */
-const clickSave = async (reason: string) => {
+async function clickSave(reason: string) {
   showLoader();
   modalUnapprove.value = false;
   const body = {
@@ -95,48 +120,14 @@ const clickSave = async (reason: string) => {
       await dataSpecialTime.fetchData();
       hideLoader();
     });
-};
+}
 
-// paging
-const pageSize = ref<number>(10);
-
-// Pagination - initial pagination
-const initialPagination = ref<any>({
-  sortBy: null,
-  descending: false,
-  page: 1,
-  rowsPerPage: pageSize, // set ตาม page หลักส่งมา
-});
-
-// Pagination - page & change page & get new data
-const currentPage = ref<number>(1);
-watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
-  async () => {
-    dataSpecialTime.page = currentPage.value;
-    await dataSpecialTime.fetchData();
-  }
-);
-
-// Pagination - update rowsPerPage
 async function updatePagination(initialPagination: any) {
   currentPage.value = 1;
   dataSpecialTime.pageSize = initialPagination.rowsPerPage;
   dataSpecialTime.page = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  dataSpecialTime.filter = filterKeyword.value;
-  dataSpecialTime.fetchData();
-  if (filterRef.value) {
-    filterRef.value.focus();
-  }
-};
-
 /** function ค้นหาข้อมูลแล้วอัปเดท*/
 function filterFn() {
   updatePagination(filterKeyword.value);
@@ -146,23 +137,33 @@ function filterFn() {
   dataSpecialTime.fetchData();
 }
 
-/** Function Date */
-const dateMonth = ref<any>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
-const updateMonth = async (e: DataDateMonthObject) => {
-  // console.log(dateMonth.value);
+/**
+ * ดึงข้อมูลตามปี
+ * @param e ปี
+ */
+async function updateMonth(e: DataDateMonthObject) {
   if (e != null) {
     dateYear.value = e.year;
     dateYear.value = dataSpecialTime.year;
     dataSpecialTime.month = dateMonth.value.month + 1;
     dataSpecialTime.year = dateMonth.value.year;
-    // filterKeyword.value = "";
     await dataSpecialTime.fetchData();
-    console.log(dateMonth);
   }
-};
+}
+
+//แปลงเดือนเป็นไทย
+function monthYearThai(val: any) {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+}
+
+watch(
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  async () => {
+    dataSpecialTime.page = currentPage.value;
+    await dataSpecialTime.fetchData();
+  }
+);
 
 /**Hook */
 onMounted(async () => {
@@ -174,12 +175,6 @@ onMounted(async () => {
   dataSpecialTime.year = yearToday;
   await dataSpecialTime.fetchData();
 });
-
-//แปลงเดือนเป็นไทย
-const monthYearThai = (val: any) => {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
-};
 </script>
 
 <template>