Refactoring code module 13_portfolio

src/modules/13_portfolio/interface/Main.ts

@@ -0,0 +1,13 @@
+interface PortfolioRowsType {
+  id: string;
+  createdAt: Date | null;
+  lastUpdatedAt: Date | null;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+  detail: string;
+}
+
+export type {
+    PortfolioRowsType
+}

src/modules/13_portfolio/views/Add.vue

@@ -2,14 +2,14 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+import axios from "axios";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import axios from "axios";
+import { useCounterMixin } from "@/stores/mixin";
-import type { QForm } from "quasar";
 
-const router = useRouter();
 const $q = useQuasar();
+const router = useRouter();
 const mixin = useCounterMixin();
 const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 
@@ -18,22 +18,12 @@ const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
  */
 const route = useRoute();
 const files = ref<any>();
-const name = ref("");
+const name = ref<string>("");
-const detail = ref("");
+const detail = ref<string>("");
 const id = ref<string>("");
 const routeName = router.currentRoute.value.name;
 const fileList = ref<any[]>([]);
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(() => {
-  if (route.params.id !== undefined) {
-    id.value = route.params.id.toString();
-    fecthData(id.value);
-  }
-});
-
 const saveData = async () => {
   dialogConfirm(
     $q,
@@ -174,6 +164,16 @@ function fileOpen(fileName: string) {
       hideLoader();
     });
 }
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(() => {
+  if (route.params.id !== undefined) {
+    id.value = route.params.id.toString();
+    fecthData(id.value);
+  }
+});
 </script>
 
 <template>

src/modules/13_portfolio/views/Main.vue

@@ -2,23 +2,17 @@
 import type { QTableProps } from "quasar";
 import { ref, onMounted } 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 { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 
-const currentPage = ref<number>(1);
+import type { PortfolioRowsType } from "@/modules/13_portfolio/interface/Main";
-const router = useRouter();
 const $q = useQuasar();
+const router = useRouter();
 const mixin = useCounterMixin();
-const {
+const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogRemove,
-  success,
-} = mixin;
 
 const pagination = ref({
   sortBy: "desc",
@@ -30,7 +24,7 @@ const pagination = ref({
  * เพิ่มหัวข้อตาราง
  */
 const filter = ref<string>("");
-const rows = ref<any>([]);
+const rows = ref<PortfolioRowsType[]>([]);
 const visibleColumns = ref<String[]>(["no", "name", "detail"]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -62,19 +56,12 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-  await fecthList();
-});
-
 //นำข้อมูลมาแสดง
-const fecthList = async () => {
+async function fecthList() {
   showLoader();
   await http
     .get(config.API.portfolio)
-    .then((res: any) => {
+    .then((res) => {
       rows.value = res.data.result;
     })
     .catch((e: any) => {
@@ -83,22 +70,26 @@ const fecthList = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 /**
  * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
  */
-const clickAdd = async () => {
+async function clickAdd() {
   router.push(`/portfolio/add`);
-};
+}
 
 /**
  * ฟังก์ชั่นกดย้อนกลับ
  */
-const clickBack = () => {
+function clickBack() {
   router.push(`/`);
-};
+}
 
+/**
+ * ฟั่งชั้น ลบ ข้อมูล
+ * @param id id row
+ */
 function onDelete(id: string) {
   dialogRemove($q, () => {
     showLoader();
@@ -114,6 +105,13 @@ function onDelete(id: string) {
       });
   });
 }
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  await fecthList();
+});
 </script>
 
 <template>