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:
parent
689eab3a08
commit
d8812ba2f1
|
@ -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) {
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
Loading…
Reference in New Issue