From f3948ce802f2f2c232f3b740fb4b05fa244e2483 Mon Sep 17 00:00:00 2001
From: GJS <homelab.api@gmail.com>
Date: Mon, 30 Dec 2024 06:33:50 +0100
Subject: [PATCH] Refined: Improve monitor deletion process and UI update

- Replaced `window.location.reload()` with Vue Router navigation to a temporary route for smoother page reload.
- Added Vue Router redirection to `/dashboard` after monitor deletion for better user experience.
- Updated function documentation to clarify behavior and return type.

modified: src/components/MonitorList.vue
---
 src/components/MonitorList.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 6485230dd..06ea3f537 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -342,26 +342,32 @@ export default {
          * Delete each selected monitor and update the UI once the deletion is complete.
          * This method initiates the deletion process for all selected monitors, updates
          * the user interface, and reloads the page to reflect the changes.
-         * @returns {void}
+         * @returns {void} - This function does not return any value.
          */
         deleteSelected() {
-            // Delete each selected monitor
+            // Iterate over each selected monitor's ID and delete it
             Object.keys(this.selectedMonitors).forEach(id => {
+                // Call the root method to delete the monitor by its ID
                 this.$root.deleteMonitor(id, (res) => {
+                    // If the monitor deletion is successful
                     if (res.ok) {
                         // Remove the monitor from the selectedMonitors list upon successful deletion
                         delete this.selectedMonitors[id];
 
-                        // Refresh the page immediately after deleting the selected monitors
-                        window.location.reload();
+                        // Use Vue Router to navigate to a temporary route before redirecting to /dashboard
+                        // This reloads the page to reflect changes after deletion
+                        this.$router.push("/temp").then(() => {
+                            this.$router.push("/dashboard");
+                        });
 
-                        // Store a flag in localStorage to trigger a toast notification once the page reloads
+                        // Store a flag in localStorage to trigger a toast notification on page reload
+                        // This ensures the notification displays after the page refreshes
                         localStorage.setItem("toastMessage", JSON.stringify(res));
                     }
                 });
             });
 
-            // Exit selection mode as deletion is in progress
+            // Exit the selection mode, indicating that the deletion process is in progress
             this.cancelSelectMode();
         },