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?
This commit is contained in:
jordi fita mas 2023-05-26 13:51:10 +02:00
parent 689eab3a08
commit d8812ba2f1
2 changed files with 14 additions and 2 deletions

View File

@ -569,6 +569,13 @@ 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 }}