From 4e5274c6f05a63961c2e76ad1f2059dec36577e7 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 14:24:02 -0500
Subject: [PATCH] Broken but retrying

---
 .../src/components/general/VMSearchBar.vue    |  8 +++---
 .../src/components/pages/vms/VMOverview.vue   | 25 ++++++-------------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/pvc-vue/src/components/general/VMSearchBar.vue b/pvc-vue/src/components/general/VMSearchBar.vue
index 5447be6..a8830b0 100644
--- a/pvc-vue/src/components/general/VMSearchBar.vue
+++ b/pvc-vue/src/components/general/VMSearchBar.vue
@@ -94,7 +94,7 @@
           :data-vm-name="vm.name"
           class="vm-list-item"
           :class="{ 'active': selectedVM === vm.name || vmFromUrl === vm.name }"
-          @click="handleVMSelect(vm)"
+          @click="() => { console.log('VM clicked:', vm); handleVMSelect(vm); }"
         >
           <div v-if="selectedVM === vm.name || vmFromUrl === vm.name" class="active-indicator"></div>
           <div class="vm-item-content">
@@ -424,8 +424,10 @@ const toggleList = () => {
 };
 
 const handleVMSelect = (vm) => {
-  console.log('handleVMSelect called with:', vm);
-  emit('update:modelValue', ''); // Clear search query
+  console.log('Selecting VM:', vm);
+  
+  // Don't clear the search query or change filter state
+  // Just emit the select-vm event
   emit('select-vm', vm);
 };
 
diff --git a/pvc-vue/src/components/pages/vms/VMOverview.vue b/pvc-vue/src/components/pages/vms/VMOverview.vue
index 223f812..03d435a 100644
--- a/pvc-vue/src/components/pages/vms/VMOverview.vue
+++ b/pvc-vue/src/components/pages/vms/VMOverview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="overview-container">
     <VMSearchBar
-      :key="searchBarKey"
+      :key="`vm-search-${selectedVM}`"
       v-model="searchQuery"
       :selected-vm="selectedVM"
       :vm-from-url="route.query.vm"
@@ -204,10 +204,16 @@ const toggleVMList = () => {
 
 // Select a VM
 const selectVM = (vm) => {
-  // Update the ref first
+  console.log('VMOverview selectVM called with:', vm);
+  
+  // Update the ref
   selectedVM.value = vm.name;
   invalidVMSelected.value = false;
+  
+  // Close the VM list
   showVMList.value = false;
+  
+  // Update the URL
   router.push({ query: { vm: vm.name } });
 };
 
@@ -288,21 +294,6 @@ watch(() => selectedVM.value, (newVal) => {
   console.log('VMOverview selectedVM changed:', newVal);
 }, { immediate: true });
 
-// Watch for vmData changes to update VMSearchBar
-watch(() => props.vmData, (newData) => {
-  if (newData.length && selectedVM.value) {
-    console.log('VM data loaded, updating VMSearchBar with selectedVM:', selectedVM.value);
-    // Force a refresh of the VMSearchBar by toggling a key
-    nextTick(() => {
-      // This will force the VMSearchBar to re-render with the correct data
-      searchBarKey.value = Date.now();
-    });
-  }
-});
-
-// Add a key to force VMSearchBar to re-render when data changes
-const searchBarKey = ref(0);
-
 // Helper functions
 const getStateColor = (state) => {
   if (!state) return '';