From 1a6bf9f3b2359487f8c800ebdb460ba4149ed00b Mon Sep 17 00:00:00 2001
From: GJS <homelab.api@gmail.com>
Date: Sat, 28 Dec 2024 15:46:32 +0100
Subject: [PATCH] Added: Delete functionality for selected monitor(s) in
 `MonitorList.vue`

- Added a delete button to the selection controls for deleting selected monitor(s).
- Integrated a confirmation dialog (`confirmDeleteSelected`) with the message `deleteSelectedMonitorMsg`.
- Implemented `deleteSelectedDialog` to trigger the confirmation dialog.
- Created `deleteSelected` method to handle monitor deletion and update the selection state.
- Implemented toast notifications for feedback on the deletion status.
- Added page reload mechanism to reflect the deletion of monitors after all selected monitors are removed.
- Ensured consistent functionality with existing selection and action methods.

modified: src/components/MonitorList.vue
---
 src/components/MonitorList.vue | 48 ++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index a579316b3..55da9518a 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -39,6 +39,7 @@
 
                 <button class="btn-outline-normal" @click="pauseDialog"><font-awesome-icon icon="pause" size="sm" /> {{ $t("Pause") }}</button>
                 <button class="btn-outline-normal" @click="resumeSelected"><font-awesome-icon icon="play" size="sm" /> {{ $t("Resume") }}</button>
+                <button class="btn-outline-normal text-danger" @click="deleteSelectedDialog"><font-awesome-icon icon="trash" size="sm" /> {{ $t("Delete") }}</button>
 
                 <span v-if="selectedMonitorCount > 0">
                     {{ $t("selectedMonitorCount", [ selectedMonitorCount ]) }}
@@ -64,9 +65,13 @@
         </div>
     </div>
 
+    <!-- Confirm Dialogs -->
     <Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="pauseSelected">
         {{ $t("pauseMonitorMsg") }}
     </Confirm>
+    <Confirm ref="confirmDeleteSelected" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteSelected">
+        {{ $t("deleteSelectedMonitorMsg") }}
+    </Confirm>
 </template>
 
 <script>
@@ -306,6 +311,49 @@ export default {
 
             this.cancelSelectMode();
         },
+
+        /**
+         * Show the confirmation dialog for deleting the selected monitors.
+         * This method triggers the display of a confirmation modal where the user can
+         * confirm or cancel the deletion of the selected monitors.
+         * @returns {void}
+         */
+        deleteSelectedDialog() {
+            // Show the confirmation dialog for deletion
+            this.$refs.confirmDeleteSelected.show();
+        },
+
+        /**
+         * 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}
+         */
+        deleteSelected() {
+            // Delete each selected monitor
+            Object.keys(this.selectedMonitors).forEach(id => {
+                this.$root.deleteMonitor(id, (res) => {
+                    // Display a response message for the operation
+                    this.$root.toastRes(res);
+
+                    // Remove the monitor from the selection if deletion is successful
+                    if (res.ok) {
+                        delete this.selectedMonitors[id];
+                    }
+                });
+            });
+
+            // Delay for UI updates before reloading the page
+            setTimeout(() => {
+                if (!Object.keys(this.selectedMonitors).length) {
+                    window.location.reload(); // Refresh the page to show updates
+                }
+            }, 5000);
+
+            // Exit selection mode as deletion is in progress
+            this.cancelSelectMode();
+        },
+
         /**
          * Whether a monitor should be displayed based on the filters
          * @param {object} monitor Monitor to check