parallelvirtualcluster/pvc-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix search filtering bug

Browse Source
This commit is contained in:
Joshua Boniface 2025-03-02 14:03:48 -05:00
parent 493dd94f21
commit bcf0e98b54
1 changed files with 42 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
pvc-vue/src/components/general/VMSearchBar.vue
View File

@ -180,6 +180,9 @@ const inputValue = ref('');
// Add a ref to the VM list container // Add a ref to the VM list container
const vmListContainer = ref(null); const vmListContainer = ref(null);
// Add a ref to store the last search query
const lastSearchQuery = ref('');
// Watch both showList and selectedVM to update input value // Watch both showList and selectedVM to update input value
watch([() => props.showList, () => props.selectedVM, () => props.vmFromUrl, () => props.modelValue], watch([() => props.showList, () => props.selectedVM, () => props.vmFromUrl, () => props.modelValue],
([showList, selectedVM, vmFromUrl, modelValue]) => { ([showList, selectedVM, vmFromUrl, modelValue]) => {
@ -206,6 +209,10 @@ watch([() => props.showList, () => props.selectedVM, () => props.vmFromUrl, () =
// Watch modelValue to update input when searching // Watch modelValue to update input when searching
watch(() => props.modelValue, (newVal) => { watch(() => props.modelValue, (newVal) => {
if (newVal) {
lastSearchQuery.value = newVal;
}
if (props.showList) { if (props.showList) {
inputValue.value = newVal || ''; inputValue.value = newVal || '';
} }
@ -328,6 +335,7 @@ const filteredVMs = computed(() => {
const handleSearch = (event) => { const handleSearch = (event) => {
// Always update the model value to preserve search // Always update the model value to preserve search
searchActive.value = true; searchActive.value = true;
lastSearchQuery.value = event.target.value;
emit('update:modelValue', event.target.value); emit('update:modelValue', event.target.value);
emit('search', event.target.value); emit('search', event.target.value);
}; };
@ -352,13 +360,26 @@ const clearSearch = () => {
const toggleList = () => { const toggleList = () => {
console.log('toggleList called, showList:', props.showList); console.log('toggleList called, showList:', props.showList);
// If we're opening the list
// If we're opening the list (currently closed)
if (!props.showList) { if (!props.showList) {
// Restore previous search if any // When opening the list, restore the last search query
if (props.modelValue) { nextTick(() => {
if (lastSearchQuery.value) {
inputValue.value = lastSearchQuery.value;
searchActive.value = true; searchActive.value = true;
} }
});
} }
// If we're closing the list (currently open)
else {
// When closing, save the current search but don't clear it
if (props.modelValue) {
lastSearchQuery.value = props.modelValue;
}
// Don't emit update:modelValue here to preserve the search
}
emit('toggle-list'); emit('toggle-list');
}; };
@ -432,10 +453,25 @@ const scrollToSelectedVM = () => {
}); });
}; };
// Call scrollToSelectedVM when the list becomes visible // Update the watch for showList to handle search state
watch(() => props.showList, (isVisible) => { watch(() => props.showList, (isOpen) => {
if (isVisible) { if (isOpen) {
// When list opens, restore the last search query
nextTick(() => {
if (lastSearchQuery.value) {
inputValue.value = lastSearchQuery.value;
searchActive.value = true;
}
});
// Also scroll to selected VM
scrollToSelectedVM(); scrollToSelectedVM();
} else {
// When list closes, show the selected VM but preserve search
const effectiveVM = props.selectedVM || props.vmFromUrl;
if (effectiveVM) {
inputValue.value = effectiveVM;
}
} }
}); });