bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix datatable menu refs

Browse source
This commit is contained in:
Casey 2026-01-14 14:33:48 -06:00
parent 01ff96fb74
commit d496f21ab9
1 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/components/common/DataTable.vue
View file

@ -410,7 +410,7 @@
outlined outlined
/> />
<Menu <Menu
:ref="defineMenuRef(action.label, slotProps.data.id)" :ref="(el) => setMenuRef(el, action.label, slotProps.data.id)"
:model="buildMenuItems(action.menuItems || [], slotProps.data)" :model="buildMenuItems(action.menuItems || [], slotProps.data)"
:popup="true" :popup="true"
/> />
@ -428,6 +428,7 @@ import Column from "primevue/column";
import Tag from "primevue/tag"; import Tag from "primevue/tag";
import Button from "primevue/button"; import Button from "primevue/button";
import Select from "primevue/select"; import Select from "primevue/select";
import Menu from "primevue/menu";
import InputText from "primevue/inputtext"; import InputText from "primevue/inputtext";
import { FilterMatchMode } from "@primevue/core"; import { FilterMatchMode } from "@primevue/core";
import { useFiltersStore } from "../../stores/filters"; import { useFiltersStore } from "../../stores/filters";
@ -441,13 +442,6 @@ const paginationStore = usePaginationStore();
const menuRefs = reactive({}); const menuRefs = reactive({});
const activeMenuKey = ref(null); const activeMenuKey = ref(null);
const defineMenuRef = (label, id) => {
console.log("Defining Menu Refs:", label, id);
const refName = `${label}-${id}`
menuRefs[refName] = ref();
return menuRefs[refName]
}
const props = defineProps({ const props = defineProps({
columns: { columns: {
type: Array, type: Array,
@ -531,6 +525,14 @@ const props = defineProps({
}, },
}); });
const setMenuRef = (el, label, id) => {
if (el) {
const refName = `${label}-${id}`;
menuRefs[refName] = el;
console.log("Setting Menu Ref:", refName, el);
}
}
const emit = defineEmits([ const emit = defineEmits([
"rowClick", "rowClick",
"row-click", "row-click",
@ -1074,15 +1076,14 @@ const handleActionClick = (action, rowData = null) => {
const toggleMenu = (event, action, rowData) => { const toggleMenu = (event, action, rowData) => {
console.log("Menu button toggled"); console.log("Menu button toggled");
const menuKey = `${action.label}-${rowData.id}`; const menuKey = `${action.label}-${rowData.id}`;
console.log(menuRefs, menuKey); console.log("Looking for menu:", menuKey, menuRefs);
const menu = menuRefs[menuKey]; const menu = menuRefs[menuKey];
console.log(event, action, rowData, menuKey, menu);
if (menu) { if (menu) {
console.log("Menu:", menu); console.log("Found menu, toggling:", menu);
menu.toggle(event); menu.toggle(event);
activeMenuKey.value = menuKey; activeMenuKey.value = menuKey;
} else { } else {
console.log("Menu undefined."); console.log("Menu undefined for key:", menuKey);
} }
}; };