From bcb3c143a6f0286e54b6d705239f5d185d83c6a8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 7 Aug 2025 10:10:25 +0700
Subject: [PATCH] =?UTF-8?q?fix=20Clear=20timeout=20=20=E0=B8=95=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=89=E0=B8=87=E0=B8=84=E0=B9=88=E0=B8=B2=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=9A=20=E0=B8=AA=E0=B8=B3=E0=B8=A3=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/01_cardBackupRestore.vue       |  7 ++-
 src/modules/04_system/stores/main.ts          | 55 ++++++++++++++++---
 2 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/src/modules/04_system/components/01_cardBackupRestore.vue b/src/modules/04_system/components/01_cardBackupRestore.vue
index 1082c40a..7a1461e4 100644
--- a/src/modules/04_system/components/01_cardBackupRestore.vue
+++ b/src/modules/04_system/components/01_cardBackupRestore.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -32,6 +32,7 @@ const {
   fetchListBackup,
   backupRunningList,
   restoreRunningList,
+  stopAllPolling,
 } = useDataStore();
 const storeData = useDataStore();
 const {
@@ -160,6 +161,10 @@ onMounted(async () => {
   await restoreRunningList(() => {});
   dataMain.value = dataBackUp.value;
 });
+
+onUnmounted(() => {
+  stopAllPolling();
+});
 </script>
 
 <template>
diff --git a/src/modules/04_system/stores/main.ts b/src/modules/04_system/stores/main.ts
index 8d5abd1e..94df49d7 100644
--- a/src/modules/04_system/stores/main.ts
+++ b/src/modules/04_system/stores/main.ts
@@ -31,6 +31,9 @@ export const useDataStore = defineStore("systemStore", () => {
 
   const recordRestore = ref<Record<string, DataBackup>>({});
 
+  let backupTimeoutId: NodeJS.Timeout | null = null; // Timeout สำหรับการสำรองข้อมูล
+  let restoreTimeoutId: NodeJS.Timeout | null = null; // Timeout สำหรับการคืนค่า
+
   /**
    * ดึงข้อมูลรายการข้อมูลสำรอง
    */
@@ -131,6 +134,11 @@ export const useDataStore = defineStore("systemStore", () => {
    * @param cb
    */
   async function backupRunningList(cb: () => void) {
+    // Clear timeout
+    if (backupTimeoutId) {
+      clearTimeout(backupTimeoutId);
+      backupTimeoutId = null;
+    }
     await http
       .get<BackUpRunning[]>(config.API.backup + "/backup-running-list")
       .then(async (res) => {
@@ -142,10 +150,6 @@ export const useDataStore = defineStore("systemStore", () => {
           return;
         }
 
-        setTimeout(async () => {
-          backupRunningList(cb);
-        }, 3000);
-
         if (prevBackupRunTotal.value !== backupRunTotal.value) {
           res.data.forEach((item) => {
             const index = dataBackUp.value.findIndex((data) => {
@@ -166,6 +170,11 @@ export const useDataStore = defineStore("systemStore", () => {
 
           prevBackupRunTotal.value = backupRunTotal.value;
         }
+
+        // ตั้งเวลาเรียกใหม่
+        backupTimeoutId = setTimeout(() => {
+          backupRunningList(cb);
+        }, 3000);
       })
       .catch((err) => {
         messageError($q, err);
@@ -177,6 +186,12 @@ export const useDataStore = defineStore("systemStore", () => {
    * @param cb
    */
   async function restoreRunningList(cb: () => void) {
+    // Clear timeout
+    if (restoreTimeoutId) {
+      clearTimeout(restoreTimeoutId);
+      restoreTimeoutId = null;
+    }
+
     await http
       .get<BackUpRunning[]>(config.API.backup + "/restore-running-list")
       .then(async (res) => {
@@ -187,10 +202,6 @@ export const useDataStore = defineStore("systemStore", () => {
           return;
         }
 
-        setTimeout(async () => {
-          restoreRunningList(cb);
-        }, 3000);
-
         if (prevRestoreRunTotal.value !== restoreRunTotal.value) {
           for (const [key, value] of Object.entries(recordRestore.value)) {
             if (!res.data.find((v) => v.id === key))
@@ -200,6 +211,11 @@ export const useDataStore = defineStore("systemStore", () => {
 
           prevRestoreRunTotal.value = restoreRunTotal.value;
         }
+
+        // ตั้ง timeout
+        restoreTimeoutId = setTimeout(() => {
+          restoreRunningList(cb);
+        }, 3000);
       })
       .catch((err) => {
         messageError($q, err);
@@ -389,6 +405,28 @@ export const useDataStore = defineStore("systemStore", () => {
       });
   }
 
+  /** ฟังก์ชันหยุด polling สำหรับการสำรองข้อมูล */
+  function stopBackupPolling() {
+    if (backupTimeoutId) {
+      clearTimeout(backupTimeoutId);
+      backupTimeoutId = null;
+    }
+  }
+
+  /** ฟังก์ชันหยุด polling สำหรับการคืนค่า */
+  function stopRestorePolling() {
+    if (restoreTimeoutId) {
+      clearTimeout(restoreTimeoutId);
+      restoreTimeoutId = null;
+    }
+  }
+
+  /** ฟังก์ชันหยุดทั้งหมด */
+  function stopAllPolling() {
+    stopBackupPolling();
+    stopRestorePolling();
+  }
+
   return {
     dataBackUp,
 
@@ -407,6 +445,7 @@ export const useDataStore = defineStore("systemStore", () => {
 
     backupRunningList,
     restoreRunningList,
+    stopAllPolling,
 
     getSize,