เพิ่ม ปุ่ม Refresh BackUp

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 
 /**
  * import type
@@ -12,6 +12,10 @@ import type { ItemsTeb } from "@/modules/04_system/interface/index/Main";
 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";
+
+const { fetchListBackup, backupRunningList, restoreRunningList } =
+  useDataStore();
 /**
  * ตัวแปร
  */
@@ -20,6 +24,12 @@ const tabItems = ref<ItemsTeb[]>([
   { name: "backup", label: "Backup & Restore", icon: "mdi-database" },
   { name: "autoBackUp", label: "Schedule ", icon: "mdi-clock-outline" },
 ]);
+
+onMounted(async () => {
+  await fetchListBackup();
+  await backupRunningList(fetchListBackup);
+  await restoreRunningList(() => {});
+});
 </script>
 
 <template>
@@ -43,8 +53,19 @@ const tabItems = ref<ItemsTeb[]>([
     <q-separator />
     <q-tab-panels v-model="tab" animated class="shadow-2 rounded-borders">
       <q-tab-panel name="backup">
-        <q-card-section class="q-pa-none">
+        <q-card-section class="q-pa-none row items-center justify-between">
           <div class="text-h6">ข้อมูลสำรอง</div>
+          <div class="q-pr-md">
+            <q-tooltip>Refresh</q-tooltip>
+            <q-btn
+              dense
+              round
+              size="12px"
+              color="primary"
+              icon="mdi-refresh"
+              @click="fetchListBackup()"
+            />
+          </div>
         </q-card-section>
 
         <Card :tab="tab" />