mirror of
https://github.com/Sea-Haven-Industries/meal-order-manager.git
synced 2026-10-07 16:18:54 +00:00
feat(form): render admin orders as mobile cards
This commit is contained in:
parent
57a6412811
commit
02fe514712
4 changed files with 493 additions and 36 deletions
|
|
@ -1,14 +1,26 @@
|
|||
/* ADMIN_JS_MARKER */
|
||||
const ADMIN_URL = window.ADMIN_URL;
|
||||
const ADMIN_PDF_URL = window.ADMIN_PDF_URL;
|
||||
const MEALS = window.MEALS;
|
||||
const WEEK = window.WEEK;
|
||||
const ADMIN_API_URL = window.ADMIN_URL;
|
||||
const ADMIN_SUMMARY_PDF_URL = window.ADMIN_PDF_URL;
|
||||
const ADMIN_MEALS = window.MEALS;
|
||||
const ADMIN_WEEK = window.WEEK;
|
||||
|
||||
let currentAdminWeek = '';
|
||||
let editingOrder = null;
|
||||
let editQuantities = {};
|
||||
let lastAdminData = null;
|
||||
|
||||
function showAdminStatus(message, tone = 'error') {
|
||||
const alertEl = document.getElementById('admin-alert');
|
||||
const statusEl = document.getElementById('admin-status');
|
||||
if (!alertEl || !statusEl) return;
|
||||
alertEl.textContent = tone === 'error' ? message : '';
|
||||
statusEl.textContent = tone === 'error' ? '' : message;
|
||||
}
|
||||
|
||||
function clearAdminStatus() {
|
||||
showAdminStatus('', 'status');
|
||||
}
|
||||
|
||||
function adminHeaders() {
|
||||
const h = {};
|
||||
const cred = window.googleCredential;
|
||||
|
|
@ -18,19 +30,24 @@ function adminHeaders() {
|
|||
|
||||
function loadWeekOrders(week) {
|
||||
if (!week) return;
|
||||
clearAdminStatus();
|
||||
currentAdminWeek = week;
|
||||
editingOrder = null;
|
||||
editQuantities = {};
|
||||
const tbody = document.getElementById('admin-tbody');
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="admin-loading">Loading...</td></tr>';
|
||||
const cards = document.getElementById('admin-cards');
|
||||
cards.innerHTML = '<div class="admin-loading">Loading...</div>';
|
||||
document.getElementById('admin-empty').classList.add('is-hidden');
|
||||
document.getElementById('admin-stats').textContent = '';
|
||||
|
||||
fetch(ADMIN_URL + '?week=' + encodeURIComponent(week), { headers: adminHeaders() })
|
||||
fetch(ADMIN_API_URL + '?week=' + encodeURIComponent(week), { headers: adminHeaders() })
|
||||
.then(r => r.json())
|
||||
.then(data => renderAdminTable(data))
|
||||
.catch(() => {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="admin-error">Failed to load orders.</td></tr>';
|
||||
cards.innerHTML = '';
|
||||
showAdminStatus('Failed to load orders.');
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -46,9 +63,11 @@ function buildEditQtyRow(name, qty) {
|
|||
minusBtn.dataset.mealName = name;
|
||||
minusBtn.dataset.delta = '-1';
|
||||
minusBtn.innerHTML = '−';
|
||||
minusBtn.setAttribute('aria-label', 'Remove one ' + name);
|
||||
|
||||
const span = document.createElement('span');
|
||||
span.textContent = qty;
|
||||
span.setAttribute('aria-label', 'Quantity of ' + name);
|
||||
|
||||
const plusBtn = document.createElement('button');
|
||||
plusBtn.type = 'button';
|
||||
|
|
@ -56,6 +75,7 @@ function buildEditQtyRow(name, qty) {
|
|||
plusBtn.dataset.mealName = name;
|
||||
plusBtn.dataset.delta = '1';
|
||||
plusBtn.textContent = '+';
|
||||
plusBtn.setAttribute('aria-label', 'Add one ' + name);
|
||||
|
||||
wrap.appendChild(minusBtn);
|
||||
wrap.appendChild(span);
|
||||
|
|
@ -123,6 +143,112 @@ function buildViewActions(idx, email, name) {
|
|||
return wrap;
|
||||
}
|
||||
|
||||
function formatSubmittedAt(submittedAt) {
|
||||
return submittedAt
|
||||
? new Date(submittedAt).toLocaleString('en-US', {
|
||||
timeZone: 'America/New_York',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: '';
|
||||
}
|
||||
|
||||
function editTotal() {
|
||||
const menuPrices = {};
|
||||
ADMIN_MEALS.forEach(m => { menuPrices[m.name] = m.price; });
|
||||
return Object.keys(editQuantities).reduce((sum, name) => {
|
||||
const price = menuPrices[name] || 0;
|
||||
return sum + price * (editQuantities[name] || 0);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function populateOrderItems(container, order, isEditing) {
|
||||
if (isEditing) {
|
||||
Object.keys(editQuantities).forEach(name => {
|
||||
container.appendChild(buildEditQtyRow(name, editQuantities[name] || 0));
|
||||
});
|
||||
const availableMeals = ADMIN_MEALS.filter(
|
||||
m => !Object.prototype.hasOwnProperty.call(editQuantities, m.name)
|
||||
);
|
||||
if (availableMeals.length > 0) {
|
||||
container.appendChild(buildAddItemSelect(availableMeals));
|
||||
}
|
||||
return '$' + editTotal().toFixed(2);
|
||||
}
|
||||
|
||||
order.items.forEach(item => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'admin-item';
|
||||
row.appendChild(document.createTextNode(item.name + ' ×' + item.quantity + ' '));
|
||||
const sub = document.createElement('span');
|
||||
sub.className = 'admin-muted';
|
||||
sub.textContent = '($' + item.subtotal.toFixed(2) + ')';
|
||||
row.appendChild(sub);
|
||||
container.appendChild(row);
|
||||
});
|
||||
return '$' + order.total.toFixed(2);
|
||||
}
|
||||
|
||||
function buildAdminCard(order, idx) {
|
||||
const card = document.createElement('article');
|
||||
card.className = 'admin-order-card';
|
||||
card.dataset.email = order.employee_email;
|
||||
const isEditing = editingOrder === order.employee_email;
|
||||
|
||||
const header = document.createElement('div');
|
||||
header.className = 'admin-card-header';
|
||||
const employee = document.createElement('div');
|
||||
employee.className = 'admin-card-employee';
|
||||
const name = document.createElement('strong');
|
||||
name.textContent = order.employee_name;
|
||||
const email = document.createElement('span');
|
||||
email.className = 'admin-muted';
|
||||
email.textContent = order.employee_email;
|
||||
employee.appendChild(name);
|
||||
employee.appendChild(email);
|
||||
const time = document.createElement('span');
|
||||
time.className = 'admin-card-time';
|
||||
time.textContent = formatSubmittedAt(order.submitted_at);
|
||||
header.appendChild(employee);
|
||||
header.appendChild(time);
|
||||
|
||||
const items = document.createElement('div');
|
||||
items.className = 'admin-card-items';
|
||||
const total = populateOrderItems(items, order, isEditing);
|
||||
|
||||
const footer = document.createElement('div');
|
||||
footer.className = 'admin-card-footer';
|
||||
const totalWrap = document.createElement('div');
|
||||
totalWrap.className = 'admin-card-total';
|
||||
const totalLabel = document.createElement('span');
|
||||
totalLabel.textContent = 'Total';
|
||||
const totalValue = document.createElement('strong');
|
||||
totalValue.textContent = total;
|
||||
totalWrap.appendChild(totalLabel);
|
||||
totalWrap.appendChild(totalValue);
|
||||
footer.appendChild(totalWrap);
|
||||
footer.appendChild(
|
||||
isEditing
|
||||
? buildEditActions(order.employee_email)
|
||||
: buildViewActions(idx, order.employee_email, order.employee_name)
|
||||
);
|
||||
|
||||
card.appendChild(header);
|
||||
card.appendChild(items);
|
||||
card.appendChild(footer);
|
||||
return card;
|
||||
}
|
||||
|
||||
function renderAdminCards(data) {
|
||||
const cards = document.getElementById('admin-cards');
|
||||
cards.innerHTML = '';
|
||||
(data.orders || []).forEach((order, idx) => {
|
||||
cards.appendChild(buildAdminCard(order, idx));
|
||||
});
|
||||
}
|
||||
|
||||
function renderAdminTable(data) {
|
||||
lastAdminData = data;
|
||||
const hasOrders = !!(data.orders && data.orders.length > 0);
|
||||
|
|
@ -130,6 +256,8 @@ function renderAdminTable(data) {
|
|||
if (dlBtn) dlBtn.disabled = !hasOrders;
|
||||
const tbody = document.getElementById('admin-tbody');
|
||||
tbody.innerHTML = '';
|
||||
const cards = document.getElementById('admin-cards');
|
||||
cards.innerHTML = '';
|
||||
|
||||
if (!hasOrders) {
|
||||
document.getElementById('admin-empty').classList.remove('is-hidden');
|
||||
|
|
@ -178,17 +306,11 @@ function renderAdminTable(data) {
|
|||
itemsTd.appendChild(buildEditQtyRow(name, editQuantities[name] || 0));
|
||||
itemsTd.appendChild(document.createElement('br'));
|
||||
});
|
||||
const availableMeals = MEALS.filter(m => !Object.prototype.hasOwnProperty.call(editQuantities, m.name));
|
||||
const availableMeals = ADMIN_MEALS.filter(m => !Object.prototype.hasOwnProperty.call(editQuantities, m.name));
|
||||
if (availableMeals.length > 0) {
|
||||
itemsTd.appendChild(buildAddItemSelect(availableMeals));
|
||||
}
|
||||
const menuPrices = {};
|
||||
MEALS.forEach(m => { menuPrices[m.name] = m.price; });
|
||||
const newTotal = editNames.reduce((sum, name) => {
|
||||
const price = menuPrices[name] || 0;
|
||||
return sum + price * (editQuantities[name] || 0);
|
||||
}, 0);
|
||||
totalHtml = '$' + newTotal.toFixed(2);
|
||||
totalHtml = '$' + editTotal().toFixed(2);
|
||||
tr.appendChild(empTd);
|
||||
tr.appendChild(itemsTd);
|
||||
} else {
|
||||
|
|
@ -211,15 +333,7 @@ function renderAdminTable(data) {
|
|||
|
||||
const timeTd = document.createElement('td');
|
||||
timeTd.className = 'time-cell';
|
||||
timeTd.textContent = order.submitted_at
|
||||
? new Date(order.submitted_at).toLocaleString('en-US', {
|
||||
timeZone: 'America/New_York',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: '';
|
||||
timeTd.textContent = formatSubmittedAt(order.submitted_at);
|
||||
|
||||
const actionsTd = document.createElement('td');
|
||||
if (isEditing) {
|
||||
|
|
@ -250,6 +364,7 @@ function renderAdminTable(data) {
|
|||
totalRow.appendChild(document.createElement('td'));
|
||||
totalRow.appendChild(document.createElement('td'));
|
||||
tbody.appendChild(totalRow);
|
||||
renderAdminCards(data);
|
||||
}
|
||||
|
||||
function downloadOrderList() {
|
||||
|
|
@ -267,7 +382,7 @@ function downloadOrderList() {
|
|||
};
|
||||
const rows = [['Item', 'Quantity']].concat(names.map(n => [n, totals[n]]));
|
||||
const csv = rows.map(r => r.map(esc).join(',')).join('\r\n');
|
||||
const week = data.week || currentAdminWeek || WEEK;
|
||||
const week = data.week || currentAdminWeek || ADMIN_WEEK;
|
||||
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
|
|
@ -280,10 +395,11 @@ function downloadOrderList() {
|
|||
}
|
||||
|
||||
function downloadSummaryPdf() {
|
||||
const week = currentAdminWeek || WEEK;
|
||||
clearAdminStatus();
|
||||
const week = currentAdminWeek || ADMIN_WEEK;
|
||||
const btn = document.getElementById('admin-pdf-btn');
|
||||
if (btn) btn.disabled = true;
|
||||
fetch(ADMIN_PDF_URL + '?week=' + encodeURIComponent(week), { headers: adminHeaders() })
|
||||
fetch(ADMIN_SUMMARY_PDF_URL + '?week=' + encodeURIComponent(week), { headers: adminHeaders() })
|
||||
.then(r => r.json().then(data => ({ ok: r.ok, status: r.status, data })))
|
||||
.then(({ ok, status, data }) => {
|
||||
if (ok && data.url) {
|
||||
|
|
@ -291,21 +407,27 @@ function downloadSummaryPdf() {
|
|||
if (typeof data.url === 'string' && data.url.startsWith('https://')) {
|
||||
window.location.href = data.url;
|
||||
} else {
|
||||
alert('Could not fetch the summary PDF: invalid URL');
|
||||
showAdminStatus('Could not fetch the summary PDF: invalid URL');
|
||||
}
|
||||
} else if (status === 404) {
|
||||
alert('No summary PDF for ' + week + ' yet — it is generated when the week closes on Thursday.');
|
||||
showAdminStatus(
|
||||
'No summary PDF for ' + week + ' yet — it is generated when the week closes on Thursday.'
|
||||
);
|
||||
} else {
|
||||
alert('Could not fetch the summary PDF: ' + (data.error || 'unknown error'));
|
||||
showAdminStatus('Could not fetch the summary PDF: ' + (data.error || 'unknown error'));
|
||||
}
|
||||
})
|
||||
.catch(() => alert('Could not fetch the summary PDF.'))
|
||||
.catch(() => showAdminStatus('Could not fetch the summary PDF.'))
|
||||
.finally(() => { if (btn) btn.disabled = false; });
|
||||
}
|
||||
|
||||
function adminStartEdit(idx, email) {
|
||||
fetch(ADMIN_URL + '?week=' + encodeURIComponent(currentAdminWeek), { headers: adminHeaders() })
|
||||
.then(r => r.json())
|
||||
clearAdminStatus();
|
||||
fetch(ADMIN_API_URL + '?week=' + encodeURIComponent(currentAdminWeek), { headers: adminHeaders() })
|
||||
.then(r => {
|
||||
if (!r.ok) throw new Error('Could not load this order.');
|
||||
return r.json();
|
||||
})
|
||||
.then(data => {
|
||||
lastAdminData = data;
|
||||
const order = data.orders.find(o => o.employee_email === email);
|
||||
|
|
@ -314,7 +436,8 @@ function adminStartEdit(idx, email) {
|
|||
editQuantities = {};
|
||||
order.items.forEach(i => { editQuantities[i.name] = i.quantity; });
|
||||
renderAdminTable(data);
|
||||
});
|
||||
})
|
||||
.catch(e => showAdminStatus(e.message || 'Could not load this order.'));
|
||||
}
|
||||
|
||||
function adminCancelEdit() {
|
||||
|
|
@ -336,6 +459,7 @@ function adminAddItem(name) {
|
|||
}
|
||||
|
||||
function adminSaveEdit(email) {
|
||||
clearAdminStatus();
|
||||
const items = Object.entries(editQuantities)
|
||||
.filter(([, q]) => q > 0)
|
||||
.map(([name, quantity]) => ({ name, quantity }));
|
||||
|
|
@ -345,26 +469,27 @@ function adminSaveEdit(email) {
|
|||
}
|
||||
return;
|
||||
}
|
||||
fetch(ADMIN_URL, {
|
||||
fetch(ADMIN_API_URL, {
|
||||
method: 'PUT',
|
||||
headers: { ...adminHeaders(), 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ week: currentAdminWeek, email, items }),
|
||||
})
|
||||
.then(r => { if (!r.ok) return r.json().then(d => { throw new Error(d.error); }); return r.json(); })
|
||||
.then(() => { editingOrder = null; editQuantities = {}; loadWeekOrders(currentAdminWeek); })
|
||||
.catch(e => alert('Failed to update: ' + e.message));
|
||||
.catch(e => showAdminStatus('Failed to update: ' + e.message));
|
||||
}
|
||||
|
||||
function adminDeleteOrder(email, name) {
|
||||
const label = name ? name + ' (' + email + ')' : email;
|
||||
if (!confirm('Delete order for ' + label + '?')) return;
|
||||
fetch(ADMIN_URL + '?week=' + encodeURIComponent(currentAdminWeek) + '&email=' + encodeURIComponent(email), {
|
||||
clearAdminStatus();
|
||||
fetch(ADMIN_API_URL + '?week=' + encodeURIComponent(currentAdminWeek) + '&email=' + encodeURIComponent(email), {
|
||||
method: 'DELETE',
|
||||
headers: adminHeaders(),
|
||||
})
|
||||
.then(r => { if (!r.ok) return r.json().then(d => { throw new Error(d.error); }); return r.json(); })
|
||||
.then(() => loadWeekOrders(currentAdminWeek))
|
||||
.catch(e => alert('Failed to delete: ' + e.message));
|
||||
.catch(e => showAdminStatus('Failed to delete: ' + e.message));
|
||||
}
|
||||
|
||||
function handleAdminPanelClick(e) {
|
||||
|
|
|
|||
|
|
@ -355,6 +355,8 @@ header p { font-size: 0.85rem; opacity: 0.8; }
|
|||
.qty-control .qty { width: 44px; height: 44px; }
|
||||
.edit-qty button { width: 44px; height: 44px; }
|
||||
.edit-qty span { width: 44px; height: 44px; line-height: 44px; }
|
||||
.admin-order-card .btn,
|
||||
.admin-add-item select { min-height: 44px; }
|
||||
}
|
||||
|
||||
.discount-banner {
|
||||
|
|
@ -442,6 +444,7 @@ header p { font-size: 0.85rem; opacity: 0.8; }
|
|||
border-radius: var(--radius-card);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-card);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
|
|
@ -479,6 +482,17 @@ header p { font-size: 0.85rem; opacity: 0.8; }
|
|||
.admin-stats { font-size: 0.9rem; color: var(--color-muted); margin-bottom: 16px; }
|
||||
.admin-stats strong { color: #1d1d1f; }
|
||||
|
||||
.admin-status-regions:empty { display: none; }
|
||||
|
||||
.admin-status {
|
||||
margin-bottom: 12px;
|
||||
font-size: 0.9rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-status:empty { display: none; }
|
||||
.admin-status-error { color: #991b1b; }
|
||||
|
||||
.admin-table-wrap { overflow-x: auto; }
|
||||
|
||||
.admin-table {
|
||||
|
|
@ -515,6 +529,64 @@ header p { font-size: 0.85rem; opacity: 0.8; }
|
|||
|
||||
.admin-empty { text-align: center; padding: 40px 20px; color: #9ca3af; }
|
||||
|
||||
.admin-cards { display: none; }
|
||||
|
||||
.admin-order-card {
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: var(--radius-card);
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.admin-card-header,
|
||||
.admin-card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-card-employee {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-card-time {
|
||||
flex: 0 0 auto;
|
||||
color: #9ca3af;
|
||||
font-size: 0.8rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.admin-card-items {
|
||||
margin: 16px 0;
|
||||
color: #4b5563;
|
||||
font-size: 0.9rem;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-item + .admin-item { margin-top: 6px; }
|
||||
|
||||
.admin-card-total {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-card-total span {
|
||||
color: var(--color-muted);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.admin-actions { display: flex; gap: 6px; white-space: nowrap; flex-wrap: wrap; }
|
||||
|
||||
.btn-edit { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
|
||||
|
|
@ -584,3 +656,35 @@ header p { font-size: 0.85rem; opacity: 0.8; }
|
|||
|
||||
.admin-loading { color: #9ca3af; }
|
||||
.admin-error { color: #991b1b; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.admin-panel { padding: 12px; }
|
||||
.admin-table-wrap { display: none; }
|
||||
.admin-cards {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.admin-card-header,
|
||||
.admin-card-footer {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.admin-card-footer .admin-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.admin-card-items .edit-qty {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.admin-card-items .edit-qty button { width: 44px; height: 44px; }
|
||||
.admin-card-items .edit-qty span {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
.admin-add-item select {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,6 +115,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="admin-stats" class="admin-stats"></div>
|
||||
<div class="admin-status-regions">
|
||||
<div id="admin-alert" class="admin-status admin-status-error" role="alert"></div>
|
||||
<div id="admin-status" class="admin-status" role="status"></div>
|
||||
</div>
|
||||
<div class="admin-table-wrap">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
|
|
@ -129,6 +133,7 @@
|
|||
<tbody id="admin-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="admin-cards" class="admin-cards"></div>
|
||||
<div id="admin-empty" class="admin-empty is-hidden">No orders for this week.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -142,6 +142,23 @@ class TestGenerateFormStructural:
|
|||
# Static markup must not interpolate runtime data into onclick
|
||||
assert not re.search(r'onclick="[^"]*\$\{', html)
|
||||
|
||||
def test_mobile_admin_card_structure_and_breakpoint(self):
|
||||
html = _render()
|
||||
css = (SERVER_DIR / "templates" / "form.css").read_text()
|
||||
admin_js = (SERVER_DIR / "templates" / "admin.js").read_text()
|
||||
|
||||
assert 'id="admin-cards"' in html
|
||||
assert 'id="admin-alert"' in html
|
||||
assert 'role="alert"' in html
|
||||
assert 'id="admin-status"' in html
|
||||
assert 'role="status"' in html
|
||||
assert "@media (max-width: 767px)" in css
|
||||
assert ".admin-table-wrap { display: none; }" in css
|
||||
assert "buildAdminCard" in admin_js
|
||||
assert "dataset.adminAction" in admin_js
|
||||
assert "alert(" not in admin_js
|
||||
assert "confirm(" in admin_js
|
||||
|
||||
def test_script_breakout_meal_escaped(self):
|
||||
html = _render()
|
||||
assert "</script><script>alert(1)</script>" not in html
|
||||
|
|
@ -302,3 +319,209 @@ class TestGenerateFormPlaywright:
|
|||
"() => document.getElementById('count-display').textContent === '2 meals'"
|
||||
)
|
||||
assert page.locator("#total-display").inner_text() == "$10.80"
|
||||
|
||||
@pytest.fixture(scope="class")
|
||||
def mobile_admin_page(self, tmp_path_factory, browser_page):
|
||||
html = _render(google=False, api_key="")
|
||||
out = tmp_path_factory.mktemp("admin-form") / "order-form.html"
|
||||
out.write_text(html)
|
||||
hostile_name = """O'Reilly "<b>Ops</b>\""""
|
||||
state = {
|
||||
"fail_put": False,
|
||||
"dialogs": [],
|
||||
"orders": [
|
||||
{
|
||||
"employee_name": hostile_name,
|
||||
"employee_email": "hostile@example.com",
|
||||
"submitted_at": "2026-07-30T14:15:00Z",
|
||||
"items": [
|
||||
{
|
||||
"name": "Chicken Bowl",
|
||||
"quantity": 1,
|
||||
"subtotal": 12.0,
|
||||
}
|
||||
],
|
||||
"total": 12.0,
|
||||
}
|
||||
],
|
||||
}
|
||||
prices = {
|
||||
"Chicken Bowl": 12.0,
|
||||
"Luis' Lomo Saltado": 14.5,
|
||||
'Meal with "quotes"': 11.0,
|
||||
"</script><script>alert(1)</script>": 9.0,
|
||||
}
|
||||
|
||||
def admin_payload():
|
||||
return {
|
||||
"week": "2026-W30",
|
||||
"orders": state["orders"],
|
||||
"total_employees": len(state["orders"]),
|
||||
"grand_total": sum(order["total"] for order in state["orders"]),
|
||||
}
|
||||
|
||||
def handle_admin(route):
|
||||
request = route.request
|
||||
if request.method == "PUT":
|
||||
if state["fail_put"]:
|
||||
route.fulfill(
|
||||
status=500,
|
||||
content_type="application/json",
|
||||
body='{"error":"hostile update failed"}',
|
||||
)
|
||||
return
|
||||
payload = request.post_data_json
|
||||
order = state["orders"][0]
|
||||
order["items"] = [
|
||||
{
|
||||
"name": item["name"],
|
||||
"quantity": item["quantity"],
|
||||
"subtotal": prices[item["name"]] * item["quantity"],
|
||||
}
|
||||
for item in payload["items"]
|
||||
]
|
||||
order["total"] = sum(item["subtotal"] for item in order["items"])
|
||||
route.fulfill(
|
||||
status=200,
|
||||
content_type="application/json",
|
||||
body='{"ok":true}',
|
||||
)
|
||||
return
|
||||
if request.method == "DELETE":
|
||||
state["orders"] = []
|
||||
route.fulfill(
|
||||
status=200,
|
||||
content_type="application/json",
|
||||
body='{"ok":true}',
|
||||
)
|
||||
return
|
||||
route.fulfill(
|
||||
status=200,
|
||||
content_type="application/json",
|
||||
body=json.dumps(admin_payload()),
|
||||
)
|
||||
|
||||
context = browser_page.context.browser.new_context(
|
||||
viewport={"width": 375, "height": 800},
|
||||
has_touch=True,
|
||||
is_mobile=True,
|
||||
)
|
||||
page = context.new_page()
|
||||
page.route(
|
||||
"**/api/form-status/**",
|
||||
lambda route: route.fulfill(
|
||||
status=200,
|
||||
content_type="application/json",
|
||||
body='{"status":"open"}',
|
||||
),
|
||||
)
|
||||
page.route(
|
||||
"**/api/roster",
|
||||
lambda route: route.fulfill(
|
||||
status=200,
|
||||
content_type="application/json",
|
||||
body='{"employees":[]}',
|
||||
),
|
||||
)
|
||||
page.route("**/api/admin/orders**", handle_admin)
|
||||
page.on(
|
||||
"dialog",
|
||||
lambda dialog: (
|
||||
state["dialogs"].append(dialog.message),
|
||||
dialog.accept(),
|
||||
),
|
||||
)
|
||||
page.goto(out.as_uri())
|
||||
page.evaluate(
|
||||
"() => { window.showAdmin(); window.loadWeekOrders('2026-W30'); }"
|
||||
)
|
||||
page.wait_for_selector(".admin-order-card")
|
||||
yield page, state, hostile_name
|
||||
context.close()
|
||||
|
||||
def test_mobile_admin_card_complete_workflow(self, mobile_admin_page):
|
||||
page, state, hostile_name = mobile_admin_page
|
||||
card = page.locator(".admin-order-card")
|
||||
|
||||
assert card.is_visible()
|
||||
assert not page.locator(".admin-table-wrap").is_visible()
|
||||
assert hostile_name in card.inner_text()
|
||||
assert "hostile@example.com" in card.inner_text()
|
||||
assert "Chicken Bowl ×1" in card.inner_text()
|
||||
assert "$12.00" in card.inner_text()
|
||||
assert page.evaluate(
|
||||
"() => document.documentElement.scrollWidth === "
|
||||
"document.documentElement.clientWidth"
|
||||
)
|
||||
|
||||
card.locator('[data-admin-action="start-edit"]').click()
|
||||
page.wait_for_selector('.admin-order-card [data-admin-action="save-edit"]')
|
||||
minus = page.locator(
|
||||
'.admin-order-card [data-admin-action="edit-qty"][data-delta="-1"]'
|
||||
)
|
||||
assert minus.get_attribute("aria-label") == "Remove one Chicken Bowl"
|
||||
assert minus.evaluate("(el) => el.getBoundingClientRect().height") >= 44
|
||||
|
||||
add_item = page.locator(
|
||||
'.admin-order-card [data-admin-action="add-item-select"]'
|
||||
)
|
||||
add_item.select_option(label="Luis' Lomo Saltado ($14.50)")
|
||||
page.wait_for_selector(
|
||||
'.admin-order-card [data-meal-name="Luis\\\' Lomo Saltado"]'
|
||||
)
|
||||
page.locator(
|
||||
'.admin-order-card [data-meal-name="Luis\\\' Lomo Saltado"][data-delta="1"]'
|
||||
).click()
|
||||
page.locator('.admin-order-card [data-admin-action="save-edit"]').click()
|
||||
page.wait_for_function(
|
||||
"() => document.querySelector('.admin-order-card')"
|
||||
'.textContent.includes("Luis\' Lomo Saltado ×2")'
|
||||
)
|
||||
assert state["orders"][0]["employee_name"] == hostile_name
|
||||
assert state["orders"][0]["total"] == 41.0
|
||||
|
||||
page.locator('.admin-order-card [data-admin-action="start-edit"]').click()
|
||||
page.wait_for_selector('.admin-order-card [data-admin-action="cancel-edit"]')
|
||||
page.locator(
|
||||
'.admin-order-card [data-admin-action="edit-qty"][data-delta="1"]'
|
||||
).first.click()
|
||||
page.locator('.admin-order-card [data-admin-action="cancel-edit"]').click()
|
||||
assert page.locator(
|
||||
'.admin-order-card [data-admin-action="start-edit"]'
|
||||
).is_visible()
|
||||
|
||||
for width in (320, 375, 767):
|
||||
page.set_viewport_size({"width": width, "height": 800})
|
||||
assert page.locator(".admin-order-card").is_visible()
|
||||
assert page.evaluate(
|
||||
"() => document.documentElement.scrollWidth === "
|
||||
"document.documentElement.clientWidth"
|
||||
)
|
||||
assert page.evaluate(
|
||||
"""() => Array.from(document.querySelectorAll('#admin-panel *'))
|
||||
.filter((el) => el.offsetParent !== null)
|
||||
.every((el) => el.scrollWidth <= el.clientWidth + 1)"""
|
||||
)
|
||||
|
||||
page.set_viewport_size({"width": 768, "height": 800})
|
||||
assert page.locator(".admin-table-wrap").is_visible()
|
||||
assert not page.locator(".admin-order-card").is_visible()
|
||||
|
||||
page.set_viewport_size({"width": 375, "height": 800})
|
||||
state["fail_put"] = True
|
||||
page.locator('.admin-order-card [data-admin-action="start-edit"]').click()
|
||||
page.wait_for_selector('.admin-order-card [data-admin-action="save-edit"]')
|
||||
page.locator('.admin-order-card [data-admin-action="save-edit"]').click()
|
||||
page.wait_for_function(
|
||||
"() => document.getElementById('admin-alert').textContent"
|
||||
".includes('hostile update failed')"
|
||||
)
|
||||
state["fail_put"] = False
|
||||
page.locator('.admin-order-card [data-admin-action="save-edit"]').click()
|
||||
page.wait_for_selector('.admin-order-card [data-admin-action="start-edit"]')
|
||||
assert page.locator("#admin-alert").inner_text() == ""
|
||||
|
||||
page.locator('.admin-order-card [data-admin-action="delete"]').click()
|
||||
page.wait_for_selector("#admin-empty:not(.is-hidden)")
|
||||
assert hostile_name in state["dialogs"][-1]
|
||||
assert state["orders"] == []
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue