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)
|
||
}
|
||
}
|
||
|