Refactoring code module 03_retire

src/modules/03_retire/views/main.vue

@@ -1,21 +1,28 @@
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onBeforeMount } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useRestDataStore } from "@/modules/03_retire/store";
-import Table from "@/components/Table.vue";
 
-const RestData = useRestDataStore();
-const { statusText } = RestData;
-const router = useRouter();
+import type {
+  MainList,
+  MainListResponse,
+} from "@/modules/03_retire/interface/Main";
+
 const $q = useQuasar();
+const router = useRouter();
 const mixin = useCounterMixin();
 const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const RestData = useRestDataStore();
+const { statusText } = RestData; //Func แปลง status to text
 
+const rows = ref<MainList[]>([]);
+const filter = ref<string>("");
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -23,11 +30,6 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-/**
- * เพิ่มหัวข้อตาราง
- */
-const rows = ref<any>([]);
-const filter = ref<string>("");
 const visibleColumns = ref<String[]>([
   "no",
   "placeLeave",
@@ -35,6 +37,7 @@ const visibleColumns = ref<String[]>([
   "dateLeave",
   "statustext",
 ]);
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -83,28 +86,13 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
- * ตั้งค่า pagination
- */
-const initialPagination = ref({
-  rowsPerPage: 0,
-});
-
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(() => {
-  fectListleave();
-});
-
-//นำข้อมูลมาแสดง
-const fectListleave = async () => {
-  showLoader();
+/** ดึงข้อมูล */
+async function fectListleave() {
   await http
     .get(config.API.listUser())
-    .then((res: any) => {
-      let data = res.data.result;
-      rows.value = data.map((e: any) => ({
+    .then(async (res) => {
+      let data = await res.data.result;
+      rows.value = data.map((e: MainListResponse) => ({
         id: e.id,
         placeLeave: e.location,
         dateStartLeave: date2Thai(e.sendDate),
@@ -116,41 +104,33 @@ const fectListleave = async () => {
     .catch((e: any) => {
       messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
-    });
-};
+    .finally(() => {});
+}
 
 /**
  * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มลาออก
  */
-const clickAdd = async () => {
+async function clickAdd() {
   router.push(`/retire/add`);
-};
+}
+
+/** ทำก่อน mounted */
+onBeforeMount(() => {
+  showLoader();
+});
 
 /**
- * กดเพื่อย้อนกลับ
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
-const clickBack = () => {
-  router.push(`/`);
-};
+onMounted(async () => {
+  await fectListleave();
+  hideLoader();
+});
 </script>
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <!-- <q-btn
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="clickBack"
-        /> -->
-        ขอลาออก
-      </div>
+      <div class="toptitle text-white col-12 row items-center">ขอลาออก</div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">
           <div class="q-pb-sm row">