75 lines
1.5 KiB
Plaintext
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)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|