From 7b948b68c30e131d9e3cc9c15b6abdfb988e08c5 Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 15 Apr 2026 11:10:44 +0200
Subject: [PATCH] =?UTF-8?q?feat(11-02):=20UIE-01=20edit=20modal=20?=
 =?UTF-8?q?=E2=80=94=20Edit=20button=20per=20row,=20Pico=20dialog,=20E2E?=
 =?UTF-8?q?=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../partials/printer_edit_modal.html          | 101 ++++++++++++++++++
 imptune/templates/partials/printer_list.html  |   1 +
 tests/e2e/test_printer_edit.py                |  62 +++++++++++
 3 files changed, 164 insertions(+)
 create mode 100644 imptune/templates/partials/printer_edit_modal.html
 create mode 100644 tests/e2e/test_printer_edit.py

diff --git a/imptune/templates/partials/printer_edit_modal.html b/imptune/templates/partials/printer_edit_modal.html
new file mode 100644
index 0000000..5253e70
--- /dev/null
+++ b/imptune/templates/partials/printer_edit_modal.html
@@ -0,0 +1,101 @@
+<!-- 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>
diff --git a/imptune/templates/partials/printer_list.html b/imptune/templates/partials/printer_list.html
index 8970497..c16a2ba 100644
--- a/imptune/templates/partials/printer_list.html
+++ b/imptune/templates/partials/printer_list.html
@@ -31,6 +31,7 @@
           <td>{{ p.paper_size }}</td>
           <td>{{ 'Yes' if p.collate else 'No' }}</td>
           <td>
+            {% include "partials/printer_edit_modal.html" %}
             <button
               hx-delete="/printers/{{ p.id }}"
               hx-target="#printer-list"
diff --git a/tests/e2e/test_printer_edit.py b/tests/e2e/test_printer_edit.py
new file mode 100644
index 0000000..25ab4b5
--- /dev/null
+++ b/tests/e2e/test_printer_edit.py
@@ -0,0 +1,62 @@
+"""UIE-01: E2E test for printer edit modal — open, pre-fill, submit, list update."""
+from __future__ import annotations
+
+import pytest
+
+
+def test_printer_edit_modal_open_and_prefill(page, live_server: str) -> None:
+    """Edit button opens modal with printer's current name pre-filled."""
+    import httpx
+
+    # Create a printer via API
+    with httpx.Client(base_url=live_server, follow_redirects=True) as api:
+        api.post(
+            "/printers",
+            data={
+                "name": "EditTest Printer",
+                "ip_address": "10.0.5.1",
+                "port_name": "IP_10_0_5_1",
+            },
+        )
+
+    page.goto(f"{live_server}/printers", wait_until="domcontentloaded")
+    page.wait_for_selector("button:has-text('Edit')")
+    page.click("button:has-text('Edit')")
+
+    # Dialog should be open
+    page.wait_for_selector("dialog[open]")
+    # Name input should be pre-filled
+    name_val = page.input_value("dialog[open] input[name='name']")
+    assert name_val == "EditTest Printer"
+
+
+def test_printer_edit_submit_updates_list(page, live_server: str) -> None:
+    """Submitting the edit form updates the printer name in the list (no page reload)."""
+    import httpx
+
+    with httpx.Client(base_url=live_server, follow_redirects=True) as api:
+        resp = api.post(
+            "/printers",
+            data={
+                "name": "OriginalName",
+                "ip_address": "10.0.5.2",
+                "port_name": "IP_10_0_5_2",
+            },
+        )
+
+    # Find the printer ID from the DB via API — target the specific Edit button by printer ID
+    page.goto(f"{live_server}/printers", wait_until="domcontentloaded")
+    # Find the row containing "OriginalName" and click its Edit button
+    row = page.locator("tr", has=page.locator("a", has_text="OriginalName"))
+    row.wait_for()
+    row.locator("button:has-text('Edit')").click()
+    page.wait_for_selector("dialog[open]")
+
+    # Clear and update the name field
+    page.fill("dialog[open] input[name='name']", "UpdatedName")
+    page.click("dialog[open] button[type='submit']")
+
+    # Wait for HTMX to swap the updated list — the anchor for the printer should show new name
+    page.wait_for_selector("a:has-text('UpdatedName')")
+    assert page.locator("a:has-text('UpdatedName')").is_visible()
+    assert page.locator("a:has-text('OriginalName')").count() == 0