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.

pkg/contacts.go

@@ -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) {
+type editContactPage struct {
-	mustRenderAppTemplate(w, r, "contacts/edit.gohtml", form)
+	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 {

web/template/contacts/edit.gohtml

@@ -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*/ -}}
+    {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.editContactPage*/ -}}
-    <section class="dialog-content">
+    <section class="dialog-content" id="edit-contact-dialog-content" data-hx-target="this">
-        <h2>{{printf (pgettext "Edit Contact “%s”" "title") .BusinessName.Val }}</h2>
+        <h2>{{printf (pgettext "Edit Contact “%s”" "title") .ContactName }}</h2>
-        <form method="POST">
+        <form method="POST" action="{{ companyURI "/contacts/" }}{{ .Slug }}" data-hx-boost="true" data-hx-select="#edit-contact-dialog-content">
             {{ csrfToken }}
             {{ putMethod }}
 
-            {{ template "input-field" .BusinessName }}
+            {{ with .Form }}
-            {{ template "input-field" .VATIN }}
+                {{ template "input-field" .BusinessName }}
-            {{ template "input-field" .TradeName }}
+                {{ template "input-field" .VATIN }}
-            {{ template "input-field" .Phone }}
+                {{ template "input-field" .TradeName }}
-            {{ template "input-field" .Email }}
+                {{ template "input-field" .Phone }}
-            {{ template "input-field" .Web }}
+                {{ template "input-field" .Email }}
-            {{ template "input-field" .Address | addInputAttr `class="width-2x"` }}
+                {{ template "input-field" .Web }}
-            {{ template "input-field" .City }}
+                {{ template "input-field" .Address | addInputAttr `class="width-2x"` }}
-            {{ template "input-field" .Province }}
+                {{ template "input-field" .City }}
-            {{ template "input-field" .PostalCode }}
+                {{ template "input-field" .Province }}
-            {{ template "select-field" .Country | addSelectAttr `class="width-fixed"` }}
+                {{ template "input-field" .PostalCode }}
+                {{ template "select-field" .Country | addSelectAttr `class="width-fixed"` }}
+            {{ end }}
 
             <fieldset>
                 <button class="primary" type="submit">{{( pgettext "Update contact" "action" )}}</button>

web/template/contacts/index.gohtml

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