From d697b340e9b782c656ce1f36c8e77fed27f4e508 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Tue, 4 Jul 2023 19:55:58 +0200
Subject: [PATCH] Remove scroll after update quote or invoice form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 web/template/invoices/edit.gohtml | 8 ++++++--
 web/template/invoices/new.gohtml  | 8 ++++++--
 web/template/quotes/edit.gohtml   | 8 ++++++--
 web/template/quotes/new.gohtml    | 8 ++++++--
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/web/template/invoices/edit.gohtml b/web/template/invoices/edit.gohtml
index 1e4f02c..84c8aec 100644
--- a/web/template/invoices/edit.gohtml
+++ b/web/template/invoices/edit.gohtml
@@ -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>
diff --git a/web/template/invoices/new.gohtml b/web/template/invoices/new.gohtml
index a3013ca..ae5e43e 100644
--- a/web/template/invoices/new.gohtml
+++ b/web/template/invoices/new.gohtml
@@ -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>
diff --git a/web/template/quotes/edit.gohtml b/web/template/quotes/edit.gohtml
index fe6066d..216c5f6 100644
--- a/web/template/quotes/edit.gohtml
+++ b/web/template/quotes/edit.gohtml
@@ -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>
diff --git a/web/template/quotes/new.gohtml b/web/template/quotes/new.gohtml
index e96a2b5..d6c9eaf 100644
--- a/web/template/quotes/new.gohtml
+++ b/web/template/quotes/new.gohtml
@@ -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>