From 5717a5b9ed9495377c2ebc3752eda7d09210c1a4 Mon Sep 17 00:00:00 2001
From: jordi fita mas
Date: Fri, 31 Mar 2023 13:01:26 +0200
Subject: [PATCH] Put new invoice and edit invoice forms into a dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
In this case i have to use the same id for the dialog content in all
pages because, for now, there are a couple of forms that need to replace
it on submit—the new/edit form and the product selection form.
Unfortunately, HTMx does not have support for `formaction` attribute at
this point, so i had to use the workaround described in [0].
[0] https://github.com/bigskysoftware/htmx/issues/623
---
pkg/invoices.go | 29 +++++++++++++++++++++------
web/static/numerus.js | 13 ++++++++++++
web/template/invoices/edit.gohtml | 4 ++--
web/template/invoices/index.gohtml | 7 +++++--
web/template/invoices/new.gohtml | 4 ++--
web/template/invoices/products.gohtml | 4 ++--
6 files changed, 47 insertions(+), 14 deletions(-)
diff --git a/pkg/invoices.go b/pkg/invoices.go
index e237b2c..03755d1 100644
--- a/pkg/invoices.go
+++ b/pkg/invoices.go
@@ -393,7 +393,7 @@ func mustRenderNewInvoiceForm(w http.ResponseWriter, r *http.Request, form *invo
locale := getLocale(r)
form.Customer.EmptyLabel = gettext("Select a customer to bill.", locale)
page := newNewInvoicePage(form, r)
- mustRenderAppTemplate(w, r, "invoices/new.gohtml", page)
+ mustRenderModalTemplate(w, r, "invoices/new.gohtml", page)
}
func mustRenderNewInvoiceProductsForm(w http.ResponseWriter, r *http.Request, action string, form *invoiceForm) {
@@ -404,7 +404,7 @@ func mustRenderNewInvoiceProductsForm(w http.ResponseWriter, r *http.Request, ac
Form: form,
Products: mustGetProductChoices(r.Context(), conn, company),
}
- mustRenderAppTemplate(w, r, "invoices/products.gohtml", page)
+ mustRenderModalTemplate(w, r, "invoices/products.gohtml", page)
}
func mustGetProductChoices(ctx context.Context, conn *Conn, company *Company) []*productChoice {
@@ -457,7 +457,13 @@ func HandleAddInvoice(w http.ResponseWriter, r *http.Request, _ httprouter.Param
return
}
slug := conn.MustGetText(r.Context(), "", "select add_invoice($1, $2, $3, $4, $5, $6, $7, $8)", company.Id, form.Number, form.Date, form.Customer, form.Notes, form.PaymentMethod, form.Tags, NewInvoiceProductArray(form.Products))
- http.Redirect(w, r, companyURI(company, "/invoices/"+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(company, "/invoices/"+slug), http.StatusSeeOther)
+ }
}
func HandleNewInvoiceAction(w http.ResponseWriter, r *http.Request, params httprouter.Params) {
@@ -832,7 +838,12 @@ func HandleUpdateInvoice(w http.ResponseWriter, r *http.Request, params httprout
if slug == "" {
http.NotFound(w, r)
}
- http.Redirect(w, r, companyURI(mustGetCompany(r), "/invoices"), http.StatusSeeOther)
+ if IsHTMxRequest(r) {
+ w.Header().Set("HX-Refresh", "true")
+ w.WriteHeader(http.StatusNoContent)
+ } else {
+ http.Redirect(w, r, companyURI(mustGetCompany(r), "/invoices"), http.StatusSeeOther)
+ }
} else {
slug := params[0].Value
if !form.Validate() {
@@ -845,7 +856,13 @@ func HandleUpdateInvoice(w http.ResponseWriter, r *http.Request, params httprout
http.NotFound(w, r)
return
}
- http.Redirect(w, r, companyURI(company, "/invoices/"+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(company, "/invoices/"+slug), http.StatusSeeOther)
+ }
}
}
@@ -879,7 +896,7 @@ func newEditInvoicePage(slug string, form *invoiceForm, r *http.Request) *editIn
func mustRenderEditInvoiceForm(w http.ResponseWriter, r *http.Request, slug string, form *invoiceForm) {
page := newEditInvoicePage(slug, form, r)
- mustRenderAppTemplate(w, r, "invoices/edit.gohtml", page)
+ mustRenderModalTemplate(w, r, "invoices/edit.gohtml", page)
}
func HandleEditInvoiceAction(w http.ResponseWriter, r *http.Request, params httprouter.Params) {
diff --git a/web/static/numerus.js b/web/static/numerus.js
index ec8edf3..a607763 100644
--- a/web/static/numerus.js
+++ b/web/static/numerus.js
@@ -421,6 +421,19 @@ htmx.onLoad((target) => {
}
})
+htmx.on('htmx:configRequest', function(e) {
+ const element = e.detail.elt;
+ if (element && element.nodeName === 'FORM') {
+ let submitter = e.detail.triggeringEvent.submitter;
+ if (submitter) {
+ const action = submitter.attributes['formaction'];
+ if (action && action.value) {
+ e.detail.path = action.value;
+ }
+ }
+ }
+})
+
htmx.on('closeModal', () => {
const openDialog = document.querySelector('dialog[open]');
if (!openDialog) {
diff --git a/web/template/invoices/edit.gohtml b/web/template/invoices/edit.gohtml
index b6ac214..b30627a 100644
--- a/web/template/invoices/edit.gohtml
+++ b/web/template/invoices/edit.gohtml
@@ -15,9 +15,9 @@
{{ define "content" }}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.editInvoicePage*/ -}}
-
+
{{ printf (pgettext "Edit Invoice “%s”" "title") .Number }}
-
@@ -68,7 +69,7 @@
|