2023-06-07 14:35:31 +00:00
|
|
|
{{ define "title" -}}
|
|
|
|
{{( pgettext "New Quotation" "title" )}}
|
|
|
|
{{- end }}
|
|
|
|
|
|
|
|
{{ define "breadcrumbs" -}}
|
|
|
|
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.newQuotePage*/ -}}
|
Remove almost all data-hx-boost attributes
Since 16e80b5ae, <body> no longer has overflow, thus no scroll. As a
consequence, htmx no longer is able to scroll up <main> when it changes
due to the default, implicit `show:true` applied to the request: is
calls <main>’s scrollIntoView, however there is nothing to scroll to.
I probably could fix it by changing the target of `show`, or even add
a `scroll` directive to all boosted links, but at this point i think it
is better no not boost links at all, as they do what i want—show the new
page from the top—with less markup, plus the browser now show a loading
animation, and it is not that slower, too.
2024-09-07 23:29:30 +00:00
|
|
|
<nav>
|
2023-06-07 14:35:31 +00:00
|
|
|
<p>
|
|
|
|
<a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
|
|
|
|
<a href="{{ companyURI "/quotes"}}">{{( pgettext "Quotations" "title" )}}</a> /
|
|
|
|
<a>{{( pgettext "New Quotation" "title" )}}</a>
|
|
|
|
</p>
|
|
|
|
</nav>
|
|
|
|
{{- end }}
|
|
|
|
|
|
|
|
{{ define "content" }}
|
|
|
|
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.newQuotePage*/ -}}
|
|
|
|
<section id="quote-dialog-content" data-hx-target="main">
|
|
|
|
<h2>{{(pgettext "New Quotation" "title")}}</h2>
|
Remove scroll after update quote or invoice form
By default, when using hx-boost, HTMx adds the `show:top` modifier to
`hx-swap`. This is actually the wanted behaviour in these cases,
because it means that you are following a link to a “different” page,
and it makes sense to start from the top.
However, for quote and invoice forms is a hindrance because you are
usually editing the bottom-most product, as new lines are appended,
therefore you are all the time having to scroll down to the line.
Every. Single. Time.
Here i reverted the show:top to just show:false to keep the scroll as
is. I also added the show:bottom to the new product button, because
that way the window show entirely the new line.
I could not use `show:window:bottom`, however, despite appearing in the
documentation, because that, somehow, ended up doing the same as
`show:window:top`. Not sure if a bug or something i did not understand.
Closes #58.
2023-07-04 17:55:58 +00:00
|
|
|
<form method="POST" action="{{ companyURI "/quotes/new" }}"
|
|
|
|
data-hx-boost="true"
|
|
|
|
data-hx-swap="innerHTML show:false"
|
|
|
|
>
|
2023-06-07 14:35:31 +00:00
|
|
|
{{ csrfToken }}
|
|
|
|
|
|
|
|
{{ with .Form -}}
|
|
|
|
{{ if .RemovedProduct -}}
|
|
|
|
<div role="alert">
|
|
|
|
{{ with .RemovedProduct -}}
|
|
|
|
<p>{{printf (gettext "Product “%s” removed") .Name}}</p>
|
|
|
|
<button type="submit"
|
|
|
|
formnovalidate
|
|
|
|
name="action" value="restore-product"
|
|
|
|
>{{( pgettext "Undo" "action" )}}</button>
|
|
|
|
{{ template "hidden-field" .QuoteProductId }}
|
|
|
|
{{ template "hidden-field" .ProductId }}
|
|
|
|
{{ template "hidden-field" .Name }}
|
|
|
|
{{ template "hidden-field" .Price }}
|
|
|
|
{{ template "hidden-field" .Quantity }}
|
|
|
|
{{ template "hidden-field" .Discount }}
|
|
|
|
{{ template "hidden-field" .Description }}
|
|
|
|
{{ template "hidden-select-field" .Tax }}
|
|
|
|
{{- end }}
|
|
|
|
</div>
|
|
|
|
{{- end }}
|
|
|
|
|
|
|
|
<div class="quote-data">
|
|
|
|
{{ template "hidden-select-field" .QuoteStatus }}
|
|
|
|
{{ template "select-field" .Customer }}
|
|
|
|
{{ template "input-field" .Date }}
|
|
|
|
{{ template "tags-field" .Tags }}
|
|
|
|
{{ template "select-field" .PaymentMethod }}
|
|
|
|
{{ template "input-field" .TermsAndConditions }}
|
|
|
|
{{ template "input-field" .Notes }}
|
|
|
|
</div>
|
|
|
|
{{- range $product := .Products }}
|
|
|
|
{{ template "quote-product-form" . }}
|
|
|
|
{{- end }}
|
|
|
|
{{- end }}
|
|
|
|
|
|
|
|
<table id="quote-summary">
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<th scope="row">{{(pgettext "Subtotal" "title")}}</th>
|
|
|
|
<td class="numeric">{{ .Subtotal | formatPrice }}</td>
|
|
|
|
</tr>
|
|
|
|
{{- range $tax := .Taxes }}
|
|
|
|
<tr>
|
|
|
|
<th scope="row">{{ index . 0 }}</th>
|
|
|
|
<td class="numeric">{{ index . 1 | formatPrice }}</td>
|
|
|
|
</tr>
|
|
|
|
{{- end }}
|
|
|
|
<tr>
|
|
|
|
<th scope="row">{{(pgettext "Total" "title")}}</th>
|
|
|
|
<td class="numeric">{{ .Total | formatPrice }}</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
<fieldset class="button-bar">
|
|
|
|
<button formnovalidate
|
|
|
|
name="action" value="select-products"
|
|
|
|
data-hx-get="{{ companyURI "/quotes/product-form" }}"
|
Remove scroll after update quote or invoice form
By default, when using hx-boost, HTMx adds the `show:top` modifier to
`hx-swap`. This is actually the wanted behaviour in these cases,
because it means that you are following a link to a “different” page,
and it makes sense to start from the top.
However, for quote and invoice forms is a hindrance because you are
usually editing the bottom-most product, as new lines are appended,
therefore you are all the time having to scroll down to the line.
Every. Single. Time.
Here i reverted the show:top to just show:false to keep the scroll as
is. I also added the show:bottom to the new product button, because
that way the window show entirely the new line.
I could not use `show:window:bottom`, however, despite appearing in the
documentation, because that, somehow, ended up doing the same as
`show:window:top`. Not sure if a bug or something i did not understand.
Closes #58.
2023-07-04 17:55:58 +00:00
|
|
|
data-hx-target="#quote-summary"
|
|
|
|
data-hx-swap="beforebegin show:bottom"
|
2023-06-07 14:35:31 +00:00
|
|
|
data-hx-select="unset"
|
|
|
|
data-hx-vals="js:{index: document.querySelectorAll('.new-quote-product').length}"
|
|
|
|
type="submit">{{( pgettext "Add products" "action" )}}</button>
|
|
|
|
<button formnovalidate
|
|
|
|
id="recompute-button"
|
|
|
|
name="action" value="update"
|
|
|
|
type="submit">{{( pgettext "Update" "action" )}}</button>
|
|
|
|
<button class="primary" name="action" value="add"
|
|
|
|
formaction="{{ companyURI "/quotes" }}"
|
|
|
|
type="submit">{{( pgettext "Save" "action" )}}</button>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
document.body.addEventListener('recompute', function () {
|
|
|
|
document.getElementById('recompute-button').click();
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
{{- end }}
|