kawa
7b948b68c3
- Create printer_edit_modal.html: native dialog with HTMX PATCH form, Alpine.js portEdited=true - Update printer_list.html Actions td: include edit modal partial before Delete button - Create tests/e2e/test_printer_edit.py: modal open/pre-fill and submit/list-update E2E tests - Fix E2E row targeting to use locator(tr, has=a:has-text) for session-scoped server safety
102 lines
3.6 KiB
HTML
102 lines
3.6 KiB
HTML
<!-- Edit trigger button — placed in Actions column -->
|
|
<button class="secondary outline"
|
|
onclick="document.getElementById('edit-modal-{{ p.id }}').showModal()">
|
|
Edit
|
|
</button>
|
|
|
|
<!-- Edit dialog — Pico CSS native dialog, no extra library -->
|
|
<dialog id="edit-modal-{{ p.id }}">
|
|
<article>
|
|
<header>
|
|
<button aria-label="Close" rel="prev"
|
|
onclick="document.getElementById('edit-modal-{{ p.id }}').close()"></button>
|
|
<h3>Edit Printer</h3>
|
|
</header>
|
|
<div x-data="{ ip: '{{ p.ip_address }}', port: '{{ p.port_name }}', portEdited: true }">
|
|
<form hx-patch="/printers/{{ p.id }}"
|
|
hx-target="#printer-list"
|
|
hx-swap="outerHTML"
|
|
hx-on::after-request="document.getElementById('edit-modal-{{ p.id }}').close()">
|
|
|
|
<label>Printer Name
|
|
<input type="text" name="name" value="{{ p.name }}" required>
|
|
</label>
|
|
|
|
<label>IP Address
|
|
<input type="text" name="ip_address"
|
|
x-model="ip"
|
|
@input="if (!portEdited) port = 'IP_' + ip.replaceAll('.', '_')"
|
|
required>
|
|
</label>
|
|
|
|
<label>Port Name
|
|
<input type="text" name="port_name"
|
|
x-model="port"
|
|
@change="portEdited = true"
|
|
@keydown="portEdited = true">
|
|
</label>
|
|
|
|
<label>Driver
|
|
<select name="driver_id">
|
|
<option value="">-- No driver --</option>
|
|
{% for item in driver_data %}
|
|
<option value="{{ item.driver.id }}"
|
|
{% if p.driver_id == item.driver.id %}selected{% endif %}>
|
|
{{ item.driver.original_filename }} ({{ item.names | join(', ') }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
|
|
<label>Duplex Mode
|
|
<select name="duplex_mode">
|
|
<option value="OneSided" {% if p.duplex_mode == 'OneSided' %}selected{% endif %}>One-Sided</option>
|
|
<option value="LongEdge" {% if p.duplex_mode == 'LongEdge' %}selected{% endif %}>Long Edge</option>
|
|
<option value="ShortEdge" {% if p.duplex_mode == 'ShortEdge' %}selected{% endif %}>Short Edge</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label>
|
|
<input type="checkbox" name="color_mode" value="on"
|
|
{% if p.color_mode %}checked{% endif %}>
|
|
Color Mode
|
|
</label>
|
|
|
|
<label>Paper Size
|
|
<select name="paper_size">
|
|
<option value="A4" {% if p.paper_size == 'A4' %}selected{% endif %}>A4</option>
|
|
<option value="Letter" {% if p.paper_size == 'Letter' %}selected{% endif %}>Letter</option>
|
|
<option value="Legal" {% if p.paper_size == 'Legal' %}selected{% endif %}>Legal</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label>
|
|
<input type="checkbox" name="collate" value="on"
|
|
{% if p.collate %}checked{% endif %}>
|
|
Collate
|
|
</label>
|
|
|
|
<label>Client
|
|
<select name="client_id">
|
|
<option value="">-- Unassigned --</option>
|
|
{% for c in clients %}
|
|
<option value="{{ c.id }}"
|
|
{% if p.client_id == c.id %}selected{% endif %}>
|
|
{{ c.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
|
|
<footer>
|
|
<button type="submit">Save</button>
|
|
<button type="button" class="secondary"
|
|
onclick="document.getElementById('edit-modal-{{ p.id }}').close()">
|
|
Cancel
|
|
</button>
|
|
</footer>
|
|
</form>
|
|
</div>
|
|
</article>
|
|
</dialog>
|