Show the add contact form in a modal dialog

pkg/contacts.go

@@ -46,7 +46,7 @@ func GetContactForm(w http.ResponseWriter, r *http.Request, params httprouter.Pa
 }
 
 func mustRenderNewContactForm(w http.ResponseWriter, r *http.Request, form *contactForm) {
-	mustRenderAppTemplate(w, r, "contacts/new.gohtml", form)
+	mustRenderModalTemplate(w, r, "contacts/new.gohtml", form)
 }
 
 func mustRenderEditContactForm(w http.ResponseWriter, r *http.Request, form *contactForm) {
@@ -66,12 +66,21 @@ func HandleAddContact(w http.ResponseWriter, r *http.Request, _ httprouter.Param
 		return
 	}
 	if !form.Validate(r.Context(), conn) {
+		if !IsHTMxRequest(r) {
+			w.WriteHeader(http.StatusUnprocessableEntity)
+		}
 		mustRenderNewContactForm(w, r, form)
 		return
 	}
 	company := mustGetCompany(r)
 	conn.MustExec(r.Context(), "insert into contact (company_id, business_name, vatin, trade_name, phone, email, web, address, city, province, postal_code, country_code) values ($1, $2, ($12 || $3)::vatin, $4, parse_packed_phone_number($5, $12), $6, $7, $8, $9, $10, $11, $12)", company.Id, form.BusinessName, form.VATIN, form.TradeName, form.Phone, form.Email, form.Web, form.Address, form.City, form.Province, form.PostalCode, form.Country)
-	http.Redirect(w, r, companyURI(company, "/contacts"), 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(company, "/contacts"), http.StatusSeeOther)
+	}
 }
 
 func HandleUpdateContact(w http.ResponseWriter, r *http.Request, params httprouter.Params) {

web/template/contacts/index.gohtml

@@ -11,6 +11,7 @@
         </p>
         <p>
             <a class="primary button"
+               data-hx-push-url="false" data-hx-swap="beforeend" data-hx-boost="true"
                href="{{ companyURI "/contacts/new" }}">{{( pgettext "New contact" "action" )}}</a>
         </p>
     </nav>

web/template/contacts/new.gohtml

@@ -15,9 +15,9 @@
 
 {{ define "content" }}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.contactForm*/ -}}
-    <section class="dialog-content">
+    <section class="dialog-content" id="new-contact-dialog-content" data-hx-target="this">
         <h2>{{(pgettext "New Contact" "title")}}</h2>
-        <form method="POST" action="{{ companyURI "/contacts" }}">
+        <form method="POST" action="{{ companyURI "/contacts" }}" data-hx-boost="true" data-hx-select="#new-contact-dialog-content">
             {{ csrfToken }}
             {{ template "input-field" .BusinessName | addInputAttr "autofocus" }}
             {{ template "input-field" .VATIN }}