feat: clicktoedit

This commit is contained in:
joerdav 2023-04-20 15:28:59 +01:00
parent b003653967
commit 6472790346
No known key found for this signature in database
GPG Key ID: 7E93835EA5290C52
12 changed files with 664 additions and 764 deletions

View File

@ -68,23 +68,6 @@ templ tbody(users []user, modified map[int]bool) {
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)
}
}

View File

@ -536,300 +536,6 @@ func Index(users []user) templ.Component {
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<p>")
if err != nil {
return err
}
// Text
var_17 := `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 `
_, err = templBuffer.WriteString(var_17)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code>")
if err != nil {
return err
}
// Text
var_18 := `PUT`
_, err = templBuffer.WriteString(var_18)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
// Text
var_19 := `s to two different endpoints: `
_, err = templBuffer.WriteString(var_19)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code>")
if err != nil {
return err
}
// Text
var_20 := `activate`
_, err = templBuffer.WriteString(var_20)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
// Text
var_21 := `and `
_, err = templBuffer.WriteString(var_21)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code>")
if err != nil {
return err
}
// Text
var_22 := `deactivate`
_, err = templBuffer.WriteString(var_22)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
// Text
var_23 := `:`
_, err = templBuffer.WriteString(var_23)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</p>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<pre>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"language-html\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// TemplElement
var_24 := templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
templBuffer, templIsBuffer := w.(*bytes.Buffer)
if !templIsBuffer {
templBuffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templBuffer)
}
// TemplElement
err = demo(users).Render(ctx, templBuffer)
if err != nil {
return err
}
if !templIsBuffer {
_, err = io.Copy(w, templBuffer)
}
return err
})
err = shared.Raw().Render(templ.WithChildren(ctx, var_24), templBuffer)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</pre>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<p>")
if err != nil {
return err
}
// Text
var_25 := `The server will either activate or deactivate the checked users and then rerender the `
_, err = templBuffer.WriteString(var_25)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code>")
if err != nil {
return err
}
// Text
var_26 := `tbody`
_, err = templBuffer.WriteString(var_26)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
// Text
var_27 := `tag with updated rows. It will apply the class `
_, err = templBuffer.WriteString(var_27)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code>")
if err != nil {
return err
}
// Text
var_28 := `activate`
_, err = templBuffer.WriteString(var_28)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
// Text
var_29 := `or `
_, err = templBuffer.WriteString(var_29)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code>")
if err != nil {
return err
}
// Text
var_30 := `deactivate`
_, err = templBuffer.WriteString(var_30)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
// Text
var_31 := `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:`
_, err = templBuffer.WriteString(var_31)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</p>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<pre>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"language-css\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// StringExpression
var var_32 string = `.htmx-settling tr.deactivate td {
background: lightcoral;
}
.htmx-settling tr.activate td {
background: darkseagreen;
}
tr td {
transition: all 1.2s;
}`
_, err = templBuffer.WriteString(templ.EscapeString(var_32))
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</pre>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<h2")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"title\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// Text
var_33 := `Demo`
_, err = templBuffer.WriteString(var_33)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</h2>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// TemplElement
err = demo(users).Render(ctx, templBuffer)
if err != nil {

View File

@ -32,28 +32,6 @@ templ Form(u user) {
templ Index(u user) {
@shared.Layout("Click to Edit") {
<h2 class="title">Click to Edit</h2>
<p>The click to edit pattern provides a way to offer inline editing of all or part of a record without a page refresh.</p>
<ul>
<li>
This pattern starts with a UI that shows the details of a contact. The div has a button that will get the editing UI for the contact from
<code>/contacts/1/edit</code>
<pre><code class="language-html">
@shared.Raw() {
@Display(u)
}
</code></pre>
</li>
<li>
This returns a form that can be used to edit the contact
<pre><code class="language-html">
@shared.Raw() {
@Form(u)
}
</code></pre>
</li>
<li>The form issues a <code>PUT</code>back to <code>/contacts/1</code>, following the usual REST-ful pattern.</li>
</ul>
<h2 class="title">Demo</h2>
@Display(u)
}
}

View File

@ -658,277 +658,6 @@ func Index(u user) templ.Component {
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<p>")
if err != nil {
return err
}
// Text
var_21 := `The click to edit pattern provides a way to offer inline editing of all or part of a record without a page refresh.`
_, err = templBuffer.WriteString(var_21)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</p>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<ul>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<li>")
if err != nil {
return err
}
// Text
var_22 := `This pattern starts with a UI that shows the details of a contact. The div has a button that will get the editing UI for the contact from `
_, err = templBuffer.WriteString(var_22)
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code>")
if err != nil {
return err
}
// Text
var_23 := `/contacts/1/edit`
_, err = templBuffer.WriteString(var_23)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<pre>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"language-html\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// TemplElement
var_24 := templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
templBuffer, templIsBuffer := w.(*bytes.Buffer)
if !templIsBuffer {
templBuffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templBuffer)
}
// TemplElement
err = Display(u).Render(ctx, templBuffer)
if err != nil {
return err
}
if !templIsBuffer {
_, err = io.Copy(w, templBuffer)
}
return err
})
err = shared.Raw().Render(templ.WithChildren(ctx, var_24), templBuffer)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</pre>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</li>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<li>")
if err != nil {
return err
}
// Text
var_25 := `This returns a form that can be used to edit the contact`
_, err = templBuffer.WriteString(var_25)
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<pre>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"language-html\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// TemplElement
var_26 := templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
templBuffer, templIsBuffer := w.(*bytes.Buffer)
if !templIsBuffer {
templBuffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templBuffer)
}
// TemplElement
err = Form(u).Render(ctx, templBuffer)
if err != nil {
return err
}
if !templIsBuffer {
_, err = io.Copy(w, templBuffer)
}
return err
})
err = shared.Raw().Render(templ.WithChildren(ctx, var_26), templBuffer)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</pre>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</li>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<li>")
if err != nil {
return err
}
// Text
var_27 := `The form issues a `
_, err = templBuffer.WriteString(var_27)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code>")
if err != nil {
return err
}
// Text
var_28 := `PUT`
_, err = templBuffer.WriteString(var_28)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
// Text
var_29 := `back to `
_, err = templBuffer.WriteString(var_29)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code>")
if err != nil {
return err
}
// Text
var_30 := `/contacts/1`
_, err = templBuffer.WriteString(var_30)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
// Text
var_31 := `, following the usual REST-ful pattern.`
_, err = templBuffer.WriteString(var_31)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</li>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</ul>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<h2")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"title\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// Text
var_32 := `Demo`
_, err = templBuffer.WriteString(var_32)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</h2>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// TemplElement
err = Display(u).Render(ctx, templBuffer)
if err != nil {

View File

@ -38,14 +38,6 @@ templ replaceMe(page int) {
templ Index(users []user) {
@shared.Layout("Click to Load") {
<h2 class="title">Click to Load</h2>
<p>This example shows how to implement click-to-load the next page in a table of data. The crux of the demo is the final row:</p>
<pre><code class="language-html">
@shared.Raw() {
@replaceMe(1)
}
</code></pre>
<p>This row contains a button that will replace the entire row with the next page of results (which will contain a button to load the next page of results). And so on.</p>
<h2 class="title">Demo</h2>
@demo(users, 1)
}
}

View File

@ -366,128 +366,6 @@ func Index(users []user) templ.Component {
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<p>")
if err != nil {
return err
}
// Text
var_14 := `This example shows how to implement click-to-load the next page in a table of data. The crux of the demo is the final row:`
_, err = templBuffer.WriteString(var_14)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</p>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<pre>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<code")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"language-html\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// TemplElement
var_15 := templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
templBuffer, templIsBuffer := w.(*bytes.Buffer)
if !templIsBuffer {
templBuffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templBuffer)
}
// TemplElement
err = replaceMe(1).Render(ctx, templBuffer)
if err != nil {
return err
}
if !templIsBuffer {
_, err = io.Copy(w, templBuffer)
}
return err
})
err = shared.Raw().Render(templ.WithChildren(ctx, var_15), templBuffer)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</code>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</pre>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<p>")
if err != nil {
return err
}
// Text
var_16 := `This row contains a button that will replace the entire row with the next page of results (which will contain a button to load the next page of results). And so on.`
_, err = templBuffer.WriteString(var_16)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</p>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<h2")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"title\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// Text
var_17 := `Demo`
_, err = templBuffer.WriteString(var_17)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</h2>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// TemplElement
err = demo(users, 1).Render(ctx, templBuffer)
if err != nil {

View File

@ -47,7 +47,6 @@ templ demo() {
templ Index() {
@shared.Layout("Delete Row") {
<h2 class="title">Delete Row</h2>
<h2 class="title">Demo</h2>
@demo()
}
}

View File

@ -581,35 +581,6 @@ func Index() templ.Component {
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<h2")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"title\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// Text
var_25 := `Demo`
_, err = templBuffer.WriteString(var_25)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</h2>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// TemplElement
err = demo().Render(ctx, templBuffer)
if err != nil {

62
editrow/handlers.go Normal file
View File

@ -0,0 +1,62 @@
package editrow
import (
"net/http"
"strconv"
"strings"
)
type user struct {
name, email string
}
var users = []user{
{"Joe Smith", "joe@smith.org"},
{"Angie MacDowell", "angie@macdowell.org"},
{"Fuqua Tarkenton", "fuqua@tarkenton.org"},
{"Kim Yee", "kim@yee.org"},
}
func Handlers(prefix string, mux *http.ServeMux) {
mux.HandleFunc(prefix+"/", index)
mux.HandleFunc(prefix+"/edit/", editUser)
mux.HandleFunc(prefix+"/contact/", contacts)
}
func index(w http.ResponseWriter, r *http.Request) {
// Load users
Index(users).Render(r.Context(), w)
}
func editUser(w http.ResponseWriter, r *http.Request) {
segments := strings.Split(r.URL.Path, "/")
userID, _ := strconv.Atoi(segments[len(segments)-1])
form(userID, users[userID]).Render(r.Context(), w)
}
func contacts(w http.ResponseWriter, r *http.Request) {
if r.Method == http.MethodGet {
getRow(w, r)
return
}
if r.Method == http.MethodPut {
putUser(w, r)
return
}
w.WriteHeader(404)
}
func getRow(w http.ResponseWriter, r *http.Request) {
segments := strings.Split(r.URL.Path, "/")
userID, _ := strconv.Atoi(segments[len(segments)-1])
row(userID, users[userID]).Render(r.Context(), w)
}
func putUser(w http.ResponseWriter, r *http.Request) {
segments := strings.Split(r.URL.Path, "/")
userID, _ := strconv.Atoi(segments[len(segments)-1])
r.ParseForm()
name, email := r.FormValue("name"), r.FormValue("email")
users[userID] = user{name, email}
row(userID, users[userID]).Render(r.Context(), w)
}

45
editrow/templates.templ Normal file
View File

@ -0,0 +1,45 @@
package editrow
import (
"fmt"
"examples/shared"
)
templ demo(users []user) {
<table class="table"><thead>
<tr>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
</thead><tbody hx-target="closest tr" hx-swap="outerHTML">
for i, u := range users {
@row(i, u)
}
</tbody></table>
}
templ row(id int, u user) {
<tr>
<td>{ u.name }</td>
<td>{ u.email }</td>
<td><button class="button" hx-get={ fmt.Sprintf("/edit-row/edit/%d", id) }>Edit</button></td>
</tr>
}
templ form(id int, u user) {
<tr hx-trigger="cancel" class="editing" hx-get={ fmt.Sprintf("/edit-row/contact/%d", id) }>
<td><input name="name" value={ u.name }/></td>
<td><input name="email" value={ u.email }/></td>
<td><button class="button" hx-get={ fmt.Sprintf("/edit-row/contact/%d", id) }>Cancel</button><button class="button is-black" hx-put={ fmt.Sprintf("/edit-row/contact/%d", id) } hx-include="closest tr">Save</button></td>
</tr>
}
templ Index(users []user) {
@shared.Layout("Delete Row") {
<h2 class="title">Edit Row</h2>
@demo(users)
}
}

550
editrow/templates_templ.go Normal file
View File

@ -0,0 +1,550 @@
// Code generated by templ@(devel) DO NOT EDIT.
package editrow
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import "context"
import "io"
import "bytes"
// GoExpression
import (
"fmt"
"examples/shared"
)
func demo(users []user) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
templBuffer, templIsBuffer := w.(*bytes.Buffer)
if !templIsBuffer {
templBuffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templBuffer)
}
ctx = templ.InitializeContext(ctx)
var_1 := templ.GetChildren(ctx)
if var_1 == nil {
var_1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
// Element (standard)
_, err = templBuffer.WriteString("<table")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"table\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<thead>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<tr>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<th>")
if err != nil {
return err
}
// Text
var_2 := `Name`
_, err = templBuffer.WriteString(var_2)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</th>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<th>")
if err != nil {
return err
}
// Text
var_3 := `Email`
_, err = templBuffer.WriteString(var_3)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</th>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<th>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</th>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</tr>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</thead>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<tbody")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" hx-target=\"closest tr\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(" hx-swap=\"outerHTML\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// For
for i, u := range users {
// TemplElement
err = row(i, u).Render(ctx, templBuffer)
if err != nil {
return err
}
}
_, err = templBuffer.WriteString("</tbody>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</table>")
if err != nil {
return err
}
if !templIsBuffer {
_, err = io.Copy(w, templBuffer)
}
return err
})
}
func row(id int, u user) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
templBuffer, templIsBuffer := w.(*bytes.Buffer)
if !templIsBuffer {
templBuffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templBuffer)
}
ctx = templ.InitializeContext(ctx)
var_4 := templ.GetChildren(ctx)
if var_4 == nil {
var_4 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
// Element (standard)
_, err = templBuffer.WriteString("<tr>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<td>")
if err != nil {
return err
}
// StringExpression
var var_5 string = u.name
_, err = templBuffer.WriteString(templ.EscapeString(var_5))
if err != nil {
return err
}
_, err = templBuffer.WriteString("</td>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<td>")
if err != nil {
return err
}
// StringExpression
var var_6 string = u.email
_, err = templBuffer.WriteString(templ.EscapeString(var_6))
if err != nil {
return err
}
_, err = templBuffer.WriteString("</td>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<td>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<button")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"button\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(" hx-get=")
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(templ.EscapeString(fmt.Sprintf("/edit-row/edit/%d", id)))
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// Text
var_7 := `Edit`
_, err = templBuffer.WriteString(var_7)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</button>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</td>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</tr>")
if err != nil {
return err
}
if !templIsBuffer {
_, err = io.Copy(w, templBuffer)
}
return err
})
}
func form(id int, u user) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
templBuffer, templIsBuffer := w.(*bytes.Buffer)
if !templIsBuffer {
templBuffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templBuffer)
}
ctx = templ.InitializeContext(ctx)
var_8 := templ.GetChildren(ctx)
if var_8 == nil {
var_8 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
// Element (standard)
_, err = templBuffer.WriteString("<tr")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" hx-trigger=\"cancel\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(" class=\"editing\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(" hx-get=")
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(templ.EscapeString(fmt.Sprintf("/edit-row/contact/%d", id)))
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<td>")
if err != nil {
return err
}
// Element (void)
_, err = templBuffer.WriteString("<input")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" name=\"name\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(" value=")
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(templ.EscapeString(u.name))
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</td>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<td>")
if err != nil {
return err
}
// Element (void)
_, err = templBuffer.WriteString("<input")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" name=\"email\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(" value=")
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(templ.EscapeString(u.email))
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</td>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<td>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<button")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"button\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(" hx-get=")
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(templ.EscapeString(fmt.Sprintf("/edit-row/contact/%d", id)))
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// Text
var_9 := `Cancel`
_, err = templBuffer.WriteString(var_9)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</button>")
if err != nil {
return err
}
// Element (standard)
_, err = templBuffer.WriteString("<button")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"button is-black\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(" hx-put=")
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(templ.EscapeString(fmt.Sprintf("/edit-row/contact/%d", id)))
if err != nil {
return err
}
_, err = templBuffer.WriteString("\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(" hx-include=\"closest tr\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// Text
var_10 := `Save`
_, err = templBuffer.WriteString(var_10)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</button>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</td>")
if err != nil {
return err
}
_, err = templBuffer.WriteString("</tr>")
if err != nil {
return err
}
if !templIsBuffer {
_, err = io.Copy(w, templBuffer)
}
return err
})
}
func Index(users []user) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
templBuffer, templIsBuffer := w.(*bytes.Buffer)
if !templIsBuffer {
templBuffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templBuffer)
}
ctx = templ.InitializeContext(ctx)
var_11 := templ.GetChildren(ctx)
if var_11 == nil {
var_11 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
// TemplElement
var_12 := templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
templBuffer, templIsBuffer := w.(*bytes.Buffer)
if !templIsBuffer {
templBuffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templBuffer)
}
// Element (standard)
_, err = templBuffer.WriteString("<h2")
if err != nil {
return err
}
// Element Attributes
_, err = templBuffer.WriteString(" class=\"title\"")
if err != nil {
return err
}
_, err = templBuffer.WriteString(">")
if err != nil {
return err
}
// Text
var_13 := `Edit Row`
_, err = templBuffer.WriteString(var_13)
if err != nil {
return err
}
_, err = templBuffer.WriteString("</h2>")
if err != nil {
return err
}
// Whitespace (normalised)
_, err = templBuffer.WriteString(` `)
if err != nil {
return err
}
// TemplElement
err = demo(users).Render(ctx, templBuffer)
if err != nil {
return err
}
if !templIsBuffer {
_, err = io.Copy(w, templBuffer)
}
return err
})
err = shared.Layout("Delete Row").Render(templ.WithChildren(ctx, var_12), templBuffer)
if err != nil {
return err
}
if !templIsBuffer {
_, err = io.Copy(w, templBuffer)
}
return err
})
}

View File

@ -5,6 +5,7 @@ import (
"examples/clicktoedit"
"examples/clicktoload"
"examples/deleterow"
"examples/editrow"
"log"
"net/http"
@ -58,4 +59,10 @@ var examples = []Example{
Slug: "delete-row",
Handlers: deleterow.Handlers,
},
{
Name: "Edit Row",
Desc: "Demonstrates how to edit rows in a table",
Slug: "edit-row",
Handlers: editrow.Handlers,
},
}