Bryce
e1a2f7b638
Move the remaining static markup out of the bulk-code form view-model and into
the templates, leaving form-ctx as plain data (plus a urls map and two button
contexts). The form/vendor hx-wiring, the status <option> list, the per-row
transition / location-swap / remove wiring, and the field names are now literal
in the templates, built from the row index and the shared urls.
- form.html: form attrs literal; ids render name="ids[N]" via forloop.counter0.
- body.html: vendor-changed wiring literal; status is an inline <select> with
literal options (selected via {% if status.value = ... %}); field wrappers use
{% if has_error %}has-error.
- account-row.html: the <tr> transitions, db/id hidden, location-cell swap and
remove <a> are literal with {{ row.index }} / {{ urls.changed }}; only the
Alpine x-data, errors, and the typeahead/location/money control contexts are
passed as data.
- form-ctx / account-row-vm reduced to data; drop the now-unused
sc/validated-field-classes.
Tradeoff: the status <select> and the remove <a> inline the shared base classes
(those partials can't take literal option labels / per-row wiring), so those two
class strings are duplicated in the bulk-code templates.
Verified: moved wiring correct by targeted checks (ids[N], form/vendor hx-*,
account-row-N, location swap + remove with index, status selected, no unrendered
tags); full browser flow green -- open (3 ids), vendor auto-populate, status
set+persist, add/remove row, submit "Transactions Coded", no JS errors. Shared
component class-sets unchanged (this commit only touches bulk-code).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
36 lines
3.0 KiB
HTML
36 lines
3.0 KiB
HTML
{# Bulk-code modal body: vendor typeahead (a change repopulates the default account via a
|
|
whole-form swap), status select, and the expense-account grid. All wiring, the status
|
|
options, and the field-wrapper classes are literal here; only data (selected values,
|
|
resolved labels, errors) comes from the view-model. #}
|
|
<div class="space-y-4 p-4">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div hx-trigger="change" hx-post="{{ urls.changed }}" hx-vals='{"op":"vendor-changed"}' hx-target="#bulk-code-form" hx-select="#bulk-code-form" hx-swap="outerHTML" hx-sync="this:replace" hx-include="closest form">
|
|
<div class="group {% if vendor.has_error %}has-error {% endif %}">
|
|
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Vendor</label>
|
|
{% with width="w-96" x_data=vendor.ta.x_data x_model=vendor.ta.x_model key=vendor.ta.key disabled=vendor.ta.disabled a_xinit=vendor.ta.a_xinit placeholder=vendor.ta.placeholder hidden_attrs=vendor.ta.hidden_attrs %}{% include "templates/components/typeahead.html" %}{% endwith %}
|
|
<p class="mt-2 text-xs text-red-600 dark:text-red-500 h-4">{{ vendor.error }}</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="group {% if status.has_error %}has-error {% endif %}">
|
|
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Status</label>
|
|
<select name="approval-status" class="bg-gray-50 border text-sm rounded-lg block p-2.5 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 group-[.has-error]:bg-red-50 group-[.has-error]:border-red-500 group-[.has-error]:text-red-900 group-[.has-error]:placeholder-red-700 group-[.has-error]:focus:ring-red-500 group-[.has-error]:dark:bg-gray-700 group-[.has-error]:focus:border-red-500 group-[.has-error]:dark:text-red-500 group-[.has-error]:dark:placeholder-red-500 group-[.has-error]:dark:border-red-500">
|
|
<option value=""{% if not status.value %} selected{% endif %}>No Change</option>
|
|
<option value="approved"{% if status.value = "approved" %} selected{% endif %}>Approved</option>
|
|
<option value="unapproved"{% if status.value = "unapproved" %} selected{% endif %}>Unapproved</option>
|
|
<option value="suppressed"{% if status.value = "suppressed" %} selected{% endif %}>Suppressed</option>
|
|
<option value="requires-feedback"{% if status.value = "requires-feedback" %} selected{% endif %}>Client Review</option>
|
|
</select>
|
|
<p class="mt-2 text-xs text-red-600 dark:text-red-500 h-4">{{ status.error }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-2 pt-4">
|
|
<h3 class="text-lg font-medium mb-3">Expense Accounts</h3>
|
|
<div class="group">
|
|
<div id="account-entries" class="space-y-3">{% include "templates/transaction-bulk-code/account-grid.html" %}</div>
|
|
<p class="mt-2 text-xs text-red-600 dark:text-red-500 h-4">{{ accounts.error }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|