92 lines
2.4 KiB
Plaintext
92 lines
2.4 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>
|
|||
|
|
<p>This demo shows how to implement a common pattern where rows are selected and then bulk updated. This is accomplished by putting a form around a table, with checkboxes in the table, and then including the checked values in <code>PUT</code>’s to two different endpoints: <code>activate</code>and <code>deactivate</code>:</p>
|
|||
|
|
<pre><code class="language-html">
|
|||
|
|
@shared.Raw() {
|
|||
|
|
@demo(users)
|
|||
|
|
}
|
|||
|
|
</code></pre>
|
|||
|
|
<p>The server will either activate or deactivate the checked users and then rerender the <code>tbody</code>tag with updated rows. It will apply the class <code>activate</code>or <code>deactivate</code>to rows that have been mutated. This allows us to use a bit of CSS to flash a color helping the user see what happened:</p>
|
|||
|
|
<pre><code class="language-css">{ `.htmx-settling tr.deactivate td {
|
|||
|
|
background: lightcoral;
|
|||
|
|
}
|
|||
|
|
.htmx-settling tr.activate td {
|
|||
|
|
background: darkseagreen;
|
|||
|
|
}
|
|||
|
|
tr td {
|
|||
|
|
transition: all 1.2s;
|
|||
|
|
}` }</code></pre>
|
|||
|
|
<h2 class="title">Demo</h2>
|
|||
|
|
@demo(users)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|