tandem
/
numerus
2
0
Fork 0
Code Issues 39 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

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🪟bottom`, however, despite appearing in the
documentation, because that, somehow, ended up doing the same as
`show🪟top`.  Not sure if a bug or something i did not understand.

Closes #58.
This commit is contained in:
jordi fita mas 2023-07-04 19:55:58 +02:00
parent 596120d84a
commit d697b340e9
4 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/template/invoices/edit.gohtml
View File

@ -17,7 +17,10 @@
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.editInvoicePage*/ -}}
<section id="invoice-dialog-content" data-hx-target="main">
<h2>{{ printf (pgettext "Edit Invoice “%s”" "title") .Number }}</h2>
<form method="POST" action="{{ companyURI "/invoices/" }}{{ .Slug }}/edit" data-hx-boost="true">
<form method="POST" action="{{ companyURI "/invoices/" }}{{ .Slug }}/edit"
data-hx-boost="true"
data-hx-swap="innerHTML show:false"
>
{{ csrfToken }}
{{ with .Form -}}
@ -78,7 +81,8 @@
<button formnovalidate
name="action" value="select-products"
data-hx-get="{{ companyURI "/invoices/product-form" }}"
data-hx-target="#invoice-summary" data-hx-swap="beforebegin"
data-hx-target="#invoice-summary"
data-hx-swap="beforebegin show:bottom"
data-hx-select="unset"
data-hx-vals="js:{index: document.querySelectorAll('.new-invoice-product').length}"
type="submit">{{( pgettext "Add products" "action" )}}</button>

8
web/template/invoices/new.gohtml
View File

@ -17,7 +17,10 @@
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.newInvoicePage*/ -}}
<section id="invoice-dialog-content" data-hx-target="main">
<h2>{{(pgettext "New Invoice" "title")}}</h2>
<form method="POST" action="{{ companyURI "/invoices/new" }}" data-hx-boost="true">
<form method="POST" action="{{ companyURI "/invoices/new" }}"
data-hx-boost="true"
data-hx-swap="innerHTML show:false"
>
{{ csrfToken }}
{{ with .Form -}}
@ -77,7 +80,8 @@
<button formnovalidate
name="action" value="select-products"
data-hx-get="{{ companyURI "/invoices/product-form" }}"
data-hx-target="#invoice-summary" data-hx-swap="beforebegin"
data-hx-target="#invoice-summary"
data-hx-swap="beforebegin show:bottom"
data-hx-select="unset"
data-hx-vals="js:{index: document.querySelectorAll('.new-invoice-product').length}"
type="submit">{{( pgettext "Add products" "action" )}}</button>

8
web/template/quotes/edit.gohtml
View File

@ -17,7 +17,10 @@
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.editQuotationPage*/ -}}
<section id="quote-dialog-content" data-hx-target="main">
<h2>{{ printf (pgettext "Edit Quotation “%s”" "title") .Number }}</h2>
<form method="POST" action="{{ companyURI "/quotes/" }}{{ .Slug }}/edit" data-hx-boost="true">
<form method="POST" action="{{ companyURI "/quotes/" }}{{ .Slug }}/edit"
data-hx-boost="true"
data-hx-swap="innerHTML show:false"
>
{{ csrfToken }}
{{ with .Form -}}
@ -79,7 +82,8 @@
<button formnovalidate
name="action" value="select-products"
data-hx-get="{{ companyURI "/quotes/product-form" }}"
data-hx-target="#quote-summary" data-hx-swap="beforebegin"
data-hx-target="#quote-summary"
data-hx-swap="beforebegin show:bottom"
data-hx-select="unset"
data-hx-vals="js:{index: document.querySelectorAll('.new-quote-product').length}"
type="submit">{{( pgettext "Add products" "action" )}}</button>

8
web/template/quotes/new.gohtml
View File

@ -17,7 +17,10 @@
{{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.newQuotePage*/ -}}
<section id="quote-dialog-content" data-hx-target="main">
<h2>{{(pgettext "New Quotation" "title")}}</h2>
<form method="POST" action="{{ companyURI "/quotes/new" }}" data-hx-boost="true">
<form method="POST" action="{{ companyURI "/quotes/new" }}"
data-hx-boost="true"
data-hx-swap="innerHTML show:false"
>
{{ csrfToken }}
{{ with .Form -}}
@ -78,7 +81,8 @@
<button formnovalidate
name="action" value="select-products"
data-hx-get="{{ companyURI "/quotes/product-form" }}"
data-hx-target="#quote-summary" data-hx-swap="beforebegin"
data-hx-target="#quote-summary"
data-hx-swap="beforebegin show:bottom"
data-hx-select="unset"
data-hx-vals="js:{index: document.querySelectorAll('.new-quote-product').length}"
type="submit">{{( pgettext "Add products" "action" )}}</button>