feat(transactions): add htmx filter presets

app/templates/monthly_overview/pages/overview.html

@@ -107,7 +107,7 @@
                     @click="filterOpen = !filterOpen"
                     :aria-expanded="filterOpen" id="filter-button"
                     title="{% translate 'Filter transactions' %}"
-                    _="on load or change from #filter
+                    _="on change from #filter-container
                          -- Check if any filter has a non-default value
                          set hasActiveFilter to false
 
@@ -208,7 +208,7 @@
                            add .hidden to #filter-active-indicator
                          end">
               <i class="fa-solid fa-filter fa-fw"></i>
-              <span id="filter-active-indicator" class="absolute -top-1 -right-1 w-3 h-3 bg-error rounded-full hidden z-10"></span>
+              <span id="filter-active-indicator" class="absolute -top-1 -right-1 w-3 h-3 bg-error rounded-full {% if not filter_is_active %}hidden {% endif %}z-10"></span>
             </button>
 
             {# Search box #}
@@ -228,6 +228,8 @@
                          show <.transaction/> in <#transactions-list/>
                          when its textContent.toLowerCase() contains my value.toLowerCase()">
 
+            {% include "transactions/fragments/filter_presets.html" %}
+
             {# Order by icon dropdown #}
             <div>
               <button class="btn btn-secondary join-item" type="button"
@@ -270,21 +272,16 @@
           {# Filter transactions form #}
           <div class="z-1" x-show="filterOpen" x-collapse x-cloak>
             <div class="card card-body bg-base-200 mt-2">
-              <div class="text-right">
-                <button class="btn btn-outline btn-error btn-sm w-fit"
-                        _="on click call #filter.reset() then trigger change on #filter">{% translate 'Clear' %}</button>
-              </div>
+              {% include "transactions/fragments/filter_actions.html" %}
 
-              <form _="on change or submit or search trigger updated on window
-                         install init_tom_select
-                         install init_datepicker"
-                    id="filter" class="mt-3">
-                {% crispy filter.form %}
-              </form>
+              {% include "transactions/fragments/filter_form.html" %}
 
               <div class="text-right">
-                <button class="btn btn-outline btn-error btn-sm w-fit"
-                        _="on click call #filter.reset() then trigger change on #filter">{% translate 'Clear' %}</button>
+                <a class="btn btn-outline btn-error btn-sm w-fit"
+                   href="{{ request.path }}"
+                   hx-get="{% url 'transaction_filter_clear' %}"
+                   hx-target="#filter"
+                   hx-swap="outerHTML">{% translate 'Clear' %}</a>
               </div>
             </div>
           </div>

app/templates/transactions/fragments/filter_actions.html

@@ -0,0 +1,50 @@
+{% load i18n %}
+{% translate "Save filter preset" as save_filter_preset_title %}
+{% translate "Preset name" as preset_name_label %}
+{% translate "Cancel" as cancel_label %}
+{% translate "Save" as save_label %}
+
+<div class="flex justify-end gap-2">
+  <form id="save-filter-preset"
+        hx-post="{% url 'filter_preset_create' %}"
+        hx-include="#filter"
+        hx-target="#filter-presets"
+        hx-swap="outerHTML">
+    <input id="filter-preset-name" type="hidden" name="name">
+    <button class="btn btn-outline btn-primary btn-sm" type="button"
+            data-title="{{ save_filter_preset_title }}"
+            data-input-label="{{ preset_name_label }}"
+            data-cancel-text="{{ cancel_label }}"
+            data-confirm-text="{{ save_label }}"
+            _="on click
+                 call Swal.fire({title: @data-title,
+                                 input: 'text',
+                                 inputLabel: @data-input-label,
+                                 inputAttributes: {maxlength: '100'},
+                                 showCancelButton: true,
+                                 cancelButtonText: @data-cancel-text,
+                                 confirmButtonText: @data-confirm-text,
+                                 customClass: {
+                                   confirmButton: 'btn btn-primary me-3',
+                                   cancelButton: 'btn btn-error'
+                                 },
+                                 buttonsStyling: false})
+                 if result.isConfirmed
+                   set presetName to result.value.trim()
+                   if presetName is not ''
+                     set #filter-preset-name.value to presetName
+                     trigger submit on #save-filter-preset
+                   end
+                 end">
+      <i class="fa-solid fa-bookmark fa-fw"></i>
+      {% translate 'Save preset' %}
+    </button>
+  </form>
+  <a class="btn btn-outline btn-error btn-sm"
+     href="{{ request.path }}"
+     hx-get="{% url 'transaction_filter_clear' %}"
+     hx-target="#filter"
+     hx-swap="outerHTML">
+    {% translate 'Clear' %}
+  </a>
+</div>

app/templates/transactions/fragments/filter_form.html

@@ -0,0 +1,18 @@
+{% load crispy_forms_tags %}
+
+<form _="on change or submit or search
+           if event.type is 'submit'
+             halt the event
+           end
+           trigger updated on window
+         end
+         install init_tom_select
+         install init_datepicker"
+      id="filter" class="mt-3">
+  {% crispy filter.form %}
+</form>
+{% if swap_filter_indicator %}
+  <span id="filter-active-indicator"
+        class="absolute -top-1 -right-1 w-3 h-3 bg-error rounded-full {% if not filter_is_active %}hidden {% endif %}z-10"
+        hx-swap-oob="outerHTML"></span>
+{% endif %}

app/templates/transactions/fragments/filter_presets.html

@@ -0,0 +1,37 @@
+{% load i18n %}
+
+<div id="filter-presets">
+  <button class="btn btn-secondary join-item" type="button"
+          data-bs-toggle="dropdown" aria-expanded="false"
+          title="{% translate 'Filter presets' %}">
+    <i class="fa-solid fa-bookmark fa-fw"></i>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-end menu min-w-52">
+    {% for preset in filter_presets %}
+      <li class="group flex-row items-center">
+        <button class="grow justify-start"
+                type="button"
+                hx-get="{% url 'filter_preset_apply' preset.id %}"
+                hx-target="#filter"
+                hx-swap="outerHTML">
+          {{ preset.name }}
+        </button>
+        <button class="btn btn-ghost btn-xs opacity-0 group-hover:opacity-100 focus:opacity-100"
+                type="button"
+                aria-label="{% blocktranslate with name=preset.name %}Delete {{ name }}{% endblocktranslate %}"
+                hx-post="{% url 'filter_preset_delete' preset.id %}"
+                hx-trigger="confirmed"
+                hx-target="#filter-presets"
+                hx-swap="outerHTML"
+                data-title="{% translate 'Delete filter preset?' %}"
+                data-text="{% blocktranslate with name=preset.name %}Delete “{{ name }}”?{% endblocktranslate %}"
+                data-confirm-text="{% translate 'Delete' %}"
+                _="install prompt_swal">
+          <i class="fa-solid fa-xmark fa-fw"></i>
+        </button>
+      </li>
+    {% empty %}
+      <li class="menu-disabled"><span>{% translate 'No saved presets' %}</span></li>
+    {% endfor %}
+  </ul>
+</div>

app/templates/transactions/pages/transactions.html

@@ -56,7 +56,7 @@
                     @click="filterOpen = !filterOpen"
                     :aria-expanded="filterOpen" id="filter-button"
                     title="{% translate 'Filter transactions' %}"
-                    _="on load or change from #filter
+                    _="on change from #filter-container
                          -- Check if any filter has a non-default value
                          set hasActiveFilter to false
 
@@ -157,7 +157,7 @@
                            add .hidden to #filter-active-indicator
                          end">
               <i class="fa-solid fa-filter fa-fw"></i>
-              <span id="filter-active-indicator" class="absolute -top-1 -right-1 w-3 h-3 bg-error rounded-full hidden z-10"></span>
+              <span id="filter-active-indicator" class="absolute -top-1 -right-1 w-3 h-3 bg-error rounded-full {% if not filter_is_active %}hidden {% endif %}z-10"></span>
             </button>
 
             {# Search box #}
@@ -177,7 +177,8 @@
                          show <.transaction/> in <#transactions-list/>
                          when its textContent.toLowerCase() contains my value.toLowerCase()">
 
-            {# Order by icon dropdown #}
+            {% include "transactions/fragments/filter_presets.html" %}
+
             {# Order by icon dropdown #}
             <div>
               <button class="btn btn-secondary join-item" type="button"
@@ -220,21 +221,16 @@
           {# Filter transactions form #}
           <div class="z-1" x-show="filterOpen" x-collapse x-cloak>
             <div class="card card-body bg-base-200 mt-2">
-              <div class="text-right">
-                <button class="btn btn-outline btn-error btn-sm w-fit"
-                        _="on click call #filter.reset() then trigger change on #filter">{% translate 'Clear' %}</button>
-              </div>
+              {% include "transactions/fragments/filter_actions.html" %}
 
-              <form _="on change or submit or search trigger updated on window
-                         install init_tom_select
-                         install init_datepicker"
-                    id="filter" class="mt-3">
-                {% crispy filter.form %}
-              </form>
+              {% include "transactions/fragments/filter_form.html" %}
 
               <div class="text-right">
-                <button class="btn btn-outline btn-error btn-sm w-fit"
-                        _="on click call #filter.reset() then trigger change on #filter">{% translate 'Clear' %}</button>
+                <a class="btn btn-outline btn-error btn-sm w-fit"
+                   href="{{ request.path }}"
+                   hx-get="{% url 'transaction_filter_clear' %}"
+                   hx-target="#filter"
+                   hx-swap="outerHTML">{% translate 'Clear' %}</a>
               </div>
             </div>
           </div>