Refactoring code module 04_system

src/modules/04_system/components/01_cardBackupRestore.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
+import { ref } from "vue";
 import { useQuasar } from "quasar";
 
 /**
  * importType
  */
 import type { QTableProps } from "quasar";
-import type { DataBackup } from "@/modules/04_system/interface/response/Main";
 
 /**
  * importStore
@@ -19,25 +18,12 @@ import { storeToRefs } from "pinia";
  * use
  */
 const $q = useQuasar();
-const { showLoader, hideLoader, date2Thai, dialogRemove, dialogConfirm } =
+const { showLoader, date2Thai, dialogRemove, dialogConfirm } =
   useCounterMixin();
-const {
-  fetchListBackup,
-  createBackUp,
-  restore,
-  deleteBackUp,
-  backupRunningList,
-  restoreRunningList,
-  getSize,
-} = useDataStore();
+const { createBackUp, restore, deleteBackUp } = useDataStore();
 const storeData = useDataStore();
 const { dataBackUp, backupRunTotal, restoreRunTotal } = storeToRefs(storeData);
 
-/**
- * props
- */
-const tab = defineModel<string>("tab", { required: true });
-
 /**
  * Table
  */
@@ -49,7 +35,7 @@ const visibleColumns = ref<string[]>([
   "storageSize",
   "status",
 ]);
-const baseColumns = ref<QTableProps["columns"]>([
+const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
@@ -64,32 +50,12 @@ const baseColumns = ref<QTableProps["columns"]>([
     align: "center",
     label: "วันที่สร้าง",
     sortable: true,
-    // field: (v) => date2Thai(v, false, true),
     field: "timestamp",
     format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  // {
-  //   name: "databaseSize",
-  //   align: "center",
-  //   label: "ขนาดของฐานข้อมูล ",
-  //   sortable: true,
-  //   // field: (v) => date2Thai(v, false, true),
-  //   field: "databaseSize",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
-  // {
-  //   name: "storageSize",
-  //   align: "center",
-  //   label: "ขนาดของไฟล์ ",
-  //   sortable: true,
-  //   // field: (v) => date2Thai(v, false, true),
-  //   field: "storageSize",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
+
   {
     name: "status",
     align: "center",
@@ -100,9 +66,6 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const columns = computed(() => {
-  return baseColumns.value;
-});
 
 /**
  * function สร้างรายการข้อมูลสำรอง

src/modules/04_system/components/02_cardAutoBackup.vue

@@ -35,32 +35,14 @@ const {
   dialogMessageNotify,
 } = useCounterMixin();
 const {
-  fetchListBackup,
-  createBackUp,
-  restore,
-  deleteBackUp,
-  backupRunningList,
-  restoreRunningList,
-
-  getSize,
-
   getSchedule,
   createSchedule,
   editSchedule,
   deleteSchedule,
-
   toggleSchedule,
 } = useDataStore();
 const storeData = useDataStore();
-const { dataBackUp, restoreRunTotal, dataSchedule } = storeToRefs(storeData);
-
-/**
- * props
- */
-
-/**
- * ref
- */
+const { restoreRunTotal, dataSchedule } = storeToRefs(storeData);
 
 const idEditSchedule = ref<string>("");
 const openDialog = ref<boolean>(false);
@@ -94,7 +76,7 @@ const visibleColumns = ref<string[]>([
   "startAt",
   "status",
 ]);
-const baseColumns = ref<QTableProps["columns"]>([
+const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
@@ -145,14 +127,6 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const columns = computed(() => {
-  return baseColumns.value;
-});
-
-/**
- * function assignDataformDataschedule() iรับค่าเข้า formDataschedule
- *
- */
 
 function assignDataformDataschedule(data: Schedule) {
   typeTime.value = data.time !== "" ? "set" : "start";
@@ -251,25 +225,8 @@ function onDelete(id: string) {
   });
 }
 
-/**
- * function คืนค่าข้อมูลสำรอง
- * @param id ข้อมูลสำรอง
- */
-function onRestore(id: string) {
-  dialogConfirm(
-    $q,
-    async () => {
-      await restore(id);
-    },
-    "ยืนยันการคืนค่าข้อมูลสำรอง",
-    "ต้องการยืนยันการคืนค่าข้อมูลสำรองนี้ใช่หรือไม่?"
-  );
-}
-
 const typeOnSubmit = ref<"edit" | "create">("create");
-const dateStart = ref<string>("");
 const typeTime = ref<string>("set");
-const timeStartEvery = ref<number>();
 const tab = ref<string>("daily");
 const tabItems = ref<ItemsTeb[]>([
   { name: "daily", label: "ทุกวัน", icon: "" },
@@ -312,10 +269,6 @@ function clearForm() {
   formDataschedule.value.schedule = "";
 }
 
-onMounted(async () => {
-  getSchedule();
-});
-
 watch(tab, () => {
   if (tab.value === formDataschedule.value.type) {
     formDataschedule.value = { ...prevFormDataschedule.value };
@@ -327,6 +280,10 @@ watch(tab, () => {
     typeTime.value = "set";
   }
 });
+
+onMounted(async () => {
+  getSchedule();
+});
 </script>
 
 <template>

src/modules/04_system/components/formSchedule .vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import {  watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 const { date2Thai } = useCounterMixin();
 
-const name = defineModel<string>("name");
+const name = defineModel<string>("name"); // ชื่อของข้อมูลสำรองใหม่
 const typeTime = defineModel<string>("typeTime", { default: "set" });
-const time = defineModel<string>("time");
+const time = defineModel<string>("time"); // กำหนดเวลา
 const timeStartEvery = defineModel<string>("timeStartEvery");
-const startAt = defineModel<any>("startAt", { default: new Date() });
-const selectDate = defineModel<string[]>("date", { default: [] });
-const tab = defineModel<string>("tab");
+const startAt = defineModel<any>("startAt", { default: new Date() }); // วันที่ - เวลาเริ่มการสำรองข้อมูล
+const selectDate = defineModel<string[]>("date", { default: [] }); // เลือกวัน
+const tab = defineModel<string>("tab"); // ตั้งตารางเวลา
 
 const timeStartEveryOptions: { value: string }[] = Array.from(
   { length: 24 },

src/modules/04_system/stores/main.ts

@@ -1,7 +1,9 @@
 import { defineStore } from "pinia";
+import { useQuasar } from "quasar";
+import moment from "moment";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import moment from "moment";
 
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -15,14 +17,8 @@ import type { ScheduleCreate } from "@/modules/04_system/interface/request/Main"
 import { ref } from "vue";
 
 const mixin = useCounterMixin();
-const {
-  dialogRemove,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogConfirm,
-} = mixin;
+const $q = useQuasar();
+const { messageError, showLoader, hideLoader } = mixin;
 
 export const useDataStore = defineStore("systemStore", () => {
   const dataBackUp = ref<DataBackup[]>([]);
@@ -35,11 +31,12 @@ export const useDataStore = defineStore("systemStore", () => {
 
   const recordRestore = ref<Record<string, DataBackup>>({});
 
+  /**
+   * ดึงข้อมูลรายการข้อมูลสำรอง
+   */
   async function fetchListBackup() {
     showLoader();
-
     const res = await http.get(config.API.backup);
-
     hideLoader();
     if (!res) return false;
 
@@ -57,18 +54,28 @@ export const useDataStore = defineStore("systemStore", () => {
     }
   }
 
+  /**
+   * สร้างข้อมูสำรอง
+   */
   async function createBackUp() {
     showLoader();
     await http
       .post(config.API.backup + "/create")
-      .then(async (res) => {
+      .then(async () => {
         await backupRunningList(fetchListBackup);
       })
+      .catch((err) => {
+        messageError($q, err);
+      })
       .finally(() => {
         hideLoader();
       });
   }
 
+  /**
+   * ลบรายการข้อมูลสำรอง
+   * @param filename ชื้่อข้อมูลสำรอง
+   */
   async function deleteBackUp(filename: string) {
     showLoader();
     await http
@@ -83,11 +90,18 @@ export const useDataStore = defineStore("systemStore", () => {
           });
         }
       })
+      .catch((err) => {
+        messageError($q, err);
+      })
       .finally(() => {
         hideLoader();
       });
   }
 
+  /**
+   * คืนค่ารายการข้อมูลสำรอง
+   * @param filename ชื้่อข้อมูลสำรอง
+   */
   async function restore(filename: string) {
     await http
       .post<string>(config.API.restore, {
@@ -105,9 +119,16 @@ export const useDataStore = defineStore("systemStore", () => {
         }
 
         restoreRunningList(fetchListBackup);
+      })
+      .catch((err) => {
+        messageError($q, err);
       });
   }
 
+  /**
+   * ทำการ BackUp ข้อมูสำรอง auto
+   * @param cb
+   */
   async function backupRunningList(cb: () => void) {
     await http
       .get<BackUpRunning[]>(config.API.backup + "/backup-running-list")
@@ -144,9 +165,16 @@ export const useDataStore = defineStore("systemStore", () => {
 
           prevBackupRunTotal.value = backupRunTotal.value;
         }
+      })
+      .catch((err) => {
+        messageError($q, err);
       });
   }
 
+  /**
+   * ทำการ คื่อต่า ข้อมูสำรอง  auto
+   * @param cb
+   */
   async function restoreRunningList(cb: () => void) {
     await http
       .get<BackUpRunning[]>(config.API.backup + "/restore-running-list")
@@ -171,6 +199,9 @@ export const useDataStore = defineStore("systemStore", () => {
 
           prevRestoreRunTotal.value = restoreRunTotal.value;
         }
+      })
+      .catch((err) => {
+        messageError($q, err);
       });
   }
 
@@ -243,6 +274,9 @@ export const useDataStore = defineStore("systemStore", () => {
     return "";
   }
 
+  /**
+   * ดึงข้อมูลรายการคืนค่า
+   */
   async function getSchedule() {
     showLoader();
     await http
@@ -265,11 +299,18 @@ export const useDataStore = defineStore("systemStore", () => {
           };
         });
       })
+      .catch((err) => {
+        messageError($q, err);
+      })
       .finally(() => {
         hideLoader();
       });
   }
 
+  /**
+   * สร้างข้อมูลสำรอง
+   * @param data  ข้อมูลตั้งเวลา
+   */
   async function createSchedule(data: ScheduleCreate) {
     showLoader();
     await http
@@ -281,11 +322,19 @@ export const useDataStore = defineStore("systemStore", () => {
       .then(async (res) => {
         return res.data;
       })
+      .catch((err) => {
+        messageError($q, err);
+      })
       .finally(() => {
         hideLoader();
       });
   }
 
+  /**
+   * แก้ไขข้อมูลสำรอง
+   * @param id id ที่ต้องการแก้ไข
+   * @param data  ข้อมูลตั้งเวลา
+   */
   async function editSchedule(id: string, data: ScheduleCreate) {
     showLoader();
     await http
@@ -298,6 +347,9 @@ export const useDataStore = defineStore("systemStore", () => {
       .then(async (res) => {
         return res.data;
       })
+      .catch((err) => {
+        messageError($q, err);
+      })
       .finally(() => {
         hideLoader();
       });
@@ -310,18 +362,27 @@ export const useDataStore = defineStore("systemStore", () => {
       .then(async (res) => {
         return res.data;
       })
+      .catch((err) => {
+        messageError($q, err);
+      })
       .finally(() => {
         hideLoader();
       });
   }
 
+  /**
+   * ลบข้อมูลสำรอง
+   * @param id id ที่ต้องการลบ   */
   async function deleteSchedule(id: string) {
     showLoader();
     await http
       .delete(config.API.backup + "/schedule/" + id)
-      .then(async (res) => {
+      .then(async () => {
         await fetchListBackup();
       })
+      .catch((err) => {
+        messageError($q, err);
+      })
       .finally(() => {
         hideLoader();
       });

src/modules/04_system/views/MainView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 
+import { useDataStore } from "@/modules/04_system/stores/main";
+import { storeToRefs } from "pinia";
 /**
  * import type
  */
@@ -9,11 +11,8 @@ import type { ItemsTeb } from "@/modules/04_system/interface/index/Main";
 /**
  * import components
  */
-import Card from "@/modules/04_system/components/cardBackupRestore.vue";
-import CardAutoBackup from "@/modules/04_system/components/cardAutoBackup.vue";
-
-import { useDataStore } from "@/modules/04_system/stores/main";
-import { storeToRefs } from "pinia";
+import Card from "@/modules/04_system/components/01_cardBackupRestore.vue"; // ข้อมูลสำรอง
+import CardAutoBackup from "@/modules/04_system/components/02_cardAutoBackup.vue"; // คืนค่า
 
 const { fetchListBackup, backupRunningList, restoreRunningList } =
   useDataStore();