prompt 7

web/templates/private/users/_modal.html

@@ -0,0 +1,13 @@
+{{define "users_modal"}}
+<div style="padding:16px;">
+  <h3 style="margin-top:0;">Dettaglio utente #{{.User.ID}}</h3>
+  <p><strong>Name:</strong> {{if .User.Name}}{{.User.Name}}{{else}}-{{end}}</p>
+  <p><strong>Email:</strong> {{.User.Email}}</p>
+  <p><strong>Role:</strong> {{.User.Role}}</p>
+  <p><strong>Verified:</strong> {{if .User.EmailVerified}}yes{{else}}no{{end}}</p>
+  <p><strong>Created:</strong> {{.User.CreatedAt}}</p>
+  <div class="row">
+    <button type="button" onclick="document.getElementById('userModal').removeAttribute('open')">Chiudi</button>
+  </div>
+</div>
+{{end}}

web/templates/private/users/_table.html

@@ -0,0 +1,48 @@
+{{define "users_table"}}
+{{ $p := .PageData }}
+<table style="width:100%;border-collapse:collapse;margin-top:16px;">
+  <thead>
+    <tr>
+      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">
+        <a href="#" hx-get="/users/table?q={{$p.Q}}&sort=id&dir={{if and (eq $p.Sort "id") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">ID</a>
+      </th>
+      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">
+        <a href="#" hx-get="/users/table?q={{$p.Q}}&sort=name&dir={{if and (eq $p.Sort "name") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Name</a>
+      </th>
+      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">
+        <a href="#" hx-get="/users/table?q={{$p.Q}}&sort=email&dir={{if and (eq $p.Sort "email") (eq $p.Dir "asc")}}desc{{else}}asc{{end}}&page=1&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Email</a>
+      </th>
+      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">Role</th>
+      <th style="text-align:left;border-bottom:1px solid #e5e7eb;padding:8px;">Azioni</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{range $u := $p.Users}}
+    <tr>
+      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{$u.ID}}</td>
+      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{if $u.Name}}{{$u.Name}}{{else}}-{{end}}</td>
+      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{$u.Email}}</td>
+      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">{{$u.Role}}</td>
+      <td style="border-bottom:1px solid #f1f5f9;padding:8px;">
+        <button
+          hx-get="/users/{{$u.ID}}/modal"
+          hx-target="#userModal"
+          hx-swap="innerHTML"
+          hx-on::after-request="document.getElementById('userModal').setAttribute('open','')"
+        >Apri</button>
+      </td>
+    </tr>
+    {{else}}
+    <tr><td colspan="5" style="padding:12px;">Nessun utente trovato.</td></tr>
+    {{end}}
+  </tbody>
+</table>
+
+<div class="row" style="margin-top:12px;align-items:center;justify-content:space-between;">
+  <div class="muted">Totale: {{$p.Total}} utenti. Pagina {{$p.Page}}{{if gt $p.TotalPages 0}} / {{$p.TotalPages}}{{end}}</div>
+  <div class="row">
+    <button {{if not $p.HasPrev}}disabled{{end}} hx-get="/users/table?q={{$p.Q}}&sort={{$p.Sort}}&dir={{$p.Dir}}&page={{$p.PrevPage}}&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Prev</button>
+    <button {{if not $p.HasNext}}disabled{{end}} hx-get="/users/table?q={{$p.Q}}&sort={{$p.Sort}}&dir={{$p.Dir}}&page={{$p.NextPage}}&pageSize={{$p.PageSize}}" hx-target="#usersTableContainer" hx-swap="innerHTML">Next</button>
+  </div>
+</div>
+{{end}}

web/templates/private/users/index.html

@@ -0,0 +1,19 @@
+{{define "content"}}
+<h1>Users</h1>
+<p class="muted">Ricerca, ordinamento e paging server-side via HTMX.</p>
+
+<form id="usersFilters" class="row" hx-get="/users/table" hx-target="#usersTableContainer" hx-swap="innerHTML">
+  <input type="text" name="q" placeholder="Cerca nome o email" value="{{.PageData.Q}}">
+  <input type="number" name="pageSize" min="1" max="100" value="{{.PageData.PageSize}}" style="max-width:120px;">
+  <input type="hidden" name="sort" value="{{.PageData.Sort}}">
+  <input type="hidden" name="dir" value="{{.PageData.Dir}}">
+  <input type="hidden" name="page" value="1">
+  <button type="submit">Cerca</button>
+</form>
+
+<div id="usersTableContainer" hx-get="/users/table?q={{.PageData.Q}}&sort={{.PageData.Sort}}&dir={{.PageData.Dir}}&page={{.PageData.Page}}&pageSize={{.PageData.PageSize}}" hx-trigger="load" hx-swap="innerHTML">
+  {{template "users_table" .}}
+</div>
+
+<ui-modal id="userModal"></ui-modal>
+{{end}}