go-htmx-examples/bulkupdate/templates.templ

75 lines
1.5 KiB
Plaintext

package bulkupdate
import (
"fmt"
"examples/shared"
)
templ demo(users []user) {
<h3 class="subtitle">Select Rows And Activate Or Deactivate Below</h3>
<form id="checked-contacts">
<table class="table">
<thead>
<tr>
<td></td>
<td>Name</td>
<td>Email</td>
<td>Status</td>
</tr>
</thead>
@tbody(users, map[int]bool{})
</table>
</form>
<div hx-swap="outerHTML" hx-include="#checked-contacts" hx-target="#tbody" class="field is-grouped">
<div class="control"><a class="button is-black" hx-put="/bulk-update/activate">Activate</a></div>
<div class="control"><a class="button" hx-put="/bulk-update/deactivate">Deactivate</a></div>
</div>
<style>
.htmx-settling tr.deactivate td {
background: lightcoral;
}
.htmx-settling tr.activate td {
background: darkseagreen;
}
tr td {
transition: all 1.2s;
}
</style>
}
templ tbody(users []user, modified map[int]bool) {
<tbody id="tbody">
for k, u := range users {
<tr
if modified[k] && u.active {
class="activate"
}
if modified[k] && !u.active {
class="deactivate"
}
>
<td><input type="checkbox" name="ids" value={ fmt.Sprint(k) }/></td>
<td>{ u.name }</td>
<td>{ u.email }</td>
<td>
if u.active {
Active
} else {
Inactive
}
</td>
</tr>
}
</tbody>
}
templ Index(users []user) {
@shared.Layout("Bulk Update") {
<h2 class="title">Bulk Update</h2>
@demo(users)
}
}