Each bulk-code route now ends in a single sel/render call; all composition
(modal chrome, body, account grid, rows, footer, errors) happens in the
templates via {% extends %}/{% block %}/{% include %}/{% with %}, reading one
nested view-model (form-ctx). No HTML is stitched together in Clojure.
- Add components/modal-card.html: a base chrome with head/body/footer blocks;
bulk-code/card.html extends it. (Transaction Edit keeps its string-slot
edit-modal.html for now.)
- New top-level templates: open.html, form.html, card.html, body.html; rework
account-grid/account-row/footer/head to pull the shared component partials in
via {% include %}+{% with %} instead of hardcoding class strings or receiving
pre-rendered HTML strings.
- render-form / open-handler collapse to one sel/render of form.html / open.html.
bulk-code-body*, footer*, form-errors-html, account-grid*, the *errors* dynamic
var and ferr are gone; field errors are read straight from :form-errors.
- Extract sc/{select,button,a-button,a-icon-button}-ctx so templates can include
those partials with computed context (the render wrappers now call the -ctx fns).
Verified: rendered output is DOM-identical to the prior version across empty /
populated / error scenarios (whitespace-normalized token compare), plus browser
QA (open, vendor auto-populate, add/remove row, typeahead, per-row location swap,
percentage validation, submit); no JS errors.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
23 lines
1.3 KiB
HTML
23 lines
1.3 KiB
HTML
{# Expense-account grid -- fully template-driven. A single for-loop over the per-row
|
|
view-models (bulk-code/account-row-vm), each delegating to account-row.html. The
|
|
trailing "New account" button (a-button partial) posts the whole #bulk-code-form
|
|
(op=new-account). #}
|
|
<div class="shrink overflow-y-scroll">
|
|
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 shrink">
|
|
<thead class="text-xs text-gray-800 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 group-[.raw]:sticky group-[.raw]:z-10 group-[.raw]:top-0">
|
|
<tr>
|
|
<th class="px-4 py-3" scope="col">Account</th>
|
|
<th class="px-4 py-3 w-32" scope="col">Location</th>
|
|
<th class="px-4 py-3 w-16" scope="col">%</th>
|
|
<th class="px-4 py-3 w-16" scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in accounts.rows %}{% include "templates/transaction-bulk-code/account-row.html" %}{% endfor %}
|
|
<tr class="new-row border-b dark:border-gray-600 group hover:bg-gray-100 dark:hover:bg-gray-700">
|
|
<td class="px-4 py-2" colspan="4">{% with classes=accounts.new_account.classes attrs=accounts.new_account.attrs indicator=accounts.new_account.indicator body=accounts.new_account.body %}{% include "templates/components/a-button.html" %}{% endwith %}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|