mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-02-07 04:03:51 +00:00
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
This commit is contained in:
parent
4e8264f6e6
commit
f3948ce802
1 changed files with 12 additions and 6 deletions
|
@ -342,26 +342,32 @@ export default {
|
||||||
* Delete each selected monitor and update the UI once the deletion is complete.
|
* Delete each selected monitor and update the UI once the deletion is complete.
|
||||||
* This method initiates the deletion process for all selected monitors, updates
|
* This method initiates the deletion process for all selected monitors, updates
|
||||||
* the user interface, and reloads the page to reflect the changes.
|
* the user interface, and reloads the page to reflect the changes.
|
||||||
* @returns {void}
|
* @returns {void} - This function does not return any value.
|
||||||
*/
|
*/
|
||||||
deleteSelected() {
|
deleteSelected() {
|
||||||
// Delete each selected monitor
|
// Iterate over each selected monitor's ID and delete it
|
||||||
Object.keys(this.selectedMonitors).forEach(id => {
|
Object.keys(this.selectedMonitors).forEach(id => {
|
||||||
|
// Call the root method to delete the monitor by its ID
|
||||||
this.$root.deleteMonitor(id, (res) => {
|
this.$root.deleteMonitor(id, (res) => {
|
||||||
|
// If the monitor deletion is successful
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
// Remove the monitor from the selectedMonitors list upon successful deletion
|
// Remove the monitor from the selectedMonitors list upon successful deletion
|
||||||
delete this.selectedMonitors[id];
|
delete this.selectedMonitors[id];
|
||||||
|
|
||||||
// Refresh the page immediately after deleting the selected monitors
|
// Use Vue Router to navigate to a temporary route before redirecting to /dashboard
|
||||||
window.location.reload();
|
// 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));
|
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();
|
this.cancelSelectMode();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue