Archived
The admin is Thymeleaf too: no JavaScript framework left in the repo
The last React went with this. /admin and /admin/catering are pages of forms; every write is a POST and a redirect back, so the back button and reload do what they look like they do, a double-tap cannot repeat an upload, and there is no client-side state to lose — a reload is always the truth. The /api/admin/** endpoints went too: they existed for the React screen, and their logic now lives in Catalogue (extracted from the two deleted JSON controllers) and CateringMenu, which the pages call. THE TABLE EDITOR IS THE INTERESTING PART, because a catering table cannot be edited a field at a time — a column heading, its price and the entries beneath it only mean anything together. One form holds the whole table and every button submits it; `name="do"` says which was pressed and its value carries the position (`remove-column:2`). "Add a column" therefore arrives with every cell the editor has typed, adds the column to what arrived plus an empty entry on every line, and re-renders. Nothing typed is lost, and only Save writes — so a half-built table with a blank heading never reaches the live page. A failed save comes back the same way, with the work still in the form and the reason above it; a redirect would throw the work away and leave them guessing which cell the message was about. Spring binds `lines[2].values[1]` into the right cell, which flat repeated parameters could not promise. Reordering moved to the server, where it always belonged: the browser used to compute the new order and send the whole list back, and now "move this up" arrives as an action. Same for arranging photos — one endpoint takes the key and -1/1/0 (earlier, later, remove), because those three buttons are the same edit. frontend/ became styles/: node, Tailwind and nothing else. It exists because Tailwind needs a compiler and the alternative is a hand-written stylesheet; there is no bundler and no framework. The admin's controls are @utility classes (v4 will only let you @apply a registered utility, and only a utility can take the `file:` variant the photo pickers use) — the same buttons the React screen had, from the same class strings it composed. Also fixed .gitignore, which still named frontend/: with styles/ unlisted, `git add -A` staged 1,626 files of node_modules. Verified against a running container, not only in tests: pressing "+ Column" returns the draft with an unsaved cell intact, a new column and a matching new entry on the line, "Not saved yet" — and the live page unchanged; Save then writes both columns with the price parsed from "48". Renaming and moving an item land on the products page. Deleting a category that is in use is refused with the sentence naming it. Removing the only photo of an item is refused, and that button is already disabled in the page. 51 tests (10 new): the form binding, the flash on success and on refusal, a structural button writing nothing, and the whole admin surface closed to anonymous visitors. PlatformContractTest's routing assertion now says what is true — an unknown path 404s, and so does /admin when no identity provider is configured, because AdminController only exists under OIDC.
This commit is contained in:
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org"
|
||||
th:replace="~{admin/layout :: page('Goodie boxes & catering', ~{::content})}">
|
||||
<body>
|
||||
<div th:fragment="content">
|
||||
|
||||
<section>
|
||||
<h2 class="card-heading">The price tables</h2>
|
||||
<p class="mt-1 text-sm text-bakery-600">
|
||||
In the order they appear on the page. Open one to change its columns, its prices or what's in it.
|
||||
A table with no columns or no lines stays off the public page until it has both.
|
||||
</p>
|
||||
|
||||
<ul class="mt-3 space-y-3">
|
||||
<li th:each="table, t : ${menu.packages}" class="card flex flex-wrap items-center gap-3">
|
||||
<div class="flex gap-1">
|
||||
<form method="post" th:action="@{/admin/catering/tables/{id}/move(id=${table.id})}">
|
||||
<input type="hidden" name="by" value="-1">
|
||||
<button type="submit" class="btn-icon" th:disabled="${t.first}"
|
||||
th:aria-label="|Move the ${table.name} table up|">↑</button>
|
||||
</form>
|
||||
<form method="post" th:action="@{/admin/catering/tables/{id}/move(id=${table.id})}">
|
||||
<input type="hidden" name="by" value="1">
|
||||
<button type="submit" class="btn-icon" th:disabled="${t.last}"
|
||||
th:aria-label="|Move the ${table.name} table down|">↓</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-60">
|
||||
<a th:href="@{/admin/catering/tables/{id}(id=${table.id})}"
|
||||
class="font-adbhashitha text-lg text-bakery-900 underline underline-offset-4"
|
||||
th:text="${table.name}">Office</a>
|
||||
<p class="text-sm text-bakery-600">
|
||||
<span th:text="|${#lists.size(table.tiers)} column${#lists.size(table.tiers) == 1 ? '' : 's'}|">3 columns</span>,
|
||||
<span th:text="|${#lists.size(table.rows)} line${#lists.size(table.rows) == 1 ? '' : 's'}|">3 lines</span>
|
||||
<span th:if="${#lists.isEmpty(table.tiers) or #lists.isEmpty(table.rows)}"
|
||||
class="text-bakery-700"> — not on the page yet</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a th:href="@{/admin/catering/tables/{id}(id=${table.id})}" class="btn-secondary">Edit</a>
|
||||
|
||||
<form method="post" th:action="@{/admin/catering/tables/{id}/delete(id=${table.id})}">
|
||||
<button type="submit" class="btn-danger"
|
||||
th:aria-label="|Delete the ${table.name} table|">Delete</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p th:if="${#lists.isEmpty(menu.packages)}" class="mt-3 text-bakery-600">
|
||||
No tables yet. The catering page will tell people to call instead until there is one.
|
||||
</p>
|
||||
|
||||
<form method="post" action="/admin/catering/tables" class="mt-4 flex gap-2">
|
||||
<label class="flex-1">
|
||||
<span class="sr-only">New table</span>
|
||||
<input class="field" name="name" placeholder="New table, e.g. Graduation parties" required>
|
||||
</label>
|
||||
<button type="submit" class="btn-primary">Add</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!--/* The page's own terms, as opposed to the small print under one table. Replaced as a whole list:
|
||||
deleting one is an omission, which is the same rule the tables follow. */-->
|
||||
<section class="card">
|
||||
<h2 class="card-heading">Under the whole page</h2>
|
||||
<p class="mt-1 text-sm text-bakery-600">Terms that apply whichever table someone is reading.</p>
|
||||
|
||||
<form method="post" action="/admin/catering/notes" class="mt-3 space-y-2">
|
||||
<label th:each="note : ${menu.notes}" class="block">
|
||||
<span class="sr-only">Note</span>
|
||||
<textarea class="field min-h-[3.25rem]" rows="2" name="notes" th:text="${note}"></textarea>
|
||||
</label>
|
||||
<!--/* An empty box is how you delete one: blank notes are dropped on save. */-->
|
||||
<label class="block">
|
||||
<span class="sr-only">Another note</span>
|
||||
<textarea class="field min-h-[3.25rem]" rows="2" name="notes" placeholder="Add another note"></textarea>
|
||||
</label>
|
||||
<button type="submit" class="btn-primary">Save these notes</button>
|
||||
<p class="text-sm text-bakery-600">Clearing a box and saving removes that note.</p>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user