Keep the invoice number when requesting an update while editing

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?

pkg/invoices.go

@@ -997,6 +997,8 @@ func HandleEditInvoiceAction(w http.ResponseWriter, r *http.Request, params http
 	slug := params[0].Value
 	actionUri := fmt.Sprintf("/invoices/%s/edit", slug)
 	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)
 	})
 }

web/static/numerus.css

@@ -569,6 +569,13 @@ main > nav {
 .new-invoice-product {
     display: grid;
     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) {

web/template/form.gohtml

@@ -145,10 +145,15 @@
 {{ define "invoice-product-form" -}}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.invoiceProductForm*/ -}}
     <fieldset class="new-invoice-product"
+              x-data="{removeProduct() { $el.remove(); document.getElementById('recompute-button').click(); }}"
               data-hx-select="unset"
               data-hx-vals='{"index": {{ .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" .ProductId }}
         {{ template "input-field" .Name }}