Archived
Catering tables: the spreadsheet becomes data the bakery can edit
The goodie box and catering prices arrived as a spreadsheet — Office, Parties and Weddings, each a
few columns of sizes and prices with lines of baked goods underneath. This puts it behind
/api/catering and makes every part of it editable at /admin, because the prices move and the
spreadsheet's own last line says the tables are "mostly just an idea for people".
A package is one table, its tiers are the columns, its rows are the lines, and a line holds one
value per column. That alignment is why this is an aggregate rather than three tables edited
separately: drop the middle column on its own and every remaining entry shifts one place left, so
the Large box advertises the Medium box's contents at the Large price and nothing looks broken.
CateringPackage#arrange takes a whole table, renumbers positions from the order it arrived in, and
refuses an arrangement whose lines and columns disagree.
Money owns prices — what "24", "$24" or "24.50" means and how it prints — so the browser never
formats money and never multiplies it by 100 in floating point. Cents in the column, "$24" in the
response. An empty price is "ask us", not zero.
Seeded from the bakery's own wording. Shorthand is expanded ("4 dz cc or sc") and typos fixed, since
customers read these lines; in the wedding table the labels and the values are offset in the source
spreadsheet, so they are carried over literally and can be renamed in the admin. The lines that are
named but never quantified keep their blank cells: dropping the blanks would shorten the line and
shift everything after it.
The public response leaves out a table with no columns or no lines — adding a table and filling it
in are two separate acts, and the gap between them shouldn't put a bare heading on the live page.
No public page renders any of this yet; this is the backend and the editor for it.
Admin endpoints are @ConditionalOnProperty on SECURITY_MODE=OIDC like the rest, so a deployment with
no identity provider has no price writes. 18 new tests: the seeded spreadsheet, the alignment
invariant, money in both directions, and the HTTP surface the screen actually calls (including that
/packages/order isn't read as a table id, and that a refusal arrives as a ProblemDetail sentence).
This commit is contained in:
@@ -0,0 +1,570 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
addCateringTable,
|
||||
adminCatering,
|
||||
deleteCateringTable,
|
||||
reorderCateringTables,
|
||||
saveCateringNotes,
|
||||
saveCateringTable,
|
||||
type CateringTable,
|
||||
} from '@/lib/api';
|
||||
import {
|
||||
ARROW_DOWN,
|
||||
ARROW_LEFT,
|
||||
ARROW_RIGHT,
|
||||
ARROW_UP,
|
||||
CHECK,
|
||||
Icon,
|
||||
PLUS,
|
||||
TRASH,
|
||||
X,
|
||||
danger,
|
||||
field,
|
||||
iconButton,
|
||||
primary,
|
||||
secondary,
|
||||
shift,
|
||||
} from '@/components/admin/ui';
|
||||
|
||||
/**
|
||||
* The goodie box and catering price tables, editable by the person who quotes them.
|
||||
*
|
||||
* A table is edited as a table and saved in one go, unlike the catalogue next door where every change
|
||||
* saves as you make it. That's not a different taste in interfaces: a column heading, its price and
|
||||
* the entries beneath it only mean anything together, so they have to be moved, added and removed
|
||||
* together. Adding a column here adds an empty entry to every line, and removing one takes its
|
||||
* entries with it — the server refuses any table whose lines and columns disagree, because the
|
||||
* alternative is the Large box quietly advertising the Medium box's contents at the Large price.
|
||||
*/
|
||||
|
||||
// --- what's on screen -------------------------------------------------------
|
||||
|
||||
type TierDraft = { id: number | null; label: string; price: string };
|
||||
type RowDraft = { id: number | null; label: string; values: string[] };
|
||||
type Draft = { name: string; blurb: string; tiers: TierDraft[]; rows: RowDraft[]; notes: string[] };
|
||||
|
||||
const draftOf = (table: CateringTable): Draft => ({
|
||||
name: table.name,
|
||||
blurb: table.blurb ?? '',
|
||||
// The price arrives written out ("$24"); it goes back as whatever the editor leaves in the box, and
|
||||
// the server decides what that's worth.
|
||||
tiers: table.tiers.map((tier) => ({ id: tier.id, label: tier.label, price: tier.price ?? '' })),
|
||||
rows: table.rows.map((row) => ({ id: row.id, label: row.label, values: [...row.values] })),
|
||||
notes: [...table.notes],
|
||||
});
|
||||
|
||||
/** Notes are edited as a list; deleting one is an omission, exactly as the server expects. */
|
||||
const Notes = ({
|
||||
notes,
|
||||
hint,
|
||||
disabled,
|
||||
onChange,
|
||||
}: {
|
||||
notes: string[];
|
||||
hint: string;
|
||||
disabled?: boolean;
|
||||
onChange: (notes: string[]) => void;
|
||||
}) => (
|
||||
<div>
|
||||
<p className="text-sm text-bakery-600">{hint}</p>
|
||||
<ul className="mt-2 space-y-2">
|
||||
{notes.map((note, i) => (
|
||||
<li key={i} className="flex items-start gap-2">
|
||||
<textarea
|
||||
className={`${field} min-h-[3.25rem]`}
|
||||
rows={2}
|
||||
value={note}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange(notes.map((n, at) => (at === i ? e.target.value : n)))}
|
||||
/>
|
||||
<div className="flex gap-1 pt-1">
|
||||
<button
|
||||
type="button"
|
||||
className={iconButton}
|
||||
disabled={disabled || i === 0}
|
||||
onClick={() => onChange(shift(notes, i, -1))}
|
||||
aria-label="Move note up"
|
||||
>
|
||||
<Icon d={ARROW_UP} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={iconButton}
|
||||
disabled={disabled}
|
||||
onClick={() => onChange(notes.filter((_, at) => at !== i))}
|
||||
aria-label="Remove note"
|
||||
>
|
||||
<Icon d={TRASH} />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button
|
||||
type="button"
|
||||
className={`${secondary} mt-2`}
|
||||
disabled={disabled}
|
||||
onClick={() => onChange([...notes, ''])}
|
||||
>
|
||||
<Icon d={PLUS} />
|
||||
Add a note
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
// --- one table --------------------------------------------------------------
|
||||
|
||||
const TableCard = ({
|
||||
table,
|
||||
first,
|
||||
last,
|
||||
onSaved,
|
||||
onMove,
|
||||
onDelete,
|
||||
onError,
|
||||
}: {
|
||||
table: CateringTable;
|
||||
first: boolean;
|
||||
last: boolean;
|
||||
onSaved: (saved: CateringTable) => void;
|
||||
onMove: (delta: number) => void;
|
||||
onDelete: () => void;
|
||||
onError: (message: string) => void;
|
||||
}) => {
|
||||
const [draft, setDraft] = useState<Draft>(() => draftOf(table));
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const stored = draftOf(table);
|
||||
const dirty = JSON.stringify(draft) !== JSON.stringify(stored);
|
||||
|
||||
// A reorder re-renders this card with a fresh copy from the server; the boxes should follow along
|
||||
// unless they're being edited.
|
||||
const [synced, setSynced] = useState(table);
|
||||
if (synced !== table) {
|
||||
setSynced(table);
|
||||
if (!dirty) setDraft(draftOf(table));
|
||||
}
|
||||
|
||||
const edit = (change: Partial<Draft>) => setDraft({ ...draft, ...change });
|
||||
|
||||
// Columns. Every one of these keeps the lines in step — that is the whole job of this screen.
|
||||
const addColumn = () =>
|
||||
edit({
|
||||
tiers: [...draft.tiers, { id: null, label: '', price: '' }],
|
||||
rows: draft.rows.map((row) => ({ ...row, values: [...row.values, ''] })),
|
||||
});
|
||||
|
||||
const removeColumn = (column: number) =>
|
||||
edit({
|
||||
tiers: draft.tiers.filter((_, at) => at !== column),
|
||||
rows: draft.rows.map((row) => ({ ...row, values: row.values.filter((_, at) => at !== column) })),
|
||||
});
|
||||
|
||||
const moveColumn = (column: number, delta: number) =>
|
||||
edit({
|
||||
tiers: shift(draft.tiers, column, delta),
|
||||
rows: draft.rows.map((row) => ({ ...row, values: shift(row.values, column, delta) })),
|
||||
});
|
||||
|
||||
const setColumn = (column: number, change: Partial<TierDraft>) =>
|
||||
edit({ tiers: draft.tiers.map((tier, at) => (at === column ? { ...tier, ...change } : tier)) });
|
||||
|
||||
// Lines.
|
||||
const addLine = () =>
|
||||
edit({ rows: [...draft.rows, { id: null, label: '', values: draft.tiers.map(() => '') }] });
|
||||
|
||||
const setLine = (line: number, change: Partial<RowDraft>) =>
|
||||
edit({ rows: draft.rows.map((row, at) => (at === line ? { ...row, ...change } : row)) });
|
||||
|
||||
const setCell = (line: number, column: number, value: string) =>
|
||||
setLine(line, {
|
||||
values: draft.rows[line].values.map((entry, at) => (at === column ? value : entry)),
|
||||
});
|
||||
|
||||
const save = async () => {
|
||||
setBusy(true);
|
||||
try {
|
||||
onSaved(
|
||||
await saveCateringTable(table.id, {
|
||||
name: draft.name.trim(),
|
||||
blurb: draft.blurb.trim() || null,
|
||||
tiers: draft.tiers.map((tier) => ({ id: tier.id, label: tier.label.trim(), price: tier.price.trim() })),
|
||||
rows: draft.rows.map((row) => ({
|
||||
id: row.id,
|
||||
label: row.label.trim(),
|
||||
values: row.values.map((entry) => entry.trim()),
|
||||
})),
|
||||
notes: draft.notes,
|
||||
}),
|
||||
);
|
||||
} catch (e) {
|
||||
onError(e instanceof Error ? e.message : 'That did not save.');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = draft.tiers.length;
|
||||
|
||||
return (
|
||||
<li className="rounded-lg border border-bakery-200 bg-white p-4 shadow-sm">
|
||||
<div className="flex flex-wrap items-start gap-2">
|
||||
<div className="flex gap-1 pt-1">
|
||||
<button
|
||||
type="button"
|
||||
className={iconButton}
|
||||
disabled={first}
|
||||
onClick={() => onMove(-1)}
|
||||
aria-label={`Move the ${table.name} table up`}
|
||||
>
|
||||
<Icon d={ARROW_UP} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={iconButton}
|
||||
disabled={last}
|
||||
onClick={() => onMove(1)}
|
||||
aria-label={`Move the ${table.name} table down`}
|
||||
>
|
||||
<Icon d={ARROW_DOWN} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid flex-1 gap-2 sm:grid-cols-[14rem_1fr]">
|
||||
<label className="block">
|
||||
<span className="sr-only">Table name</span>
|
||||
<input
|
||||
className={field}
|
||||
value={draft.name}
|
||||
onChange={(e) => edit({ name: e.target.value })}
|
||||
placeholder="Weddings"
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="sr-only">A line under the heading</span>
|
||||
<input
|
||||
className={field}
|
||||
value={draft.blurb}
|
||||
onChange={(e) => edit({ blurb: e.target.value })}
|
||||
placeholder="Optional — a line under the heading"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Wide tables scroll here rather than making the page scroll sideways. */}
|
||||
<div className="mt-4 -mx-4 overflow-x-auto px-4">
|
||||
<table className="w-full border-separate border-spacing-1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" className="w-48 text-left text-sm font-medium text-bakery-600">
|
||||
What they get
|
||||
</th>
|
||||
{draft.tiers.map((tier, column) => (
|
||||
<th key={tier.id ?? `new-${column}`} scope="col" className="min-w-44 align-top">
|
||||
<input
|
||||
className={field}
|
||||
value={tier.label}
|
||||
onChange={(e) => setColumn(column, { label: e.target.value })}
|
||||
placeholder="Small"
|
||||
aria-label={`Heading for column ${column + 1}`}
|
||||
/>
|
||||
<input
|
||||
className={`${field} mt-1`}
|
||||
value={tier.price}
|
||||
onChange={(e) => setColumn(column, { price: e.target.value })}
|
||||
placeholder="$24 — leave empty to ask"
|
||||
aria-label={`Price for column ${column + 1}`}
|
||||
/>
|
||||
<div className="mt-1 flex justify-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
className={iconButton}
|
||||
disabled={column === 0}
|
||||
onClick={() => moveColumn(column, -1)}
|
||||
aria-label="Move this column left"
|
||||
>
|
||||
<Icon d={ARROW_LEFT} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={iconButton}
|
||||
disabled={column === columns - 1}
|
||||
onClick={() => moveColumn(column, 1)}
|
||||
aria-label="Move this column right"
|
||||
>
|
||||
<Icon d={ARROW_RIGHT} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={iconButton}
|
||||
onClick={() => removeColumn(column)}
|
||||
aria-label="Remove this column"
|
||||
title="Removes this column and its entries on every line"
|
||||
>
|
||||
<Icon d={TRASH} />
|
||||
</button>
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
<th scope="col" className="w-32 align-top">
|
||||
<button type="button" className={secondary} onClick={addColumn}>
|
||||
<Icon d={PLUS} />
|
||||
Column
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{draft.rows.map((row, line) => (
|
||||
<tr key={row.id ?? `new-${line}`}>
|
||||
<th scope="row" className="text-left align-top">
|
||||
<input
|
||||
className={field}
|
||||
value={row.label}
|
||||
onChange={(e) => setLine(line, { label: e.target.value })}
|
||||
placeholder="Mini muffins"
|
||||
aria-label={`Name of line ${line + 1}`}
|
||||
/>
|
||||
</th>
|
||||
{row.values.map((entry, column) => (
|
||||
<td key={column} className="align-top">
|
||||
<input
|
||||
className={field}
|
||||
value={entry}
|
||||
onChange={(e) => setCell(line, column, e.target.value)}
|
||||
placeholder="—"
|
||||
aria-label={`${row.label || `Line ${line + 1}`}, ${
|
||||
draft.tiers[column]?.label || `column ${column + 1}`
|
||||
}`}
|
||||
/>
|
||||
</td>
|
||||
))}
|
||||
<td className="align-top">
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
className={iconButton}
|
||||
disabled={line === 0}
|
||||
onClick={() => edit({ rows: shift(draft.rows, line, -1) })}
|
||||
aria-label="Move this line up"
|
||||
>
|
||||
<Icon d={ARROW_UP} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={iconButton}
|
||||
disabled={line === draft.rows.length - 1}
|
||||
onClick={() => edit({ rows: shift(draft.rows, line, 1) })}
|
||||
aria-label="Move this line down"
|
||||
>
|
||||
<Icon d={ARROW_DOWN} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={iconButton}
|
||||
onClick={() => edit({ rows: draft.rows.filter((_, at) => at !== line) })}
|
||||
aria-label="Remove this line"
|
||||
>
|
||||
<Icon d={TRASH} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<button type="button" className={`${secondary} mt-1`} onClick={addLine}>
|
||||
<Icon d={PLUS} />
|
||||
Line
|
||||
</button>
|
||||
|
||||
<div className="mt-4">
|
||||
<Notes
|
||||
notes={draft.notes}
|
||||
hint="Small print under this table — minimums, what can't be mixed, how delivery is charged."
|
||||
disabled={busy}
|
||||
onChange={(notes) => edit({ notes })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2 border-t border-bakery-100 pt-3">
|
||||
<button type="button" className={primary} disabled={busy || !dirty} onClick={() => void save()}>
|
||||
<Icon d={CHECK} />
|
||||
{busy ? 'Saving…' : 'Save this table'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={secondary}
|
||||
disabled={busy || !dirty}
|
||||
onClick={() => setDraft(draftOf(table))}
|
||||
>
|
||||
<Icon d={X} />
|
||||
Undo my changes
|
||||
</button>
|
||||
{dirty && <span className="text-sm text-bakery-600">Not saved yet.</span>}
|
||||
{(columns === 0 || draft.rows.length === 0) && !dirty && (
|
||||
<span className="text-sm text-bakery-600">
|
||||
Needs a column and a line before it shows on the page.
|
||||
</span>
|
||||
)}
|
||||
<button type="button" className={`${danger} ml-auto`} disabled={busy} onClick={onDelete}>
|
||||
<Icon d={TRASH} />
|
||||
Delete table
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
// --- the section ------------------------------------------------------------
|
||||
|
||||
const Catering = ({ onError }: { onError: (message: string) => void }) => {
|
||||
const [tables, setTables] = useState<CateringTable[] | null>(null);
|
||||
const [pageNotes, setPageNotes] = useState<string[]>([]);
|
||||
const [storedNotes, setStoredNotes] = useState<string[]>([]);
|
||||
const [fresh, setFresh] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const menu = await adminCatering();
|
||||
setTables(menu.packages);
|
||||
setPageNotes(menu.notes);
|
||||
setStoredNotes(menu.notes);
|
||||
} catch (e) {
|
||||
onError(e instanceof Error ? e.message : 'Could not load the catering tables.');
|
||||
setTables([]);
|
||||
}
|
||||
}, [onError]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
/** Moving a table applies on screen first; this page shouldn't freeze between clicks. */
|
||||
const settle = async (optimistic: CateringTable[], work: () => Promise<unknown>) => {
|
||||
const before = tables ?? [];
|
||||
setTables(optimistic);
|
||||
try {
|
||||
await work();
|
||||
} catch (e) {
|
||||
setTables(before);
|
||||
onError(e instanceof Error ? e.message : 'That did not save.');
|
||||
}
|
||||
};
|
||||
|
||||
const guard = async (work: () => Promise<unknown>) => {
|
||||
setBusy(true);
|
||||
try {
|
||||
await work();
|
||||
} catch (e) {
|
||||
onError(e instanceof Error ? e.message : 'That did not save.');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const notesDirty = JSON.stringify(pageNotes) !== JSON.stringify(storedNotes);
|
||||
|
||||
return (
|
||||
<section>
|
||||
<h2 className="font-adbhashitha text-xl text-bakery-800">Goodie boxes & catering</h2>
|
||||
<p className="mt-1 text-sm text-bakery-600">
|
||||
The price tables, in the order they appear on the page. Each one saves on its own.
|
||||
</p>
|
||||
|
||||
{tables === null ? (
|
||||
<p className="mt-3 text-bakery-600">Loading…</p>
|
||||
) : (
|
||||
<>
|
||||
<ul className="mt-3 space-y-4">
|
||||
{tables.map((table, i) => (
|
||||
<TableCard
|
||||
key={table.id}
|
||||
table={table}
|
||||
first={i === 0}
|
||||
last={i === tables.length - 1}
|
||||
onError={onError}
|
||||
onSaved={(saved) => setTables(tables.map((t) => (t.id === saved.id ? saved : t)))}
|
||||
onMove={(delta) => {
|
||||
const moved = shift(tables, i, delta);
|
||||
void settle(moved, () => reorderCateringTables(moved.map((t) => t.id)));
|
||||
}}
|
||||
onDelete={() => {
|
||||
if (!confirm(`Delete the ${table.name} table and everything in it?`)) return;
|
||||
void settle(
|
||||
tables.filter((t) => t.id !== table.id),
|
||||
() => deleteCateringTable(table.id),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="mt-4 flex gap-2">
|
||||
<input
|
||||
className={field}
|
||||
value={fresh}
|
||||
onChange={(e) => setFresh(e.target.value)}
|
||||
placeholder="New table, e.g. Graduation parties"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={primary}
|
||||
disabled={busy || !fresh.trim()}
|
||||
onClick={() =>
|
||||
void guard(async () => {
|
||||
const added = await addCateringTable(fresh.trim());
|
||||
setTables([...(tables ?? []), added]);
|
||||
setFresh('');
|
||||
})
|
||||
}
|
||||
>
|
||||
<Icon d={PLUS} />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-lg border border-bakery-200 bg-white p-4 shadow-sm">
|
||||
<h3 className="font-adbhashitha text-lg text-bakery-800">Under the whole page</h3>
|
||||
<div className="mt-2">
|
||||
<Notes
|
||||
notes={pageNotes}
|
||||
hint="Terms that apply whichever table someone is reading."
|
||||
disabled={busy}
|
||||
onChange={setPageNotes}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className={primary}
|
||||
disabled={busy || !notesDirty}
|
||||
onClick={() =>
|
||||
void guard(async () => {
|
||||
const saved = await saveCateringNotes(pageNotes);
|
||||
setPageNotes(saved);
|
||||
setStoredNotes(saved);
|
||||
})
|
||||
}
|
||||
>
|
||||
<Icon d={CHECK} />
|
||||
Save these notes
|
||||
</button>
|
||||
{notesDirty && (
|
||||
<button type="button" className={secondary} onClick={() => setPageNotes(storedNotes)}>
|
||||
<Icon d={X} />
|
||||
Undo
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Catering;
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* The small shared pieces of the admin screens: one icon set, one set of button and field looks.
|
||||
*
|
||||
* Extracted from the catalogue editor when the catering tables arrived, so the two screens can't
|
||||
* drift into looking like two different products.
|
||||
*/
|
||||
|
||||
export const Icon = ({ d, className = '' }: { d: string; className?: string }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={`w-4 h-4 ${className}`}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d={d} />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const ARROW_UP = 'M12 19V5M5 12l7-7 7 7';
|
||||
export const ARROW_DOWN = 'M12 5v14M19 12l-7 7-7-7';
|
||||
export const ARROW_LEFT = 'M19 12H5M12 19l-7-7 7-7';
|
||||
export const ARROW_RIGHT = 'M5 12h14M12 5l7 7-7 7';
|
||||
export const TRASH = 'M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6';
|
||||
export const PLUS = 'M12 5v14M5 12h14';
|
||||
export const CHECK = 'M20 6L9 17l-5-5';
|
||||
export const X = 'M18 6L6 18M6 6l12 12';
|
||||
|
||||
const button =
|
||||
'inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium ' +
|
||||
'transition-colors disabled:opacity-40 disabled:cursor-not-allowed';
|
||||
export const primary = `${button} bg-bakery-600 text-white hover:bg-bakery-700`;
|
||||
export const secondary = `${button} border border-bakery-300 text-bakery-800 hover:bg-bakery-100`;
|
||||
export const danger = `${button} text-red-700 hover:bg-red-50`;
|
||||
export const iconButton =
|
||||
'inline-flex items-center justify-center w-7 h-7 rounded-md border border-bakery-300 ' +
|
||||
'text-bakery-700 hover:bg-bakery-100 transition-colors disabled:opacity-30 disabled:cursor-not-allowed';
|
||||
export const field =
|
||||
'w-full rounded-md border border-bakery-300 bg-white px-3 py-2 text-sm ' +
|
||||
'focus:border-bakery-500 focus:outline-none focus:ring-1 focus:ring-bakery-500';
|
||||
|
||||
/** Moves one entry of a list by `delta`, or returns the list untouched if that would fall off an end. */
|
||||
export function shift<T>(items: T[], index: number, delta: number): T[] {
|
||||
const target = index + delta;
|
||||
if (target < 0 || target >= items.length) return items;
|
||||
const next = [...items];
|
||||
[next[index], next[target]] = [next[target], next[index]];
|
||||
return next;
|
||||
}
|
||||
@@ -124,3 +124,75 @@ export const reorderCategories = (ids: number[]) =>
|
||||
|
||||
export const deleteCategory = (id: number) =>
|
||||
send<{ ok: boolean }>(`/api/admin/categories/${id}`, 'DELETE');
|
||||
|
||||
// --- goodie boxes & catering ------------------------------------------------
|
||||
|
||||
/**
|
||||
* A column of a catering table. `price` is already written the way it should be read ("$24") — the
|
||||
* server owns money, both what a typed price means and how it prints — and is null for a column that
|
||||
* doesn't state one. `id` is null only for a column the editor has just added and not yet saved.
|
||||
*/
|
||||
export interface CateringTier {
|
||||
id: number | null;
|
||||
label: string;
|
||||
price: string | null;
|
||||
}
|
||||
|
||||
/** A line of a catering table, with one entry per column, in column order — blanks included. */
|
||||
export interface CateringRow {
|
||||
id: number | null;
|
||||
label: string;
|
||||
values: string[];
|
||||
}
|
||||
|
||||
/** One table: "Office", "Parties", "Weddings". */
|
||||
export interface CateringTable {
|
||||
id: number;
|
||||
name: string;
|
||||
blurb: string | null;
|
||||
tiers: CateringTier[];
|
||||
rows: CateringRow[];
|
||||
/** The rules under this table: minimums, what can't be mixed. */
|
||||
notes: string[];
|
||||
}
|
||||
|
||||
export interface CateringMenu {
|
||||
packages: CateringTable[];
|
||||
/** Terms that apply to the page rather than to any one table. */
|
||||
notes: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* A table as the editor left it, sent whole. It has to be whole: a column and the values beneath it
|
||||
* only mean anything together, so moving or removing one has to carry its entries with it. The
|
||||
* server rejects any table whose lines and columns disagree.
|
||||
*/
|
||||
export interface CateringTableEdit {
|
||||
name: string;
|
||||
blurb: string | null;
|
||||
tiers: { id: number | null; label: string; price: string }[];
|
||||
rows: { id: number | null; label: string; values: string[] }[];
|
||||
notes: string[];
|
||||
}
|
||||
|
||||
/** What a customer sees: finished tables only. */
|
||||
export const fetchCatering = () => get<CateringMenu>('/api/catering');
|
||||
|
||||
/** What the editor sees: the same tables, including any they haven't finished filling in. */
|
||||
export const adminCatering = () => get<CateringMenu>('/api/admin/catering');
|
||||
|
||||
export const addCateringTable = (name: string) =>
|
||||
send<CateringTable>('/api/admin/catering/packages', 'POST', { name });
|
||||
|
||||
export const saveCateringTable = (id: number, table: CateringTableEdit) =>
|
||||
send<CateringTable>(`/api/admin/catering/packages/${id}`, 'PUT', table);
|
||||
|
||||
export const deleteCateringTable = (id: number) =>
|
||||
send<{ ok: boolean }>(`/api/admin/catering/packages/${id}`, 'DELETE');
|
||||
|
||||
export const reorderCateringTables = (ids: number[]) =>
|
||||
send<CateringTable[]>('/api/admin/catering/packages/order', 'PUT', { ids });
|
||||
|
||||
/** The page's own footnotes: the full list, so removing one is an omission. */
|
||||
export const saveCateringNotes = (notes: string[]) =>
|
||||
send<string[]>('/api/admin/catering/notes', 'PUT', notes);
|
||||
|
||||
@@ -15,6 +15,24 @@ import {
|
||||
type AdminCategory,
|
||||
type AdminProduct,
|
||||
} from '@/lib/api';
|
||||
import Catering from '@/components/admin/Catering';
|
||||
import {
|
||||
ARROW_DOWN,
|
||||
ARROW_LEFT,
|
||||
ARROW_RIGHT,
|
||||
ARROW_UP,
|
||||
CHECK,
|
||||
Icon,
|
||||
PLUS,
|
||||
TRASH,
|
||||
X,
|
||||
danger,
|
||||
field,
|
||||
iconButton,
|
||||
primary,
|
||||
secondary,
|
||||
shift,
|
||||
} from '@/components/admin/ui';
|
||||
|
||||
/**
|
||||
* The catalogue, editable by the person who bakes it.
|
||||
@@ -28,54 +46,6 @@ import {
|
||||
* sent to the identity provider before this ever loads.
|
||||
*/
|
||||
|
||||
// --- little pieces ----------------------------------------------------------
|
||||
|
||||
const Icon = ({ d, className = '' }: { d: string; className?: string }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={`w-4 h-4 ${className}`}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d={d} />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ARROW_UP = 'M12 19V5M5 12l7-7 7 7';
|
||||
const ARROW_DOWN = 'M12 5v14M19 12l-7 7-7-7';
|
||||
const ARROW_LEFT = 'M19 12H5M12 19l-7-7 7-7';
|
||||
const ARROW_RIGHT = 'M5 12h14M12 5l7 7-7 7';
|
||||
const TRASH = 'M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6';
|
||||
const PLUS = 'M12 5v14M5 12h14';
|
||||
const CHECK = 'M20 6L9 17l-5-5';
|
||||
const X = 'M18 6L6 18M6 6l12 12';
|
||||
|
||||
const button =
|
||||
'inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium ' +
|
||||
'transition-colors disabled:opacity-40 disabled:cursor-not-allowed';
|
||||
const primary = `${button} bg-bakery-600 text-white hover:bg-bakery-700`;
|
||||
const secondary = `${button} border border-bakery-300 text-bakery-800 hover:bg-bakery-100`;
|
||||
const danger = `${button} text-red-700 hover:bg-red-50`;
|
||||
const iconButton =
|
||||
'inline-flex items-center justify-center w-7 h-7 rounded-md border border-bakery-300 ' +
|
||||
'text-bakery-700 hover:bg-bakery-100 transition-colors disabled:opacity-30 disabled:cursor-not-allowed';
|
||||
const field =
|
||||
'w-full rounded-md border border-bakery-300 bg-white px-3 py-2 text-sm ' +
|
||||
'focus:border-bakery-500 focus:outline-none focus:ring-1 focus:ring-bakery-500';
|
||||
|
||||
/** Moves one entry of a list by `delta`, or returns the list untouched if that would fall off an end. */
|
||||
function shift<T>(items: T[], index: number, delta: number): T[] {
|
||||
const target = index + delta;
|
||||
if (target < 0 || target >= items.length) return items;
|
||||
const next = [...items];
|
||||
[next[index], next[target]] = [next[target], next[index]];
|
||||
return next;
|
||||
}
|
||||
|
||||
// --- photos -----------------------------------------------------------------
|
||||
|
||||
/**
|
||||
@@ -628,7 +598,7 @@ const AdminPage = () => {
|
||||
<header className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="font-lejour text-4xl text-bakery-700">The Vine</h1>
|
||||
<p className="text-bakery-600">Everything on the products page lives here.</p>
|
||||
<p className="text-bakery-600">Everything on the products and catering pages lives here.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<a href="/products" className={secondary}>
|
||||
@@ -707,6 +677,10 @@ const AdminPage = () => {
|
||||
<p className="mt-3 text-bakery-600">Nothing here yet — add something above.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* A different page, and a different shape of editing — see the note at the top of Catering. */}
|
||||
<hr className="border-bakery-200" />
|
||||
<Catering onError={setError} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user