tandem
/
numerus
2
0
Fork 0
Code Issues 39 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

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:
jordi fita mas 2023-03-23 10:46:14 +01:00
parent b07fe6cfa2
commit 6e081a1846
3 changed files with 45 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
pkg/contacts.go
View File

@ -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 {

39
web/template/contacts/edit.gohtml
View File

@ -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>

4
web/template/contacts/index.gohtml
View File

@ -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>