From ca545fd4b89ea8eb30b169f41bc98e8133d4a258 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Wed, 15 Oct 2025 20:25:01 +0800
Subject: [PATCH] feat: add auto-refresh with countdown to MembersList

- Auto-refresh members list every 10 seconds
- Display countdown timer in refresh buttons
- Manual refresh resets countdown to 10 seconds
---
 src/components/MembersList.vue | 68 +++++++++++++++++++++++++++++++---
 1 file changed, 62 insertions(+), 6 deletions(-)

diff --git a/src/components/MembersList.vue b/src/components/MembersList.vue
index ef3106fe..9dedec28 100644
--- a/src/components/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -59,11 +59,12 @@
          -->
         <button
           class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
-          title="Refresh members list"
-          @click="fetchMembers"
+          title="Refresh members list now"
+          @click="manualRefresh"
         >
           <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
-          Refresh <span class="text-xs">(10s)</span>
+          Refresh
+          <span class="text-xs">({{ countdownTimer }}s)</span>
         </button>
 
         <button
@@ -155,11 +156,12 @@
          -->
         <button
           class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
-          title="Refresh members list"
-          @click="fetchMembers"
+          title="Refresh members list now"
+          @click="manualRefresh"
         >
           <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
-          Refresh <span class="text-xs">(10s)</span>
+          Refresh
+          <span class="text-xs">({{ countdownTimer }}s)</span>
         </button>
 
         <button
@@ -243,6 +245,11 @@ export default class MembersList extends Vue {
   apiServer = "";
   contacts: Array<Contact> = [];
 
+  // Auto-refresh functionality
+  countdownTimer = 10;
+  autoRefreshInterval: NodeJS.Timeout | null = null;
+  lastRefreshTime = 0;
+
   /**
    * Get the unnamed member constant
    */
@@ -264,6 +271,9 @@ export default class MembersList extends Vue {
     this.firstName = settings.firstName || "";
     await this.fetchMembers();
     await this.loadContacts();
+
+    // Start auto-refresh
+    this.startAutoRefresh();
   }
 
   async refreshData() {
@@ -576,6 +586,52 @@ export default class MembersList extends Vue {
       -1,
     ); // -1 means no auto-dismiss, stays open until user acts
   }
+
+  startAutoRefresh() {
+    this.lastRefreshTime = Date.now();
+    this.countdownTimer = 10;
+
+    this.autoRefreshInterval = setInterval(() => {
+      const now = Date.now();
+      const timeSinceLastRefresh = (now - this.lastRefreshTime) / 1000;
+
+      if (timeSinceLastRefresh >= 10) {
+        // Time to refresh
+        this.fetchMembers();
+        this.lastRefreshTime = now;
+        this.countdownTimer = 10;
+      } else {
+        // Update countdown
+        this.countdownTimer = Math.max(
+          0,
+          Math.round(10 - timeSinceLastRefresh),
+        );
+      }
+    }, 1000); // Update every second
+  }
+
+  stopAutoRefresh() {
+    if (this.autoRefreshInterval) {
+      clearInterval(this.autoRefreshInterval);
+      this.autoRefreshInterval = null;
+    }
+  }
+
+  manualRefresh() {
+    // Clear existing auto-refresh interval
+    if (this.autoRefreshInterval) {
+      clearInterval(this.autoRefreshInterval);
+      this.autoRefreshInterval = null;
+    }
+
+    // Trigger immediate refresh and restart timer
+    this.fetchMembers();
+    this.startAutoRefresh();
+  }
+
+  beforeDestroy() {
+    this.stopAutoRefresh();
+  }
 }
 </script>