Compare commits

...

2 Commits

Author SHA1 Message Date
jordi fita mas 19f81128ec Keep the invoice number when requesting an update while editing 2023-05-26 14:02:39 +02:00
jordi fita mas d8812ba2f1 Add delete button to remove a product from the invoice form
With this button, it is no longer necessary to set the quantity to zero
to remove, at least not with JavaScript.  This is why i am using Alpine:
to use x-cloak and hide it from non-JavaScript users.

Although, i wonder if it would not be better to use HTMx for that?
2023-05-26 13:51:10 +02:00
3 changed files with 16 additions and 2 deletions

View File

@ -997,6 +997,8 @@ func HandleEditInvoiceAction(w http.ResponseWriter, r *http.Request, params http
slug := params[0].Value slug := params[0].Value
actionUri := fmt.Sprintf("/invoices/%s/edit", slug) actionUri := fmt.Sprintf("/invoices/%s/edit", slug)
handleInvoiceAction(w, r, actionUri, func(w http.ResponseWriter, r *http.Request, form *invoiceForm) { handleInvoiceAction(w, r, actionUri, func(w http.ResponseWriter, r *http.Request, form *invoiceForm) {
conn := getConn(r)
form.Number = conn.MustGetText(r.Context(), "", "select invoice_number from invoice where slug = $1", slug)
mustRenderEditInvoiceForm(w, r, slug, form) mustRenderEditInvoiceForm(w, r, slug, form)
}) })
} }

View File

@ -567,8 +567,15 @@ main > nav {
} }
.new-invoice-product { .new-invoice-product {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
position: relative;
}
.new-invoice-product .delete-product {
position: absolute;
right: 0;
top: .75rem;
} }
.new-invoice-product .input:nth-of-type(5) { .new-invoice-product .input:nth-of-type(5) {

View File

@ -145,10 +145,15 @@
{{ define "invoice-product-form" -}} {{ define "invoice-product-form" -}}
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.invoiceProductForm*/ -}} {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.invoiceProductForm*/ -}}
<fieldset class="new-invoice-product" <fieldset class="new-invoice-product"
x-data="{removeProduct() { $el.remove(); document.getElementById('recompute-button').click(); }}"
data-hx-select="unset" data-hx-select="unset"
data-hx-vals='{"index": {{ .Index }}}' data-hx-vals='{"index": {{ .Index }}}'
data-hx-include="[name='product.quantity.{{ .Index }}']" data-hx-include="[name='product.quantity.{{ .Index }}']"
> >
<button x-cloak type="button" class="icon delete-product"
@click="removeProduct()"
aria-label="{{( gettext "Delete product from invoice" )}}"
><i class="ri-delete-back-2-line"></i></button>
{{ template "hidden-field" .InvoiceProductId }} {{ template "hidden-field" .InvoiceProductId }}
{{ template "hidden-field" .ProductId }} {{ template "hidden-field" .ProductId }}
{{ template "input-field" .Name }} {{ template "input-field" .Name }}