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

Add Show Modifiers toggle to items step in setup wizard

Browse source 
Outline button reveals modifier groups under each item with a +
expand button to drill into individual options and prices. Helps
debug imported menus before saving.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
John Mizerek 2026-03-03 19:50:46 -08:00
parent a44dfd79ae
commit a67d225164
1 changed files with 74 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
portal/setup-wizard.html
View file

@ -573,6 +573,50 @@
border-radius: 3px;
}
.item-mod-groups { display: none; margin-top: 6px; }
.item-mod-groups.visible { display: block; }
.item-mod-group {
font-size: 12px;
margin-bottom: 4px;
}
.item-mod-group-header {
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
color: var(--gray-600);
font-weight: 500;
}
.item-mod-group-header:hover { color: var(--gray-800); }
.mod-expand-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--gray-200);
color: var(--gray-600);
font-size: 12px;
line-height: 1;
flex-shrink: 0;
transition: transform 0.15s;
}
.mod-expand-btn.open { transform: rotate(45deg); }
.item-mod-options {
display: none;
margin: 2px 0 4px 20px;
padding-left: 8px;
border-left: 2px solid var(--gray-200);
}
.item-mod-options.visible { display: block; }
.item-mod-option {
font-size: 11px;
color: var(--gray-500);
padding: 1px 0;
}
.item-mod-option .opt-price { color: var(--gray-400); margin-left: 4px; }
/* Add Item Row */
.add-row {
display: flex;
@ -2839,21 +2883,38 @@
</tr>
</thead>
<tbody>
${catItems.map((item, i) => `
${catItems.map((item, i) => {
const itemMods = item.modifiers || [];
const allMods = config.extractedData.modifiers || [];
const modGroupsHtml = itemMods.map(mName => {
const mg = allMods.find(m => m.name === mName);
const opts = mg && mg.options ? mg.options.filter(o => o && o.name) : [];
const optsHtml = opts.map(o =>
`<div class="item-mod-option">${o.name}${o.price ? `<span class="opt-price">+$${o.price.toFixed(2)}</span>` : ''}</div>`
).join('');
return `<div class="item-mod-group">
<span class="item-mod-group-header" onclick="this.querySelector('.mod-expand-btn').classList.toggle('open');this.parentElement.querySelector('.item-mod-options').classList.toggle('visible')">
<span class="mod-expand-btn">+</span> ${mName}${opts.length ? ` (${opts.length})` : ''}
</span>
<div class="item-mod-options">${optsHtml}</div>
</div>`;
}).join('');
return `
<tr>
<td><input type="checkbox" checked data-item-id="${item.id || i}"></td>
<td>
<strong>${item.name}</strong>
${item.description ? `<br><small style="color:var(--gray-500);">${item.description}</small>` : ''}
<div class="item-mod-groups">${modGroupsHtml}</div>
</td>
<td>$${parseFloat(item.price || 0).toFixed(2)}</td>
<td>
<div class="item-modifiers">
${(item.modifiers || []).map(m => `<span class="item-modifier-tag">${m}</span>`).join('')}
${itemMods.map(m => `<span class="item-modifier-tag">${m}</span>`).join('')}
</div>
</td>
</tr>
`).join('')}
</tr>`;
}).join('')}
</tbody>
</table>
</div>`;
@ -2881,6 +2942,7 @@
</div>
<p>Uncheck any items you don't want to include.</p>
<div class="action-buttons">
${items.some(it => (it.modifiers || []).length > 0) ? `<button class="btn btn-outline" id="toggleModsBtn" onclick="toggleItemModifiers()">Show Modifiers</button>` : ''}
<button class="btn btn-success" onclick="confirmItems()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"/>
@ -2891,6 +2953,14 @@
`);
}
function toggleItemModifiers() {
const groups = document.querySelectorAll('#itemsList .item-mod-groups');
const btn = document.getElementById('toggleModsBtn');
const showing = btn.textContent === 'Hide Modifiers';
groups.forEach(g => g.classList.toggle('visible', !showing));
btn.textContent = showing ? 'Show Modifiers' : 'Hide Modifiers';
}
function confirmItems() {
// Filter out unchecked items
const checkboxes = document.querySelectorAll('#itemsList input[type="checkbox"]');