From 198e99e34f2a96c9252becfe7a602301221916bf Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Thu, 21 Mar 2024 14:12:34 +0100
Subject: [PATCH] FIX the add and remove login page updating

---
 .../server-management/MultiServerScreen.vue   |  3 +++
 .../components/login-form/LoginForm.vue       |  1 +
 .../components/saved-servers/ServerPanel.vue  | 22 +++++++++----------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/launcher/src/components/UI/server-management/MultiServerScreen.vue b/launcher/src/components/UI/server-management/MultiServerScreen.vue
index c4fd9fb0c..50808e56d 100644
--- a/launcher/src/components/UI/server-management/MultiServerScreen.vue
+++ b/launcher/src/components/UI/server-management/MultiServerScreen.vue
@@ -9,6 +9,7 @@ import ServerHeader from './components/ServerHeader.vue';
     />
     <ServerHeader @tab-picker="tabPicker" />
     <ServerBody
+      :key="serverBodyComponentKey"
       @server-login="loginHandler"
       @select-server="serverHandler"
       @change-password="acceptChangePass"
@@ -53,6 +54,7 @@ const router = useRouter();
 const keyLocation = ref("");
 let loginAbortController = new AbortController();
 console.log("Server Management Screen", loginAbortController);
+const serverBodyComponentKey = ref(0);
 
 watchEffect(() => {
   serverStore.setActiveState("isServerDetailsActive");
@@ -209,6 +211,7 @@ const removeServerHandler = async () => {
   await remove();
   serverStore.isRemoveProcessing = false;
   serverStore.isRemoveModalActive = false;
+  serverBodyComponentKey.value++;
 };
 
 //SSH Key Management
diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index f435dafc4..b898546a8 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -511,6 +511,7 @@ const IpScanLan1 = async () => {
 
 const saveServer = async () => {
   await add();
+  //reload the page
 };
 
 const removeServer = () => {
diff --git a/launcher/src/components/UI/server-management/components/saved-servers/ServerPanel.vue b/launcher/src/components/UI/server-management/components/saved-servers/ServerPanel.vue
index e9cb333da..dbe0b715f 100644
--- a/launcher/src/components/UI/server-management/components/saved-servers/ServerPanel.vue
+++ b/launcher/src/components/UI/server-management/components/saved-servers/ServerPanel.vue
@@ -88,19 +88,17 @@ const getFilteredServers = () => {
   );
 };
 
-// Recompute filteredServers when searchQuery changes
-watch(searchQuery, () => {
-  filteredServers.value = null;
-  setTimeout(() => {
-    filteredServers.value = getFilteredServers();
-  }, 10);
-});
-
+// Watch for changes in both searchQuery and serverStore.refreshServers
 watch(
-  () => serverStore.refreshServers,
-  async () => {
-    await loadStoredConnections();
-  }
+  [searchQuery, () => serverStore.refreshServers],
+  async ([, refreshTrigger], [, oldRefreshTrigger]) => {
+    if (refreshTrigger !== oldRefreshTrigger) {
+      await loadStoredConnections();
+    }
+
+    filteredServers.value = getFilteredServers();
+  },
+  { deep: true }
 );
 
 //Lifecycle Hooks