Add localStorage persistence for dashboard filter settings

- Save filter state (status, active, tags) to localStorage when changed
- Restore saved filters on component mount
- Include error handling for localStorage operations
- Maintain backward compatibility with existing filter functionality

Closes the gap in user experience by persisting filter preferences
across browser sessions on the dashboard monitor list.
This commit is contained in:
cfrei 2025-07-09 11:31:34 +02:00
parent f395222423
commit af6d532888

View file

@ -206,6 +206,7 @@ export default {
},
mounted() {
window.addEventListener("scroll", this.onScroll);
this.loadFilterState();
},
beforeUnmount() {
window.removeEventListener("scroll", this.onScroll);
@ -244,6 +245,7 @@ export default {
*/
updateFilter(newFilter) {
this.filterState = newFilter;
this.saveFilterState();
},
/**
* Deselect a monitor
@ -384,6 +386,41 @@ export default {
}
return m1.name.localeCompare(m2.name);
},
/**
* Save filter state to localStorage
* @returns {void}
*/
saveFilterState() {
try {
const filterData = {
status: this.filterState.status,
active: this.filterState.active,
tags: this.filterState.tags
};
localStorage.setItem("uptimeKumaFilters", JSON.stringify(filterData));
} catch (error) {
console.error("Failed to save filter state:", error);
}
},
/**
* Load filter state from localStorage
* @returns {void}
*/
loadFilterState() {
try {
const savedFilters = localStorage.getItem("uptimeKumaFilters");
if (savedFilters) {
const filterData = JSON.parse(savedFilters);
this.filterState = {
status: filterData.status || null,
active: filterData.active || null,
tags: filterData.tags || null
};
}
} catch (error) {
console.error("Failed to load filter state:", error);
}
}
},
};