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

Fix bug with selected VM

Browse Source
This commit is contained in:
Joshua Boniface 2025-03-02 17:55:42 -05:00
parent 8d1028ab47
commit acfd2554b0
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -99,10 +99,10 @@
:key="vm.name" :key="vm.name"
:data-vm-name="vm.name" :data-vm-name="vm.name"
class="vm-list-item" class="vm-list-item"
:class="{ 'active': selectedVM === vm.name || vmFromUrl === vm.name }" :class="{ 'active': isVMSelected(vm.name) }"
@click="handleVMSelect(vm)" @click="handleVMSelect(vm)"
> >
<div v-if="selectedVM === vm.name || vmFromUrl === vm.name" class="active-indicator"></div> <div v-if="isVMSelected(vm.name)" class="active-indicator"></div>
<div class="vm-item-content"> <div class="vm-item-content">
<div class="vm-name">{{ vm.name }}</div> <div class="vm-name">{{ vm.name }}</div>
<div class="vm-state" :class="getStateClass(vm.state)"> <div class="vm-state" :class="getStateClass(vm.state)">
@ -190,6 +190,13 @@ const shouldShowClearButton = computed(() => {
(!props.showList && (props.selectedVM || localStorage.getItem('selectedVMId'))); (!props.showList && (props.selectedVM || localStorage.getItem('selectedVMId')));
}); });
// Add a computed property to check if a VM is selected
const isVMSelected = (vmName) => {
return props.selectedVM === vmName ||
props.vmFromUrl === vmName ||
localStorage.getItem('selectedVMId') === vmName;
};
// Initialize the component // Initialize the component
onMounted(() => { onMounted(() => {
// Set up click outside handler // Set up click outside handler
@ -229,8 +236,10 @@ onMounted(() => {
} }
// If the list is visible on mount, scroll to selected VM // If the list is visible on mount, scroll to selected VM
if (props.showList && (props.selectedVM || props.vmFromUrl || savedVMId)) { if (props.showList) {
nextTick(() => {
scrollToSelectedVM(); scrollToSelectedVM();
});
} }
}); });
@ -636,10 +645,12 @@ watch([() => props.selectedVM, () => props.vmFromUrl], ([selectedVM, vmFromUrl])
// Add a function to scroll to the selected VM // Add a function to scroll to the selected VM
const scrollToSelectedVM = () => { const scrollToSelectedVM = () => {
nextTick(() => { nextTick(() => {
// Find the first selected VM
const selectedVMName = props.selectedVM || props.vmFromUrl || localStorage.getItem('selectedVMId'); const selectedVMName = props.selectedVM || props.vmFromUrl || localStorage.getItem('selectedVMId');
if (selectedVMName && vmListContainer.value) { if (selectedVMName && vmListContainer.value) {
const activeElement = vmListContainer.value.querySelector(`[data-vm-name="${selectedVMName}"]`); const activeElement = vmListContainer.value.querySelector(`[data-vm-name="${selectedVMName}"]`);
if (activeElement) { if (activeElement) {
// Scroll the element into view
activeElement.scrollIntoView({ block: 'center', behavior: 'smooth' }); activeElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
} }
} }