payfrit/payfrit-biz
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix subcategory expand/collapse in visual menu editor

Browse source 
Subcategories shared expandedCategoryId with parent categories,
so clicking a subcategory collapsed the parent. Added separate
expandedSubCategoryId state so subcategories expand independently.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
John Mizerek 2026-03-01 21:58:20 -08:00
parent 3a9f952d8b
commit 2bcdcbbed7
1 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
portal/menu-builder.html
View file

@ -1227,6 +1227,7 @@
redoStack: [],
idCounter: 1,
expandedCategoryId: null, // For accordion - only one category expanded at a time
expandedSubCategoryId: null, // For subcategory accordion - independent of parent
expandedItemId: null, // For item accordion - only one item expanded at a time
expandedModifierIds: new Set(), // Track which modifiers are expanded
@ -4210,12 +4211,12 @@
</div>
<div class="items-list ${isExpanded ? '' : 'collapsed'}">
${hasSubcats ? subcategories.map(subcat => {
const subExpanded = this.expandedCategoryId === subcat.id;
const subExpanded = this.expandedSubCategoryId === subcat.id;
return `
<div class="category-card subcategory-card" data-category-id="${subcat.id}" draggable="true"
onclick="event.stopPropagation(); MenuBuilder.selectElement(this)" style="margin: 8px 0 8px 20px; border-color: var(--gray-300);">
<div class="category-header" style="padding: 8px 12px;">
<div class="category-toggle ${subExpanded ? 'expanded' : ''}" onclick="event.stopPropagation(); MenuBuilder.toggleCategory('${subcat.id}')">
<div class="category-toggle ${subExpanded ? 'expanded' : ''}" onclick="event.stopPropagation(); MenuBuilder.toggleSubCategory('${subcat.id}')">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 18l6-6-6-6"/>
</svg>
@ -4227,7 +4228,7 @@
<circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/>
</svg>
</div>
<div class="category-info" onclick="event.stopPropagation(); MenuBuilder.toggleCategory('${subcat.id}')" style="cursor: pointer;">
<div class="category-info" onclick="event.stopPropagation(); MenuBuilder.toggleSubCategory('${subcat.id}')" style="cursor: pointer;">
<div class="category-name" style="font-size: 14px;">${this.escapeHtml(subcat.name)}</div>
<div class="category-count">${subcat.items.length} items</div>
</div>
@ -4502,6 +4503,19 @@
this.expandedCategoryId = null;
} else {
this.expandedCategoryId = categoryId;
this.expandedSubCategoryId = null;
this.expandedItemId = null;
this.expandedModifierIds.clear();
}
this.render();
},
// Toggle subcategory expanded/collapsed (independent of parent)
toggleSubCategory(subcatId) {
if (this.expandedSubCategoryId === subcatId) {
this.expandedSubCategoryId = null;
} else {
this.expandedSubCategoryId = subcatId;
this.expandedItemId = null;
this.expandedModifierIds.clear();
}