datastar/site/routes_examples_click_to_ed...

66 lines
1.9 KiB
Plaintext

package site
import (
goaway "github.com/TwiN/go-away"
datastar "github.com/starfederation/datastar/sdk/go"
)
type ClickToEditContactSignals struct {
FirstName string `json:"firstName,omitempty" san:"trim,xss,max=128"`
LastName string `json:"lastName,omitempty" san:"trim,xss,max=128"`
Email string `json:"email,omitempty" san:"trim,xss,max=128"`
}
templ setupExamplesClickToEditUserComponent(signals *ClickToEditContactSignals) {
<div id="contact_1" class="flex flex-col max-w-sm gap-2">
<label>First Name: { goaway.Censor(signals.FirstName) }</label>
<label>Last Name: { goaway.Censor(signals.LastName) }</label>
<label>Email: { goaway.Censor(signals.Email) }</label>
<div class="flex gap-4">
<button
class="btn btn-primary"
data-on-click={ datastar.GetSSE("/examples/click_to_edit/contact/1/edit") }
>
Edit
</button>
<button
class="btn btn-secondary"
data-on-click={ datastar.PatchSSE("/examples/click_to_edit/contact/1/reset") }
>
Reset
</button>
</div>
</div>
}
templ setupExamplesClickToEditUserEdit(signals *ClickToEditContactSignals) {
<div id="contact_1" class="flex flex-col gap-2" data-signals={ templ.JSONString(signals) }>
<label class="flex items-center gap-2 input input-bordered">
First Name
<input type="text" class="grow" data-bind="firstName"/>
</label>
<label class="flex items-center gap-2 input input-bordered">
Last Name
<input type="text" class="grow" data-bind="lastName"/>
</label>
<label class="flex items-center gap-2 input input-bordered">
Email
<input type="text" class="grow" data-bind="email"/>
</label>
<div class="flex gap-4">
<button
class="btn btn-primary"
data-on-click={ datastar.PutSSE("/examples/click_to_edit/contact/1") }
>
Save
</button>
<button
class="btn btn-secondary"
data-on-click={ datastar.GetSSE("/examples/click_to_edit/contact/1") }
>
Cancel
</button>
</div>
</div>
}