From d8812ba2f1ca2bba0818b7de07864d6fd08d3feb Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Fri, 26 May 2023 13:51:10 +0200
Subject: [PATCH] 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?
---
 web/static/numerus.css   | 11 +++++++++--
 web/template/form.gohtml |  5 +++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/web/static/numerus.css b/web/static/numerus.css
index ee6d835..573fb83 100644
--- a/web/static/numerus.css
+++ b/web/static/numerus.css
@@ -567,8 +567,15 @@ main > nav {
 }
 
 .new-invoice-product {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+    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) {
diff --git a/web/template/form.gohtml b/web/template/form.gohtml
index 354db3a..6235c76 100644
--- a/web/template/form.gohtml
+++ b/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 }}