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

Improve search and list behaviour

Browse Source
This commit is contained in:
Joshua Boniface 2025-03-01 14:31:01 -05:00
parent 1dd1387624
commit dbb1dae0d9
1 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
pvc-vue/src/views/VMs.vue
View File

@ -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,30 +418,31 @@ const filteredVMs = computed(() => {
let filtered = [...vmData.value];
// Apply search filter
if (searchQuery.value) {
if (searchActive.value && searchQuery.value) {
const query = searchQuery.value.toLowerCase();
filtered = filtered.filter(vm =>
vm.name.toLowerCase().includes(query)
);
}
// Apply state filters if any are active
const activeStates = Object.entries(appliedFilters.value.states)
.filter(([_, isActive]) => isActive)
.map(([state]) => state);
if (activeStates.length > 0) {
filtered = filtered.filter(vm => activeStates.includes(vm.state));
}
// Apply node filters if any are active
const activeNodes = Object.entries(appliedFilters.value.nodes)
.filter(([_, isActive]) => isActive)
.map(([node]) => node);
if (activeNodes.length > 0) {
filtered = filtered.filter(vm => activeNodes.includes(vm.node));
if (searchActive.value) {
// Apply state filters if any are active
const activeStates = Object.entries(appliedFilters.value.states)
.filter(([_, isActive]) => isActive)
.map(([state]) => state);
if (activeStates.length > 0) {
filtered = filtered.filter(vm => activeStates.includes(vm.state));
}
// Apply node filters if any are active
const activeNodes = Object.entries(appliedFilters.value.nodes)
.filter(([_, isActive]) => isActive)
.map(([node]) => node);
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