Put the edit contact form into a dialog with HTMx
Had to change the data context for that template to include the Slug, so that the <form> element can set the correct `action` instead of using the current URI, as it is no longer “correct” (form-wise) when using HTMx.
This commit is contained in:
parent
b07fe6cfa2
commit
6e081a1846
|
|
@ -42,15 +42,26 @@ func GetContactForm(w http.ResponseWriter, r *http.Request, params httprouter.Pa
|
|||
return
|
||||
}
|
||||
w.WriteHeader(http.StatusOK)
|
||||
mustRenderEditContactForm(w, r, form)
|
||||
mustRenderEditContactForm(w, r, slug, form)
|
||||
}
|
||||
|
||||
func mustRenderNewContactForm(w http.ResponseWriter, r *http.Request, form *contactForm) {
|
||||
mustRenderModalTemplate(w, r, "contacts/new.gohtml", form)
|
||||
}
|
||||
|
||||
func mustRenderEditContactForm(w http.ResponseWriter, r *http.Request, form *contactForm) {
|
||||
mustRenderAppTemplate(w, r, "contacts/edit.gohtml", form)
|
||||
type editContactPage struct {
|
||||
Slug string
|
||||
ContactName string
|
||||
Form *contactForm
|
||||
}
|
||||
|
||||
func mustRenderEditContactForm(w http.ResponseWriter, r *http.Request, slug string, form *contactForm) {
|
||||
page := &editContactPage{
|
||||
Slug: slug,
|
||||
ContactName: form.BusinessName.Val,
|
||||
Form: form,
|
||||
}
|
||||
mustRenderModalTemplate(w, r, "contacts/edit.gohtml", page)
|
||||
}
|
||||
|
||||
func HandleAddContact(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
|
||||
|
|
@ -96,14 +107,20 @@ func HandleUpdateContact(w http.ResponseWriter, r *http.Request, params httprout
|
|||
return
|
||||
}
|
||||
if !form.Validate(r.Context(), conn) {
|
||||
mustRenderEditContactForm(w, r, form)
|
||||
mustRenderEditContactForm(w, r, params[0].Value, form)
|
||||
return
|
||||
}
|
||||
slug := conn.MustGetText(r.Context(), "", "update contact set business_name = $1, vatin = ($11 || $2)::vatin, trade_name = $3, phone = parse_packed_phone_number($4, $11), email = $5, web = $6, address = $7, city = $8, province = $9, postal_code = $10, country_code = $11 where slug = $12 returning slug", form.BusinessName, form.VATIN, form.TradeName, form.Phone, form.Email, form.Web, form.Address, form.City, form.Province, form.PostalCode, form.Country, params[0].Value)
|
||||
if slug == "" {
|
||||
http.NotFound(w, r)
|
||||
}
|
||||
http.Redirect(w, r, companyURI(mustGetCompany(r), "/contacts/"+slug), http.StatusSeeOther)
|
||||
if IsHTMxRequest(r) {
|
||||
w.Header().Set("HX-Trigger", "closeModal")
|
||||
w.Header().Set("HX-Refresh", "true")
|
||||
w.WriteHeader(http.StatusNoContent)
|
||||
} else {
|
||||
http.Redirect(w, r, companyURI(mustGetCompany(r), "/contacts/"+slug), http.StatusSeeOther)
|
||||
}
|
||||
}
|
||||
|
||||
func mustGetContactEntries(ctx context.Context, conn *Conn, company *Company) []*ContactEntry {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,40 @@
|
|||
{{ define "title" -}}
|
||||
{{printf (pgettext "Edit Contact “%s”" "title") .BusinessName.Val }}
|
||||
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.editContactPage*/ -}}
|
||||
{{printf (pgettext "Edit Contact “%s”" "title") .ContactName }}
|
||||
{{- end }}
|
||||
|
||||
{{ define "breadcrumbs" -}}
|
||||
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.contactForm*/ -}}
|
||||
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.editContactPage*/ -}}
|
||||
<nav>
|
||||
<p>
|
||||
<a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
|
||||
<a href="{{ companyURI "/contacts"}}">{{( pgettext "Contacts" "title" )}}</a> /
|
||||
<a>{{ .BusinessName.Val }}</a>
|
||||
<a>{{ .ContactName }}</a>
|
||||
</p>
|
||||
</nav>
|
||||
{{- end }}
|
||||
|
||||
{{ define "content" }}
|
||||
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.contactForm*/ -}}
|
||||
<section class="dialog-content">
|
||||
<h2>{{printf (pgettext "Edit Contact “%s”" "title") .BusinessName.Val }}</h2>
|
||||
<form method="POST">
|
||||
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.editContactPage*/ -}}
|
||||
<section class="dialog-content" id="edit-contact-dialog-content" data-hx-target="this">
|
||||
<h2>{{printf (pgettext "Edit Contact “%s”" "title") .ContactName }}</h2>
|
||||
<form method="POST" action="{{ companyURI "/contacts/" }}{{ .Slug }}" data-hx-boost="true" data-hx-select="#edit-contact-dialog-content">
|
||||
{{ csrfToken }}
|
||||
{{ putMethod }}
|
||||
|
||||
{{ template "input-field" .BusinessName }}
|
||||
{{ template "input-field" .VATIN }}
|
||||
{{ template "input-field" .TradeName }}
|
||||
{{ template "input-field" .Phone }}
|
||||
{{ template "input-field" .Email }}
|
||||
{{ template "input-field" .Web }}
|
||||
{{ template "input-field" .Address | addInputAttr `class="width-2x"` }}
|
||||
{{ template "input-field" .City }}
|
||||
{{ template "input-field" .Province }}
|
||||
{{ template "input-field" .PostalCode }}
|
||||
{{ template "select-field" .Country | addSelectAttr `class="width-fixed"` }}
|
||||
{{ with .Form }}
|
||||
{{ template "input-field" .BusinessName }}
|
||||
{{ template "input-field" .VATIN }}
|
||||
{{ template "input-field" .TradeName }}
|
||||
{{ template "input-field" .Phone }}
|
||||
{{ template "input-field" .Email }}
|
||||
{{ template "input-field" .Web }}
|
||||
{{ template "input-field" .Address | addInputAttr `class="width-2x"` }}
|
||||
{{ template "input-field" .City }}
|
||||
{{ template "input-field" .Province }}
|
||||
{{ template "input-field" .PostalCode }}
|
||||
{{ template "select-field" .Country | addSelectAttr `class="width-fixed"` }}
|
||||
{{ end }}
|
||||
|
||||
<fieldset>
|
||||
<button class="primary" type="submit">{{( pgettext "Update contact" "action" )}}</button>
|
||||
|
|
|
|||
|
|
@ -28,12 +28,12 @@
|
|||
<th>{{( pgettext "Phone" "title" )}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody data-hx-push-url="false" data-hx-swap="beforeend">
|
||||
{{ with .Contacts }}
|
||||
{{- range $contact := . }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><a href="{{ companyURI "/contacts/"}}{{ .Slug }}">{{ .Name }}</a></td>
|
||||
<td><a href="{{ companyURI "/contacts/"}}{{ .Slug }}" data-hx-boost="true">{{ .Name }}</a></td>
|
||||
<td><a href="mailto:{{ .Email }}">{{ .Email }}</a></td>
|
||||
<td><a href="tel:{{ .Phone }}">{{ .Phone }}</a></td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Reference in New Issue