mirror of
https://github.com/joerdav/go-htmx-examples.git
synced 2026-03-21 22:35:08 +00:00
feat: clicktoedit
This commit is contained in:
joerdav
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user