Refactoring code module 11_discipline

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -1,32 +1,24 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted, watch } from "vue";
-
-import router from "@/router";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, useAttrs, onMounted, watch } from "vue";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
-
+import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import { checkPermission } from "@/utils/permissions";
 
-const dataInvestigate = useInvestigateFactStore();
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
-const option = ref<any[]>(dataInvestigate.statusOptions);
 const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const dataInvestigate = useInvestigateFactStore();
+const { messageError, showLoader, hideLoader } = mixin;
+
+const option = ref<any[]>(dataInvestigate.statusOptions);
 
 /** ค้นหาข้อมูลในตาราง */
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
-function resetFilter() {
-  filterKeyword.value = "";
-  if (filterRef.value) {
-    filterRef.value.focus();
-    getList();
-  }
-}
 const statusFilter = ref<string>("NEW");
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
@@ -43,23 +35,18 @@ const pagination = ref({
   rowsPerPage: rowsPerPage.value,
 });
 
-watch(
-  () => currentPage.value,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
+const attrs = ref<any>(useAttrs());
+
+/** ล้างค่า Input  */
+function resetFilter() {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
     getList();
   }
-);
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    currentPage.value = 1;
-    getList();
-  }
-);
+}
 
+/** ดึงข้อมูลบสวน */
 async function getList() {
   showLoader();
   await http
@@ -86,8 +73,6 @@ async function getList() {
     });
 }
 
-const attrs = ref<any>(useAttrs());
-
 /**
  * ไปหน้าแก้ไข
  * @param id ไอดีเฉพาะ รายบุคคล
@@ -105,10 +90,6 @@ async function detailPage(id: string) {
   router.push(`/discipline-detail/investigatefacts/${id}`);
 }
 
-function filterFn() {
-  getList();
-}
-
 /**
  * function ค้นหาข้อมูลใน option
  * @param val คำค้นหา
@@ -123,6 +104,23 @@ function filterOptionFn(val: string, update: Function) {
   });
 }
 
+watch(
+  () => currentPage.value,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getList();
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    currentPage.value = 1;
+    getList();
+  }
+);
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -180,7 +178,7 @@ onMounted(async () => {
         ref="filterRef"
         outlined
         placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
+        @keydown.enter.prevent="getList()"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />