Add thymeleaf-htmx module: Spring Boot 4.1.2 + Thymeleaf 3.1.5 + htmx 2.0.11 CRUD UI with fragment rendering, 422 validation re-render, pagination, inline edit, delete, MockMvc tests and a Chromium check
Co-Authored-By: Claude Sonnet 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017ic4b7rnC7jppGGdHGESvy
This commit is contained in:
@@ -0,0 +1,138 @@
|
||||
# request (curl notation, sent through MockMvc): curl -H 'HX-Request: true' '/contacts?page=4'
|
||||
HTTP 200
|
||||
---- body (1763 chars) ----
|
||||
<div id="contact-table" hx-trigger="contactsChanged from:body" hx-target="this" hx-swap="outerHTML" hx-get="/contacts?page=4">
|
||||
<table>
|
||||
<thead><tr><th>Name</th><th>Email</th><th>Role</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
|
||||
<tr id="contact-21">
|
||||
<td>Uma Pillai</td>
|
||||
<td>[email protected]</td>
|
||||
<td>Developer</td>
|
||||
<td>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-get="/contacts/21/edit">Edit</button>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-delete="/contacts/21" hx-confirm="Delete Uma Pillai?">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="contact-22">
|
||||
<td>Vikram Singh</td>
|
||||
<td>[email protected]</td>
|
||||
<td>Tester</td>
|
||||
<td>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-get="/contacts/22/edit">Edit</button>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-delete="/contacts/22" hx-confirm="Delete Vikram Singh?">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="contact-23">
|
||||
<td>Yash Thakur</td>
|
||||
<td>[email protected]</td>
|
||||
<td>Architect</td>
|
||||
<td>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-get="/contacts/23/edit">Edit</button>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-delete="/contacts/23" hx-confirm="Delete Yash Thakur?">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<nav class="pager" aria-label="Pages">
|
||||
<a href="/contacts?page=3" hx-target="#contact-table" hx-push-url="true" hx-get="/contacts?page=3">« Prev</a>
|
||||
<span>Page 5 of 5 (23 contacts)</span>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
# request (curl notation, sent through MockMvc): curl -H 'HX-Request: true' '/contacts?page=99'
|
||||
HTTP 200
|
||||
---- body (1763 chars) ----
|
||||
<div id="contact-table" hx-trigger="contactsChanged from:body" hx-target="this" hx-swap="outerHTML" hx-get="/contacts?page=4">
|
||||
<table>
|
||||
<thead><tr><th>Name</th><th>Email</th><th>Role</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
|
||||
<tr id="contact-21">
|
||||
<td>Uma Pillai</td>
|
||||
<td>[email protected]</td>
|
||||
<td>Developer</td>
|
||||
<td>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-get="/contacts/21/edit">Edit</button>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-delete="/contacts/21" hx-confirm="Delete Uma Pillai?">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="contact-22">
|
||||
<td>Vikram Singh</td>
|
||||
<td>[email protected]</td>
|
||||
<td>Tester</td>
|
||||
<td>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-get="/contacts/22/edit">Edit</button>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-delete="/contacts/22" hx-confirm="Delete Vikram Singh?">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="contact-23">
|
||||
<td>Yash Thakur</td>
|
||||
<td>[email protected]</td>
|
||||
<td>Architect</td>
|
||||
<td>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-get="/contacts/23/edit">Edit</button>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-delete="/contacts/23" hx-confirm="Delete Yash Thakur?">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<nav class="pager" aria-label="Pages">
|
||||
<a href="/contacts?page=3" hx-target="#contact-table" hx-push-url="true" hx-get="/contacts?page=3">« Prev</a>
|
||||
<span>Page 5 of 5 (23 contacts)</span>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
# request (curl notation, sent through MockMvc): curl -H 'HX-Request: true' '/contacts?q=KAMAT'
|
||||
HTTP 200
|
||||
---- body (828 chars) ----
|
||||
<div id="contact-table" hx-trigger="contactsChanged from:body" hx-target="this" hx-swap="outerHTML" hx-get="/contacts?q=KAMAT&page=0">
|
||||
<table>
|
||||
<thead><tr><th>Name</th><th>Email</th><th>Role</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
|
||||
<tr id="contact-19">
|
||||
<td>Sneha Kamat</td>
|
||||
<td>[email protected]</td>
|
||||
<td>Architect</td>
|
||||
<td>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-get="/contacts/19/edit">Edit</button>
|
||||
<button type="button"
|
||||
hx-target="closest tr" hx-swap="outerHTML" hx-delete="/contacts/19" hx-confirm="Delete Sneha Kamat?">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<nav class="pager" aria-label="Pages">
|
||||
|
||||
<span>Page 1 of 1 (1 contacts)</span>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user