From 1dd1387624904f06f034eb6defc56c98741f8f78 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sat, 1 Mar 2025 14:26:59 -0500
Subject: [PATCH] Enhance search bar and hide filters when unneeded

---
 pvc-vue/src/views/VMs.vue | 41 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/pvc-vue/src/views/VMs.vue b/pvc-vue/src/views/VMs.vue
index b584244..3298f3f 100644
--- a/pvc-vue/src/views/VMs.vue
+++ b/pvc-vue/src/views/VMs.vue
@@ -21,6 +21,7 @@
             :value="showVMList ? searchQuery : (selectedVMData?.name || '')"
             @input="handleSearch"
             @focus="handleSearchFocus"
+            @blur="handleSearchBlur"
             class="form-control search-input"
           >
           <button 
@@ -35,6 +36,7 @@
         <div class="filter-dropdown">
           <button 
             class="btn btn-outline-secondary dropdown-toggle" 
+            :disabled="!showVMList"
             @click="toggleFilterMenu"
           >
             <i class="fas fa-filter"></i> Filters
@@ -295,13 +297,31 @@ const closeFilterMenuOnClickOutside = (event) => {
 // Add event listener for clicks outside filter menu
 onMounted(() => {
   document.addEventListener('click', closeFilterMenuOnClickOutside);
+  // Add event listener for clicks outside the VM list area
+  document.addEventListener('click', handleClickOutside);
 });
 
 // Remove event listener when component is unmounted
 onUnmounted(() => {
   document.removeEventListener('click', closeFilterMenuOnClickOutside);
+  document.removeEventListener('click', handleClickOutside);
 });
 
+// Handle clicks outside the VM list area
+const handleClickOutside = (event) => {
+  // Only handle this if a VM is selected and the list is showing
+  if (selectedVM.value && showVMList.value) {
+    const vmControls = document.querySelector('.vm-controls-container');
+    const vmList = document.querySelector('.vm-list-fullpage');
+    
+    // If click is outside both the controls and list, close the list
+    if ((!vmControls || !vmControls.contains(event.target)) && 
+        (!vmList || !vmList.contains(event.target))) {
+      showVMList.value = false;
+    }
+  }
+};
+
 // Toggle section visibility
 const toggleSection = (section) => {
   sections.value[section] = !sections.value[section];
@@ -486,6 +506,27 @@ const handleSearchFocus = () => {
   }
 };
 
+// Handle search blur
+const handleSearchBlur = (event) => {
+  // Don't close the list if clicking on another element within the list
+  const vmList = document.querySelector('.vm-list-fullpage');
+  if (vmList && vmList.contains(event.relatedTarget)) {
+    return;
+  }
+  
+  // If a VM is selected and user clicks away from search, close the list
+  if (selectedVM.value && !event.relatedTarget) {
+    // Use setTimeout to allow click events to process first
+    setTimeout(() => {
+      // Only close if we're not clicking on a VM in the list
+      if (!document.activeElement || document.activeElement.tagName !== 'BUTTON' || 
+          !document.activeElement.classList.contains('vm-list-item')) {
+        showVMList.value = false;
+      }
+    }, 100);
+  }
+};
+
 // Filter VMs based on current search and filters
 const filterVMs = () => {
   // This is handled by the computed property