filter ==> ตั้งค่าระบบ

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

@@ -1,32 +1,43 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
-/**
- * importType
- */
+/** importType*/
 import type { QTableProps } from "quasar";
+import type { DataBackup } from "@/modules/04_system/interface/response/Main";
 
-/**
- * importStore
- */
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/modules/04_system/stores/main";
 import { storeToRefs } from "pinia";
 
-/**
- * use
- */
+/** use*/
 const $q = useQuasar();
-const { showLoader, date2Thai, dialogRemove, dialogConfirm } =
-  useCounterMixin();
-const { createBackUp, restore, deleteBackUp } = useDataStore();
+const {
+  showLoader,
+  date2Thai,
+  dialogRemove,
+  dialogConfirm,
+  onSearchDataTable,
+} = useCounterMixin();
+const {
+  createBackUp,
+  restore,
+  deleteBackUp,
+  fetchListBackup,
+  backupRunningList,
+  restoreRunningList,
+} = useDataStore();
 const storeData = useDataStore();
-const { dataBackUp, backupRunTotal, restoreRunTotal } = storeToRefs(storeData);
+const {
+  dataBackUp,
+  backupRunTotal,
+  restoreRunTotal,
+  prevBackupRunTotal,
+  prevRestoreRunTotal,
+} = storeToRefs(storeData);
 
-/**
- * Table
- */
+/** Table*/
 const filter = ref<string>("");
 const visibleColumns = ref<string[]>([
   "name",
@@ -67,9 +78,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
- * function สร้างรายการข้อมูลสำรอง
- */
+/** function สร้างรายการข้อมูลสำรอง*/
 function onCreateBackup() {
   dialogConfirm(
     $q,
@@ -107,6 +116,25 @@ function onRestore(name: string) {
     "ต้องการยืนยันการคืนค่าข้อมูลสำรองนี้ใช่หรือไม่?"
   );
 }
+
+const dataMain = ref<DataBackup[]>([]);
+
+function serchDataTable() {
+  dataBackUp.value = onSearchDataTable(
+    filter.value,
+    dataMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+onMounted(async () => {
+  prevBackupRunTotal.value = -1;
+  prevRestoreRunTotal.value = -1;
+  await fetchListBackup();
+  await backupRunningList(fetchListBackup);
+  await restoreRunningList(() => {});
+  dataMain.value = dataBackUp.value;
+});
 </script>
 
 <template>
@@ -127,10 +155,10 @@ function onRestore(name: string) {
       <q-input
         borderless
         dense
-        debounce="300"
         outlined
         v-model="filter"
         placeholder="ค้นหา"
+        @keydown.enter.pervent="serchDataTable"
       >
         <template v-slot:append>
           <q-icon name="search" />
@@ -156,7 +184,6 @@ function onRestore(name: string) {
       :columns="columns"
       row-key="name"
       :visible-columns="visibleColumns"
-      :filter="filter"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

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

@@ -33,6 +33,7 @@ const {
   dialogRemove,
   dialogConfirm,
   dialogMessageNotify,
+  onSearchDataTable,
 } = useCounterMixin();
 const {
   getSchedule,
@@ -112,8 +113,10 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "วันที่เริ่มการสำรองข้อมูล",
     sortable: true,
-    field: (v) => date2Thai(v, false, true),
-
+    field: "startAt",
+    format(val, row) {
+      return date2Thai(val, false, true);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -268,6 +271,14 @@ function clearForm() {
   formDataschedule.value.time = "";
   formDataschedule.value.schedule = "";
 }
+const dataMain = ref<Schedule[]>([]);
+function serchDataTable() {
+  dataSchedule.value = onSearchDataTable(
+    filter.value,
+    dataMain.value,
+    columns.value ? columns.value : []
+  );
+}
 
 watch(tab, () => {
   if (tab.value === formDataschedule.value.type) {
@@ -282,7 +293,8 @@ watch(tab, () => {
 });
 
 onMounted(async () => {
-  getSchedule();
+  await getSchedule();
+  dataMain.value = dataSchedule.value;
 });
 </script>
 
@@ -309,10 +321,10 @@ onMounted(async () => {
       <q-input
         borderless
         dense
-        debounce="300"
         outlined
         v-model="filter"
         placeholder="ค้นหา"
+        @keydown.enter.pervent="serchDataTable"
       >
         <template v-slot:append>
           <q-icon name="search" />
@@ -338,7 +350,6 @@ onMounted(async () => {
       :columns="columns"
       row-key="name"
       :visible-columns="visibleColumns"
-      :filter="filter"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

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

@@ -35,22 +35,23 @@ export const useDataStore = defineStore("systemStore", () => {
    * ดึงข้อมูลรายการข้อมูลสำรอง
    */
   async function fetchListBackup() {
-    showLoader();
-    const res = await http.get(config.API.backup);
-    hideLoader();
-    if (!res) return false;
+    try {
+      showLoader();
+      const res = await http.get(config.API.backup);
 
-    if (res.status === 200) {
-      dataBackUp.value = await res.data;
-
-      dataBackUp.value = dataBackUp.value.map((item) => {
-        return {
-          ...item,
-          status: "สำเร็จ",
-        };
-      });
-
-      return res.status;
+      if (!res) return false;
+      if (res.status === 200) {
+        dataBackUp.value = await res.data;
+        dataBackUp.value = dataBackUp.value.map((item) => {
+          return {
+            ...item,
+            status: "สำเร็จ",
+          };
+        });
+        return res.status;
+      }
+    } finally {
+      hideLoader();
     }
   }
 

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

@@ -1,27 +1,22 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 
-import { useDataStore } from "@/modules/04_system/stores/main";
-import { storeToRefs } from "pinia";
-/**
- * import type
- */
+// import { useDataStore } from "@/modules/04_system/stores/main";
+// import { storeToRefs } from "pinia";
+
+/** import type*/
 import type { ItemsTeb } from "@/modules/04_system/interface/index/Main";
 
-/**
- * import components
- */
+/** import components*/
 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();
+// const { fetchListBackup, backupRunningList, restoreRunningList } =
+//   useDataStore();
 
-/**
- * ตัวแปร
- */
-const storeData = useDataStore();
-const { prevBackupRunTotal, prevRestoreRunTotal } = storeToRefs(storeData);
+/** ตัวแปร*/
+// const storeData = useDataStore();
+// const { prevBackupRunTotal, prevRestoreRunTotal } = storeToRefs(storeData);
 
 const tab = ref<string>("backup");
 const tabItems = ref<ItemsTeb[]>([
@@ -29,13 +24,13 @@ const tabItems = ref<ItemsTeb[]>([
   { name: "autoBackUp", label: "Schedule ", icon: "mdi-clock-outline" },
 ]);
 
-onMounted(async () => {
-  prevBackupRunTotal.value = -1;
-  prevRestoreRunTotal.value = -1;
-  await fetchListBackup();
-  await backupRunningList(fetchListBackup);
-  await restoreRunningList(() => {});
-});
+// onMounted(async () => {
+//   prevBackupRunTotal.value = -1;
+//   prevRestoreRunTotal.value = -1;
+//   await fetchListBackup();
+//   await backupRunningList(fetchListBackup);
+//   await restoreRunningList(() => {});
+// });
 </script>
 
 <template>