Refactoring code module 06_retirement

src/modules/06_retirement/views/Main.vue

@@ -3,31 +3,41 @@ import { onMounted, ref, useAttrs, reactive, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStoreRetirement } from "@/modules/06_retirement/storeRetirement";
-import type { resMain } from "@/modules/06_retirement/interface/response/Main";
-import { storeToRefs } from "pinia";
-import popupAdd from "../components/ListRetirement/popupAdd.vue";
-
 import { checkPermission } from "@/utils/permissions";
 
-const useStoreRetire = useDataStoreRetirement();
-const { clickTab } = useStoreRetire;
-const { tab, type } = storeToRefs(useDataStoreRetirement());
-const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader, dialogConfirm } =
-  mixin;
-const router = useRouter();
-const $q = useQuasar(); //ใช้ noti quasar
+import type { resMain } from "@/modules/06_retirement/interface/response/Main";
 
-const fiscalyear = ref<number>();
+import popupAdd from "@/modules/06_retirement/components/ListRetirement/popupAdd.vue";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const router = useRouter();
+const mixin = useCounterMixin();
+const useStoreRetire = useDataStoreRetirement();
+const { tab, type } = storeToRefs(useDataStoreRetirement());
+const { clickTab } = useStoreRetire;
+const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+
+const fiscalyear = ref<number>(); // ปี
 const yearOptionsFilter = ref<any>({
   yearOptions: [],
 });
 const actionOption = ref<resMain[]>([]);
 
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const visibleColumns = ref<string[]>([
   "no",
   "signDate",
@@ -85,20 +95,10 @@ const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
 const yearOptions = ref<any>([{ id: "", year: "ทั้งหมด" }]);
 
-onMounted(async () => {
-  await fetchRetirement(type.value, currentYear);
-  // fiscalyear.value = currentYear + 543
-  //   await fetchRetirement(type.value, currentYear);
-});
 // หาปีปัจจุบัน
-const filteryear = () => {
-  //   yearOptions.value.push({ id: currentYear, name: currentYear + 543 });
-  //   yearOptionsFilter.value = [{ id: currentYear, name: currentYear + 543 }];
-  //   yearOptionsFilter.value.push({ id: currentYear, name: currentYear + 543 });
-  fetchRetirement(type.value, currentYear);
-};
+
 // ประกาศเกษียณอายุราชการ
-const fetchRetirement = async (type: string, year: any) => {
+async function fetchRetirement(type: string, year: any) {
   showLoader();
   await http
     .get(config.API.retirement(type, year))
@@ -155,57 +155,58 @@ const fetchRetirement = async (type: string, year: any) => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 const checkjson = ref<boolean>();
 // เช็คสถานะ document ของประกาศเกษียณอายุราชการ
-const checkststus = (data: any) => {
+function checkststus(data: any) {
   let jsonfasle = data.find((e: any) => e.document == false);
   if (jsonfasle) {
     checkjson.value = true;
   } else checkjson.value = false;
-};
+}
 
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
-const resetFilter = () => {
+
+/** reset ฟิลเตอร์ */
+function resetFilter() {
   filterKeyword.value = "";
   filterRef.value.focus();
-};
-const attrs = ref<any>(useAttrs());
+}
 
-const paging = ref<boolean>(true);
-const pagination = ref({
-  sortBy: "",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const filterSelector = (val: any, update: Function) => {
+/**
+ * ฟังชั่นฟิลเตอร์ input
+ * @param val input
+ * @param update Function quasar
+ */
+function filterSelector(val: any, update: Function) {
   update(() => {
     yearOptions.value = yearOptionsFilter.value.filter(
       (v: any) => v.year.indexOf(val) > -1
     );
   });
-};
+}
 
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const nextPage = (prop: any) => {
+/**
+ * ไปหน้าแก้ไขรายละเอียด
+ * @param prop ข้อมูล
+ */
+function nextPage(prop: any) {
   router.push(`/retirement/${prop.id}`);
-};
-const nextPageDetail = (prop: any) => {
-  router.push(`/retirement-detail/${prop.id}`);
-};
+}
 
-watch(type, () => {
-  fetchRetirement(type.value, currentYear);
-});
-//เปลี่ยนสถานะ
-const typeReportChangeName = (val: string) => {
+/**
+ * ไปหน้ารายละเอียด
+ * @param prop ข้อมูล
+ */
+function nextPageDetail(prop: any) {
+  router.push(`/retirement-detail/${prop.id}`);
+}
+
+/** แปลง status เป็น text */
+function typeReportChangeName(val: string) {
   switch (val) {
     case "EDIT":
       return "ประกาศแก้ไขเกษียณ";
@@ -216,7 +217,15 @@ const typeReportChangeName = (val: string) => {
     default:
       return "ประกาศข้อมูลเกษียณ";
   }
-};
+}
+
+watch(type, () => {
+  fetchRetirement(type.value, currentYear);
+});
+
+onMounted(async () => {
+  await fetchRetirement(type.value, currentYear);
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -345,7 +354,6 @@ const typeReportChangeName = (val: string) => {
                 class="custom-header-table"
                 v-bind="attrs"
                 :visible-columns="visibleColumns"
-                :pagination-label="paginationLabel"
                 v-model:pagination="pagination"
               >
                 <template v-slot:header="props">