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">