From e71775292a2e10d241942be2b7751130d07f6d68 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Sat, 25 Jan 2025 01:30:24 -0300
Subject: [PATCH] feat(transactions): proper clear button for filters

---
 .../includes/scripts/hyperscript/init_tom_select.html       | 6 ++++++
 app/templates/monthly_overview/pages/overview.html          | 1 +
 app/templates/transactions/pages/transactions.html          | 3 +--
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/templates/includes/scripts/hyperscript/init_tom_select.html b/app/templates/includes/scripts/hyperscript/init_tom_select.html
index 381d764..7a860b5 100644
--- a/app/templates/includes/scripts/hyperscript/init_tom_select.html
+++ b/app/templates/includes/scripts/hyperscript/init_tom_select.html
@@ -9,4 +9,10 @@
       end
     end
   end
+
+  on reset
+    for elm in <select/> in event.target
+      call elm.tomselect.clear()
+    end
+  end
 </script>
diff --git a/app/templates/monthly_overview/pages/overview.html b/app/templates/monthly_overview/pages/overview.html
index 9003de4..03e817d 100644
--- a/app/templates/monthly_overview/pages/overview.html
+++ b/app/templates/monthly_overview/pages/overview.html
@@ -129,6 +129,7 @@
                 id="filter">
             {% crispy filter.form %}
           </form>
+          <button class="btn btn-outline-danger btn-sm" _="on click call #filter.reset() then trigger change on #filter">{% translate 'Clear' %}</button>
         </div>
       </div>
 {#      Transactions list#}
diff --git a/app/templates/transactions/pages/transactions.html b/app/templates/transactions/pages/transactions.html
index ef89d67..b44872e 100644
--- a/app/templates/transactions/pages/transactions.html
+++ b/app/templates/transactions/pages/transactions.html
@@ -14,8 +14,7 @@
             <div class="d-flex mb-3 align-self-center">
               <div class="me-auto"><h4><i class="fa-solid fa-filter me-2"></i>{% translate 'Filter' %}</h4></div>
               <div class="align-self-center">
-                <a href="{% url 'transactions_all_index' %}" type="button" class="btn btn-outline-danger btn-sm"
-                   hx-target="body" hx-boost="true">{% translate 'Clear' %}</a>
+                <button class="btn btn-outline-danger btn-sm" _="on click call #filter.reset() then trigger change on #filter">{% translate 'Clear' %}</button>
               </div>
             </div>
             <hr>