Improve search and list behaviour

pvc-vue/src/views/VMs.vue

@@ -263,6 +263,7 @@ const selectedVM = ref('');
 const searchQuery = ref('');
 const showVMList = ref(true);
 const showFilterMenu = ref(false);
+const searchActive = ref(false);
 const appliedFilters = ref({
   states: {},
   nodes: {}
@@ -278,7 +279,13 @@ const sections = ref({
 
 // Toggle VM list visibility
 const toggleVMList = () => {
-  showVMList.value = !showVMList.value;
+  if (showVMList.value) {
+    showVMList.value = false;
+    return;
+  }
+  
+  showVMList.value = true;
+  searchActive.value = false;
 };
 
 // Toggle filter menu
@@ -330,12 +337,14 @@ const toggleSection = (section) => {
 // Clear search
 const clearSearch = () => {
   searchQuery.value = '';
+  searchActive.value = false;
   filterVMs();
 };
 
 // Toggle a filter on/off
 const toggleFilter = (type, value) => {
   appliedFilters.value[type][value] = !appliedFilters.value[type][value];
+  searchActive.value = true;
   filterVMs();
 };
 
@@ -349,6 +358,7 @@ const resetFilters = () => {
     appliedFilters.value.nodes[node] = false;
   });
   
+  searchActive.value = false;
   filterVMs();
 };
 
@@ -408,14 +418,14 @@ const filteredVMs = computed(() => {
   
   let filtered = [...vmData.value];
   
-  // Apply search filter
+  if (searchActive.value && searchQuery.value) {
-  if (searchQuery.value) {
     const query = searchQuery.value.toLowerCase();
     filtered = filtered.filter(vm => 
       vm.name.toLowerCase().includes(query)
     );
   }
   
+  if (searchActive.value) {
     // Apply state filters if any are active
     const activeStates = Object.entries(appliedFilters.value.states)
       .filter(([_, isActive]) => isActive)
@@ -433,6 +443,7 @@ const filteredVMs = computed(() => {
     if (activeNodes.length > 0) {
       filtered = filtered.filter(vm => activeNodes.includes(vm.node));
     }
+  }
   
   return filtered;
 });
@@ -495,6 +506,7 @@ const fetchVMData = async () => {
 // Handle search input
 const handleSearch = (event) => {
   searchQuery.value = event.target.value;
+  searchActive.value = true;
   filterVMs();
 };
 
@@ -504,6 +516,7 @@ const handleSearchFocus = () => {
   if (!showVMList.value) {
     showVMList.value = true;
   }
+  searchActive.value = true;
 };
 
 // Handle search blur