From 495b03c76dc26e148ec7c2bfa70c1f6ee6b79288 Mon Sep 17 00:00:00 2001 From: John Mizerek Date: Sat, 28 Feb 2026 22:08:59 -0800 Subject: [PATCH] Add subcategory detection to wizard URL analyzer and display - analyzeMenuUrl.cfm: Detect subcategories from Toast subgroups and Claude API responses, preserve hierarchy with parentCategoryName - setup-wizard.html: Display subcategories indented under parents throughout wizard flow (categories step, items review, summary, preview) - menu-builder.html: Show subcategories nested in outline modal view Co-Authored-By: Claude Opus 4.6 --- api/setup/analyzeMenuUrl.cfm | 98 +++++++++++++----- portal/menu-builder.html | 35 +++++-- portal/setup-wizard.html | 187 ++++++++++++++++++++++------------- 3 files changed, 224 insertions(+), 96 deletions(-) diff --git a/api/setup/analyzeMenuUrl.cfm b/api/setup/analyzeMenuUrl.cfm index 6d5958c..0520d81 100644 --- a/api/setup/analyzeMenuUrl.cfm +++ b/api/setup/analyzeMenuUrl.cfm @@ -335,6 +335,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -342,7 +407,6 @@ - - + @@ -1113,9 +1177,8 @@ - + - @@ -1123,14 +1186,13 @@ - - + @@ -1140,7 +1202,11 @@ - + + + + + @@ -1149,22 +1215,12 @@ - + - - - - - - - - + - - - - + @@ -1232,8 +1288,6 @@ - - diff --git a/portal/menu-builder.html b/portal/menu-builder.html index cc66a4c..810077c 100644 --- a/portal/menu-builder.html +++ b/portal/menu-builder.html @@ -3383,16 +3383,29 @@ } else { outline = '
'; - for (const cat of categories) { - outline += `
${this.escapeHtml(cat.name)}
`; + 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) + ); - const items = cat.items || []; - for (const item of items) { + const renderOutlineItems = (items, indentLevel) => { + let html = ''; + for (const item of (items || [])) { const itemPrice = item.price ? `$${parseFloat(item.price).toFixed(2)}` : ''; - outline += `
${this.escapeHtml(item.name)}${itemPrice ? ' ' + itemPrice + '' : ''}
`; + html += `
${this.escapeHtml(item.name)}${itemPrice ? ' ' + itemPrice + '' : ''}
`; + html += this.renderOutlineModifiers(item.modifiers || [], indentLevel + 1); + } + return html; + }; - // Render modifiers recursively - outline += this.renderOutlineModifiers(item.modifiers || [], 2); + 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); } } @@ -3422,6 +3435,14 @@ .outline-category:first-child { margin-top: 0; } + .outline-subcategory { + font-weight: 600; + font-size: 13px; + color: var(--text-secondary); + margin-top: 8px; + margin-bottom: 2px; + padding-left: 20px; + } .outline-item { padding-left: 20px; color: var(--text-primary); diff --git a/portal/setup-wizard.html b/portal/setup-wizard.html index b1b227e..6a2920f 100644 --- a/portal/setup-wizard.html +++ b/portal/setup-wizard.html @@ -2289,13 +2289,13 @@ } // Step 2: Categories - function showCategoriesStep() { - updateProgress(3); - const categories = config.extractedData.categories || []; - - let categoriesHtml = categories.map((cat, i) => ` -
+ function renderCategoryListHtml(categories) { + return categories.map((cat, i) => { + const isSubcat = cat.parentCategoryName ? true : false; + return ` +
+ ${isSubcat ? '└' : ''} @@ -2305,13 +2305,23 @@ -
- `).join(''); +
`; + }).join(''); + } + + function showCategoriesStep() { + updateProgress(3); + const categories = config.extractedData.categories || []; + const topLevel = categories.filter(c => !c.parentCategoryName); + const subcats = categories.filter(c => c.parentCategoryName); + + let label = `${topLevel.length} menu categories`; + if (subcats.length > 0) label += ` (${subcats.length} subcategories)`; addMessage('ai', ` -

I found ${categories.length} menu categories:

+

I found ${label}:

- ${categoriesHtml} + ${renderCategoryListHtml(categories)}
@@ -2330,24 +2340,16 @@ } function removeCategory(index) { + const removed = config.extractedData.categories[index]; config.extractedData.categories.splice(index, 1); - // Rebuild the list - const list = document.getElementById('categoriesList'); - const categories = config.extractedData.categories; - list.innerHTML = categories.map((cat, i) => ` -
- - - - - ${cat.itemCount || 0} items - -
- `).join(''); + // If removing a parent, also remove its subcategories + if (removed && !removed.parentCategoryName) { + config.extractedData.categories = config.extractedData.categories.filter( + c => c.parentCategoryName !== removed.name + ); + } + document.getElementById('categoriesList').innerHTML = + renderCategoryListHtml(config.extractedData.categories); } function addCategory() { @@ -2358,26 +2360,8 @@ config.extractedData.categories.push({ name, itemCount: 0 }); input.value = ''; - // Rebuild list - removeCategory(-1); // Hacky way to rebuild without removing - config.extractedData.categories.pop(); // Undo the splice - - const list = document.getElementById('categoriesList'); - const categories = config.extractedData.categories; - list.innerHTML = categories.map((cat, i) => ` -
- - - - - ${cat.itemCount || 0} items - -
- `).join(''); + document.getElementById('categoriesList').innerHTML = + renderCategoryListHtml(config.extractedData.categories); } function confirmCategories() { @@ -2390,10 +2374,16 @@ const checkbox = item.querySelector('input[type="checkbox"]'); const nameInput = item.querySelector('.item-text input'); if (checkbox.checked) { - updatedCategories.push({ + const origCat = config.extractedData.categories[checkbox.dataset.index]; + const catObj = { name: nameInput.value, - itemCount: config.extractedData.categories[checkbox.dataset.index]?.itemCount || 0 - }); + itemCount: origCat?.itemCount || 0 + }; + // Preserve parentCategoryName for subcategories + if (origCat?.parentCategoryName) { + catObj.parentCategoryName = origCat.parentCategoryName; + } + updatedCategories.push(catObj); } }); @@ -2782,10 +2772,19 @@ return; } - // Group items by category + // Group items by category (subcategories grouped under parents) let itemsByCategory = {}; let assignedItemIds = new Set(); + // Build parent-to-subcategory map + const subcatMap = {}; + categories.forEach(cat => { + if (cat.parentCategoryName) { + if (!subcatMap[cat.parentCategoryName]) subcatMap[cat.parentCategoryName] = []; + subcatMap[cat.parentCategoryName].push(cat.name); + } + }); + categories.forEach(cat => { const catItems = items.filter(item => item.category === cat.name); if (catItems.length > 0) { @@ -2808,12 +2807,19 @@ } let itemsHtml = ''; - for (const [catName, catItems] of Object.entries(itemsByCategory)) { - if (catItems.length === 0) continue; + // Render top-level categories first, then their subcategories + const topLevelCats = categories.filter(c => !c.parentCategoryName); + const renderedCats = new Set(); - itemsHtml += ` -
-

${catName} (${catItems.length})

+ function renderCategoryItems(catName, isSubcat) { + const catItems = itemsByCategory[catName]; + if (!catItems || catItems.length === 0) return ''; + renderedCats.add(catName); + const indent = isSubcat ? 'margin-left: 20px;' : ''; + const prefix = isSubcat ? '└' : ''; + return ` +
+

${prefix}${catName} (${catItems.length})

@@ -2841,8 +2847,22 @@ `).join('')}
-
- `; +
`; + } + + // Render each top-level category and its subcategories + topLevelCats.forEach(cat => { + itemsHtml += renderCategoryItems(cat.name, false); + const subs = subcatMap[cat.name] || []; + subs.forEach(subName => { + itemsHtml += renderCategoryItems(subName, true); + }); + }); + + // Render any remaining categories not yet rendered + for (const [catName, catItems] of Object.entries(itemsByCategory)) { + if (renderedCats.has(catName) || catItems.length === 0) continue; + itemsHtml += renderCategoryItems(catName, false); } addMessage('ai', ` @@ -2894,7 +2914,11 @@ const { business, categories, modifiers, items } = config.extractedData; - document.getElementById('summaryCategories').textContent = categories.length; + const topCats = categories.filter(c => !c.parentCategoryName); + const subCats = categories.filter(c => c.parentCategoryName); + document.getElementById('summaryCategories').textContent = subCats.length > 0 + ? `${topCats.length} (${subCats.length} subcategories)` + : categories.length; document.getElementById('summaryModifiers').textContent = modifiers.length; document.getElementById('summaryItems').textContent = items.length; @@ -2944,7 +2968,7 @@ ? `

Adding to: ${config.menuName}

` : `

${business.name || 'Your Restaurant'}

`}
    -
  • ${categories.length} categories
    • +
  • ${topCats.length} categories${subCats.length > 0 ? ` (${subCats.length} subcategories)` : ''}
  • ${modifiers.length} modifier templates
  • ${items.length} menu items
    • ${imagesSummary} @@ -3204,13 +3228,26 @@
`; + // Build subcategory lookup for preview + const previewSubcatMap = {}; categories.forEach(cat => { + if (cat.parentCategoryName) { + if (!previewSubcatMap[cat.parentCategoryName]) previewSubcatMap[cat.parentCategoryName] = []; + previewSubcatMap[cat.parentCategoryName].push(cat); + } + }); + const previewRendered = new Set(); + + function renderPreviewCategory(cat, isSubcat) { + previewRendered.add(cat.name); const catItems = items.filter(item => item.category === cat.name); - previewHtml += ` -
-

+ const tag = isSubcat ? 'h3' : 'h2'; + const indent = isSubcat ? 'margin-left: 20px;' : ''; + let html = ` +
+ <${tag} onclick="this.parentElement.classList.toggle('collapsed')" ${isSubcat ? 'style="font-size: 16px;"' : ''}> ${cat.name} [+/-] -

+
${catItems.map(item => `
@@ -3226,10 +3263,26 @@ ` : ''}
`).join('')} - ${catItems.length === 0 ? '
No items in this category
' : ''} + ${catItems.length === 0 && !(previewSubcatMap[cat.name]?.length) ? '
No items in this category
' : ''}
-
- `; +
`; + // Render subcategories inline + if (previewSubcatMap[cat.name]) { + previewSubcatMap[cat.name].forEach(sub => { + html += renderPreviewCategory(sub, true); + }); + } + return html; + } + + categories.filter(c => !c.parentCategoryName).forEach(cat => { + previewHtml += renderPreviewCategory(cat, false); + }); + // Render any unrendered categories + categories.forEach(cat => { + if (!previewRendered.has(cat.name)) { + previewHtml += renderPreviewCategory(cat, false); + } }); previewHtml += `