From 2d3634693bc2b4cd7986947a8f73ee672309cd41 Mon Sep 17 00:00:00 2001 From: John Mizerek Date: Tue, 3 Mar 2026 19:57:22 -0800 Subject: [PATCH] Add Show Modifiers toggle to menu builder outline view Adds button in the outline modal to toggle modifier group display under each item. Each group shows a + to expand into full options with prices. Useful for debugging modifier assignments. Co-Authored-By: Claude Opus 4.6 --- portal/menu-builder.html | 117 ++++++++++++++++++++++++++++++--------- 1 file changed, 90 insertions(+), 27 deletions(-) diff --git a/portal/menu-builder.html b/portal/menu-builder.html index ab294bc..e1a197f 100644 --- a/portal/menu-builder.html +++ b/portal/menu-builder.html @@ -3391,15 +3391,14 @@ // Show outline modal - full menu in hierarchical text format showOutlineModal() { document.getElementById('modalTitle').textContent = 'Menu Outline'; + this._outlineShowMods = false; - let outline = ''; - const categories = this.menu.categories || []; - - if (categories.length === 0) { - outline = '
No menu items yet
'; - } else { - outline = '
'; + const buildOutline = () => { + const categories = this.menu.categories || []; + if (categories.length === 0) + return '
No menu items yet
'; + let outline = '
'; const topLevel = categories.filter(c => !c.parentCategoryId || c.parentCategoryId === 0); const getSubcats = (parent) => categories.filter(c => c.parentCategoryId === parent.id || (parent.dbId && c.parentCategoryDbId === parent.dbId) @@ -3410,7 +3409,9 @@ for (const item of (items || [])) { const itemPrice = item.price ? `$${parseFloat(item.price).toFixed(2)}` : ''; html += `
${this.escapeHtml(item.name)}${itemPrice ? ' ' + itemPrice + '' : ''}
`; - html += this.renderOutlineModifiers(item.modifiers || [], indentLevel + 1); + if (this._outlineShowMods) { + html += this.renderOutlineModifierGroups(item.modifiers || [], indentLevel + 1); + } } return html; }; @@ -3418,24 +3419,37 @@ for (const cat of topLevel) { outline += `
${this.escapeHtml(cat.name)}
`; outline += renderOutlineItems(cat.items, 1); - const subcats = getSubcats(cat); for (const subcat of subcats) { outline += `
${this.escapeHtml(subcat.name)}
`; outline += renderOutlineItems(subcat.items, 2); } } - outline += '
'; - } + return outline; + }; - document.getElementById('modalBody').innerHTML = ` - - ${outline} - `; + .outline-mod-group:hover { color: var(--text-secondary); } + .outline-mod-expand { display: inline-block; width: 14px; font-size: 11px; color: var(--text-muted); } + .outline-mod-opts { display: none; } + .outline-mod-opts.open { display: block; } + `; + document.head.appendChild(style); + } + + this._outlineRender = render; + render(); this.showModal(); }, + toggleOutlineMods() { + this._outlineShowMods = !this._outlineShowMods; + if (this._outlineRender) this._outlineRender(); + }, + + // Render first-level modifier groups with expandable options + renderOutlineModifierGroups(modifiers, depth) { + if (!modifiers || modifiers.length === 0) return ''; + let html = ''; + const pad = depth * 20; + for (let i = 0; i < modifiers.length; i++) { + const mod = modifiers[i]; + const modPrice = mod.price ? `+$${parseFloat(mod.price).toFixed(2)}` : ''; + const opts = mod.options || []; + const uid = 'om_' + Math.random().toString(36).substring(2, 8); + const countLabel = opts.length ? ` (${opts.length})` : ''; + + if (opts.length > 0) { + html += `
`; + html += `+ ${this.escapeHtml(mod.name)}${modPrice ? ' ' + modPrice + '' : ''}${countLabel}`; + html += `
`; + html += `
`; + for (const opt of opts) { + const optPrice = opt.price ? `+$${parseFloat(opt.price).toFixed(2)}` : ''; + html += `
${this.escapeHtml(opt.name)}${optPrice ? ' ' + optPrice + '' : ''}
`; + } + html += `
`; + } else { + html += `
${this.escapeHtml(mod.name)}${modPrice ? ' ' + modPrice + '' : ''}
`; + } + } + return html; + }, + // Helper to render modifiers recursively for outline renderOutlineModifiers(modifiers, depth) { if (!modifiers || modifiers.length === 0) return '';