feat(transactions): add htmx filter presets

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>