Fix field name mismatch in station-assignment page

API returns Name, Price, ParentItemID, CategoryID, StationID but JS
was referencing ItemName, ItemPrice, ItemParentItemID, etc. causing
all items to be filtered out and not displayed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
John Mizerek 2026-03-02 17:03:45 -08:00
parent a2ed13981e
commit 49e3c812c9

View file

@ -500,13 +500,13 @@
if (data.OK) {
// Only top-level items (not modifiers) - look for items with categories
this.items = (data.Items || []).filter(item =>
item.ItemParentItemID === 0 || item.ItemCategoryID > 0
item.ParentItemID === 0 || item.CategoryID > 0
);
console.log('[StationAssignment] Filtered items count:', this.items.length);
// Build assignments from existing data
this.items.forEach(item => {
if (item.ItemStationID) {
this.assignments[item.ItemID] = item.ItemStationID;
if (item.StationID) {
this.assignments[item.ItemID] = item.StationID;
}
});
} else {
@ -527,7 +527,7 @@
// Group by category
const categories = {};
this.items.forEach(item => {
const cat = item.ItemCategoryName || 'Uncategorized';
const cat = item.ItemName || 'Uncategorized';
if (!categories[cat]) categories[cat] = [];
categories[cat].push(item);
});
@ -540,7 +540,7 @@
Object.entries(categories).forEach(([catName, items]) => {
const filteredItems = items.filter(item =>
item.ItemName.toLowerCase().includes(filterLower) ||
item.Name.toLowerCase().includes(filterLower) ||
catName.toLowerCase().includes(filterLower)
);
@ -581,8 +581,8 @@
ondragend="StationAssignment.onDragEnd(event)">
<span class="item-icon">🍽️</span>
<div class="item-details">
<div class="item-name">${this.escapeHtml(item.ItemName)}</div>
<div class="item-price">$${(item.ItemPrice || 0).toFixed(2)}</div>
<div class="item-name">${this.escapeHtml(item.Name)}</div>
<div class="item-price">$${(item.Price || 0).toFixed(2)}</div>
</div>
${station ? `<span class="item-station-badge" style="background: ${station.Color}">${this.escapeHtml(station.Name)}</span>` : ''}
</div>
@ -643,7 +643,7 @@
itemsInStation.map(item => `
<div class="station-item">
<span class="item-icon">🍽️</span>
<span class="item-name">${this.escapeHtml(item.ItemName)}</span>
<span class="item-name">${this.escapeHtml(item.Name)}</span>
<button class="remove-btn" onclick="StationAssignment.removeFromStation(${item.ItemID})" title="Remove">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12"/>
@ -673,7 +673,7 @@
${unassignedItems.slice(0, 5).map(item => `
<div class="station-item" style="opacity: 0.6;">
<span class="item-icon">🍽️</span>
<span class="item-name">${this.escapeHtml(item.ItemName)}</span>
<span class="item-name">${this.escapeHtml(item.Name)}</span>
</div>
`).join('')}
${unassignedItems.length > 5 ? `<div style="text-align: center; color: var(--text-muted); font-size: 13px;">+${unassignedItems.length - 5} more</div>` : ''}
@ -792,7 +792,7 @@
const item = this.items.find(i => i.ItemID === itemId);
const station = this.stations.find(s => s.StationID === stationId);
if (item && station) {
this.toast(`${item.ItemName} assigned to ${station.Name}`, 'success');
this.toast(`${item.Name} assigned to ${station.Name}`, 'success');
}
},