diff --git a/pvc-vue/src/components/general/VMSearchBar.vue b/pvc-vue/src/components/general/VMSearchBar.vue index 507d5dd..fd61d99 100644 --- a/pvc-vue/src/components/general/VMSearchBar.vue +++ b/pvc-vue/src/components/general/VMSearchBar.vue @@ -186,6 +186,9 @@ onMounted(() => { searchText.value = savedSearchText; } + // Load saved filters + loadFiltersFromLocalStorage(); + // Initialize input value based on selected VM if (!props.showList && (props.selectedVM || props.vmFromUrl)) { inputValue.value = props.selectedVM || props.vmFromUrl; @@ -328,8 +331,11 @@ const clearSearch = () => { emit('update:modelValue', ''); emit('clear'); - // Focus the search input after clearing + // Scroll to selected VM after clearing search nextTick(() => { + scrollToSelectedVM(); + + // Focus the search input after clearing const searchInput = document.querySelector('.search-input'); if (searchInput) { searchInput.focus(); @@ -377,6 +383,7 @@ const toggleFilterMenu = () => { // Filter toggle const handleFilterToggle = (type, value) => { appliedFilters.value[type][value] = !appliedFilters.value[type][value]; + saveFiltersToLocalStorage(); }; // Reset filters @@ -387,6 +394,7 @@ const handleResetFilters = () => { Object.keys(appliedFilters.value.nodes).forEach(node => { appliedFilters.value.nodes[node] = false; }); + saveFiltersToLocalStorage(); showFilterMenu.value = false; }; @@ -454,6 +462,9 @@ watch([availableStates, availableNodes], ([states, nodes]) => { appliedFilters.value.nodes[node] = false; } }); + + // Save updated filters + saveFiltersToLocalStorage(); }); // Count active filters @@ -532,6 +543,27 @@ const scrollToSelectedVM = () => { } }); }; + +// Add localStorage persistence for filters +const saveFiltersToLocalStorage = () => { + localStorage.setItem('vmFilters', JSON.stringify(appliedFilters.value)); +}; + +const loadFiltersFromLocalStorage = () => { + const savedFilters = localStorage.getItem('vmFilters'); + if (savedFilters) { + try { + const parsedFilters = JSON.parse(savedFilters); + // Merge saved filters with current filters to handle new states/nodes + appliedFilters.value = { + states: { ...appliedFilters.value.states, ...parsedFilters.states }, + nodes: { ...appliedFilters.value.nodes, ...parsedFilters.nodes } + }; + } catch (e) { + console.error('Error parsing saved filters:', e); + } + } +};