From ecc09ca6a64be53457604368005a65fc098b96d9 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Sun, 9 Feb 2025 17:14:25 -0300
Subject: [PATCH] feat(monthly): add quick-search field

---
 app/templates/cotton/transaction/item.html    | 314 +++++++++---------
 .../monthly_overview/fragments/list.html      |  18 +-
 .../monthly_overview/pages/overview.html      |  14 +
 3 files changed, 184 insertions(+), 162 deletions(-)

diff --git a/app/templates/cotton/transaction/item.html b/app/templates/cotton/transaction/item.html
index efaed30..b2ddfdf 100644
--- a/app/templates/cotton/transaction/item.html
+++ b/app/templates/cotton/transaction/item.html
@@ -1,172 +1,174 @@
 {% load markdown %}
 {% load i18n %}
-<div class="transaction d-flex my-1 {% if transaction.type == "EX" %}expense{% else %}income{% endif %}">
-  {% if not disable_selection %}
-    <label class="px-3 d-flex align-items-center justify-content-center">
-      <input class="form-check-input" type="checkbox" name="transactions" value="{{ transaction.id }}"
-             id="check-{{ transaction.id }}" aria-label="{% translate 'Select' %}" hx-preserve>
-    </label>
-  {% endif %}
-  <div class="tw-border-s-6 tw-border-e-0 tw-border-t-0 tw-border-b-0 border-bottom
+<div class="transaction">
+  <div class="d-flex my-1 {% if transaction.type == "EX" %}expense{% else %}income{% endif %}">
+    {% if not disable_selection %}
+      <label class="px-3 d-flex align-items-center justify-content-center">
+        <input class="form-check-input" type="checkbox" name="transactions" value="{{ transaction.id }}"
+               id="check-{{ transaction.id }}" aria-label="{% translate 'Select' %}" hx-preserve>
+      </label>
+    {% endif %}
+    <div class="tw-border-s-6 tw-border-e-0 tw-border-t-0 tw-border-b-0 border-bottom
   hover:tw-bg-zinc-900 p-2 {% if transaction.account.is_asset %}tw-border-dashed{% else %}tw-border-solid{% endif %}
   {% if transaction.type == "EX" %}tw-border-red-500{% else %}tw-border-green-500{% endif %} tw-relative
   w-100 transaction-item"
-       _="on mouseover remove .tw-invisible from the first .transaction-actions in me end
+         _="on mouseover remove .tw-invisible from the first .transaction-actions in me end
         on mouseout add .tw-invisible to the first .transaction-actions in me end">
-    <div class="row font-monospace tw-text-sm align-items-center">
-      <div class="col-lg-1 col-12 d-flex align-items-center tw-text-2xl lg:tw-text-xl text-lg-center text-center">
-        {% if not transaction.deleted %}
-        <a class="text-decoration-none my-lg-3 mx-lg-3 mx-2 my-2 tw-text-gray-500"
-           title="{% if transaction.is_paid %}{% trans 'Paid' %}{% else %}{% trans 'Projected' %}{% endif %}"
-           role="button"
-           hx-get="{% url 'transaction_pay' transaction_id=transaction.id %}"
-           hx-target="closest .transaction"
-           hx-swap="outerHTML">
-          {% if transaction.is_paid %}<i class="fa-regular fa-circle-check"></i>{% else %}<i
-              class="fa-regular fa-circle"></i>{% endif %}
-        </a>
-        {% else %}
-          <div class="text-decoration-none my-lg-3 mx-lg-3 mx-2 my-2 tw-text-gray-500"
-               title="{% if transaction.is_paid %}{% trans 'Paid' %}{% else %}{% trans 'Projected' %}{% endif %}">
-          {% if transaction.is_paid %}<i class="fa-regular fa-circle-check"></i>{% else %}<i
-              class="fa-regular fa-circle"></i>{% endif %}
+      <div class="row font-monospace tw-text-sm align-items-center">
+        <div class="col-lg-1 col-12 d-flex align-items-center tw-text-2xl lg:tw-text-xl text-lg-center text-center">
+          {% if not transaction.deleted %}
+            <a class="text-decoration-none my-lg-3 mx-lg-3 mx-2 my-2 tw-text-gray-500"
+               title="{% if transaction.is_paid %}{% trans 'Paid' %}{% else %}{% trans 'Projected' %}{% endif %}"
+               role="button"
+               hx-get="{% url 'transaction_pay' transaction_id=transaction.id %}"
+               hx-target="closest .transaction"
+               hx-swap="outerHTML">
+              {% if transaction.is_paid %}<i class="fa-regular fa-circle-check"></i>{% else %}<i
+                  class="fa-regular fa-circle"></i>{% endif %}
+            </a>
+          {% else %}
+            <div class="text-decoration-none my-lg-3 mx-lg-3 mx-2 my-2 tw-text-gray-500"
+                 title="{% if transaction.is_paid %}{% trans 'Paid' %}{% else %}{% trans 'Projected' %}{% endif %}">
+              {% if transaction.is_paid %}<i class="fa-regular fa-circle-check"></i>{% else %}<i
+                  class="fa-regular fa-circle"></i>{% endif %}
+            </div>
+          {% endif %}
+        </div>
+        <div class="col-lg-8 col-12">
+          {#      Date#}
+          <div class="row mb-2 mb-lg-1 tw-text-gray-400">
+            <div class="col-auto pe-1"><i class="fa-solid fa-calendar fa-fw me-1 fa-xs"></i></div>
+            <div
+                class="col ps-0">{{ transaction.date|date:"SHORT_DATE_FORMAT" }} • {{ transaction.reference_date|date:"b/Y" }}</div>
           </div>
-        {% endif %}
-      </div>
-      <div class="col-lg-8 col-12">
-        {#      Date#}
-        <div class="row mb-2 mb-lg-1 tw-text-gray-400">
-          <div class="col-auto pe-1"><i class="fa-solid fa-calendar fa-fw me-1 fa-xs"></i></div>
-          <div
-              class="col ps-0">{{ transaction.date|date:"SHORT_DATE_FORMAT" }} • {{ transaction.reference_date|date:"b/Y" }}</div>
-        </div>
-        {#      Description#}
-        <div class="mb-2 mb-lg-1 text-white tw-text-base">
-          {% spaceless %}
-            <span>{{ transaction.description }}</span>
-            {% if transaction.installment_plan and transaction.installment_id %}
-              <span
-                  class="badge text-bg-secondary ms-2">{{ transaction.installment_id }}/{{ transaction.installment_plan.installment_total_number }}</span>
-            {% endif %}
-            {% if transaction.recurring_transaction %}
-              <span class="text-primary tw-text-xs ms-2"><i class="fa-solid fa-arrows-rotate fa-fw"></i></span>
-            {% endif %}
-          {% endspaceless %}
-        </div>
-        <div class="tw-text-gray-400 tw-text-sm">
-          {#        Entities #}
-          {% with transaction.entities.all as entities %}
-            {% if entities %}
+          {#      Description#}
+          <div class="mb-2 mb-lg-1 text-white tw-text-base">
+            {% spaceless %}
+              <span>{{ transaction.description }}</span>
+              {% if transaction.installment_plan and transaction.installment_id %}
+                <span
+                    class="badge text-bg-secondary ms-2">{{ transaction.installment_id }}/{{ transaction.installment_plan.installment_total_number }}</span>
+              {% endif %}
+              {% if transaction.recurring_transaction %}
+                <span class="text-primary tw-text-xs ms-2"><i class="fa-solid fa-arrows-rotate fa-fw"></i></span>
+              {% endif %}
+            {% endspaceless %}
+          </div>
+          <div class="tw-text-gray-400 tw-text-sm">
+            {#        Entities #}
+            {% with transaction.entities.all as entities %}
+              {% if entities %}
+                <div class="row mb-2 mb-lg-1 tw-text-gray-400">
+                  <div class="col-auto pe-1"><i class="fa-solid fa-user-group fa-fw me-1 fa-xs"></i></div>
+                  <div class="col ps-0">{{ entities|join:", " }}</div>
+                </div>
+              {% endif %}
+            {% endwith %}
+            {#        Notes#}
+            {% if transaction.notes %}
               <div class="row mb-2 mb-lg-1 tw-text-gray-400">
-                <div class="col-auto pe-1"><i class="fa-solid fa-user-group fa-fw me-1 fa-xs"></i></div>
-                <div class="col ps-0">{{ entities|join:", " }}</div>
-              </div>
-            {% endif %}
-          {% endwith %}
-          {#        Notes#}
-          {% if transaction.notes %}
-            <div class="row mb-2 mb-lg-1 tw-text-gray-400">
-              <div class="col-auto pe-1"><i class="fa-solid fa-align-left fa-fw me-1 fa-xs"></i></div>
-              <div class="col ps-0">{{ transaction.notes | limited_markdown | linebreaksbr }}</div>
-            </div>
-          {% endif %}
-          {#        Category#}
-          {% if transaction.category %}
-            <div class="row mb-2 mb-lg-1 tw-text-gray-400">
-              <div class="col-auto pe-1"><i class="fa-solid fa-icons fa-fw me-1 fa-xs"></i></div>
-              <div class="col ps-0">{{ transaction.category.name }}</div>
-            </div>
-          {% endif %}
-          {#        Tags#}
-          {% with transaction.tags.all as tags %}
-            {% if tags %}
-              <div class="row mb-2 mb-lg-1 tw-text-gray-400">
-                <div class="col-auto pe-1"><i class="fa-solid fa-hashtag fa-fw me-1 fa-xs"></i></div>
-                <div class="col ps-0">{{ tags|join:", " }}</div>
+                <div class="col-auto pe-1"><i class="fa-solid fa-align-left fa-fw me-1 fa-xs"></i></div>
+                <div class="col ps-0">{{ transaction.notes | limited_markdown | linebreaksbr }}</div>
+              </div>
+            {% endif %}
+            {#        Category#}
+            {% if transaction.category %}
+              <div class="row mb-2 mb-lg-1 tw-text-gray-400">
+                <div class="col-auto pe-1"><i class="fa-solid fa-icons fa-fw me-1 fa-xs"></i></div>
+                <div class="col ps-0">{{ transaction.category.name }}</div>
+              </div>
+            {% endif %}
+            {#        Tags#}
+            {% with transaction.tags.all as tags %}
+              {% if tags %}
+                <div class="row mb-2 mb-lg-1 tw-text-gray-400">
+                  <div class="col-auto pe-1"><i class="fa-solid fa-hashtag fa-fw me-1 fa-xs"></i></div>
+                  <div class="col ps-0">{{ tags|join:", " }}</div>
+                </div>
+              {% endif %}
+            {% endwith %}
+          </div>
+        </div>
+        <div class="col-lg-3 col-12 text-lg-end align-self-end">
+          <div class="main-amount mb-2 mb-lg-0">
+            <c-amount.display
+                :amount="transaction.amount"
+                :prefix="transaction.account.currency.prefix"
+                :suffix="transaction.account.currency.suffix"
+                :decimal_places="transaction.account.currency.decimal_places"
+                color="{% if transaction.type == "EX" %}red{% else %}green{% endif %}"></c-amount.display>
+          </div>
+          {#    Exchange Rate#}
+          {% with exchanged=transaction.exchanged_amount %}
+            {% if exchanged %}
+              <div class="exchanged-amount mb-2 mb-lg-0">
+                <c-amount.display
+                    :amount="exchanged.amount"
+                    :prefix="exchanged.prefix"
+                    :suffix="exchanged.suffix"
+                    :decimal_places="exchanged.decimal_places"
+                    color="grey"></c-amount.display>
               </div>
             {% endif %}
           {% endwith %}
+          <div>
+            {% if transaction.account.group %}{{ transaction.account.group.name }} • {% endif %}{{ transaction.account.name }}
+          </div>
         </div>
-      </div>
-      <div class="col-lg-3 col-12 text-lg-end align-self-end">
-        <div class="main-amount mb-2 mb-lg-0">
-          <c-amount.display
-              :amount="transaction.amount"
-              :prefix="transaction.account.currency.prefix"
-              :suffix="transaction.account.currency.suffix"
-              :decimal_places="transaction.account.currency.decimal_places"
-              color="{% if transaction.type == "EX" %}red{% else %}green{% endif %}"></c-amount.display>
-        </div>
-        {#    Exchange Rate#}
-        {% with exchanged=transaction.exchanged_amount %}
-          {% if exchanged %}
-            <div class="exchanged-amount mb-2 mb-lg-0">
-              <c-amount.display
-                  :amount="exchanged.amount"
-                  :prefix="exchanged.prefix"
-                  :suffix="exchanged.suffix"
-                  :decimal_places="exchanged.decimal_places"
-                  color="grey"></c-amount.display>
-            </div>
-          {% endif %}
-        {% endwith %}
         <div>
-          {% if transaction.account.group %}{{ transaction.account.group.name }} • {% endif %}{{ transaction.account.name }}
-        </div>
-      </div>
-      <div>
-        {#      Item actions#}
-        <div
-            class="transaction-actions !tw-absolute tw-left-1/2 tw-top-0 tw--translate-x-1/2 tw--translate-y-1/2 tw-invisible d-flex flex-row card">
-          <div class="card-body p-1 shadow-lg">
-            {% if not transaction.deleted %}
-              <a class="btn btn-secondary btn-sm transaction-action"
-                 role="button"
-                 data-bs-toggle="tooltip"
-                 data-bs-title="{% translate "Edit" %}"
-                 hx-get="{% url 'transaction_edit' transaction_id=transaction.id %}"
-                 hx-target="#generic-offcanvas" hx-swap="innerHTML">
-                <i class="fa-solid fa-pencil fa-fw"></i></a>
-              <a class="btn btn-secondary btn-sm transaction-action"
-                 role="button"
-                 data-bs-toggle="tooltip"
-                 data-bs-title="{% translate "Duplicate" %}"
-                 hx-get="{% url 'transaction_clone' transaction_id=transaction.id %}"
-                 _="on click if event.ctrlKey set @hx-get to `{% url 'transaction_clone' transaction_id=transaction.id %}?edit=true` then call htmx.process(me) end then trigger ready"
-                 hx-trigger="ready">
-                <i class="fa-solid fa-clone fa-fw"></i></a>
-              <a class="btn btn-secondary btn-sm transaction-action"
-                 role="button"
-                 data-bs-toggle="tooltip"
-                 data-bs-title="{% translate "Delete" %}"
-                 hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
-                 hx-trigger='confirmed'
-                 data-bypass-on-ctrl="true"
-                 data-title="{% translate "Are you sure?" %}"
-                 data-text="{% translate "You won't be able to revert this!" %}"
-                 data-confirm-text="{% translate "Yes, delete it!" %}"
-                 _="install prompt_swal"><i class="fa-solid fa-trash fa-fw text-danger"></i>
-              </a>
-            {% else %}
-              <a class="btn btn-secondary btn-sm transaction-action"
-                 role="button"
-                 data-bs-toggle="tooltip"
-                 data-bs-title="{% translate "Restore" %}"
-                 hx-get="{% url 'transaction_undelete' transaction_id=transaction.id %}"><i
-                  class="fa-solid fa-trash-arrow-up"></i></a>
-              <a class="btn btn-secondary btn-sm transaction-action"
-                 role="button"
-                 data-bs-toggle="tooltip"
-                 data-bs-title="{% translate "Delete" %}"
-                 hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
-                 hx-trigger='confirmed'
-                 data-bypass-on-ctrl="true"
-                 data-title="{% translate "Are you sure?" %}"
-                 data-text="{% translate "You won't be able to revert this!" %}"
-                 data-confirm-text="{% translate "Yes, delete it!" %}"
-                 _="install prompt_swal"><i class="fa-solid fa-trash fa-fw text-danger"></i>
-              </a>
-            {% endif %}
+          {#      Item actions#}
+          <div
+              class="transaction-actions !tw-absolute tw-left-1/2 tw-top-0 tw--translate-x-1/2 tw--translate-y-1/2 tw-invisible d-flex flex-row card">
+            <div class="card-body p-1 shadow-lg">
+              {% if not transaction.deleted %}
+                <a class="btn btn-secondary btn-sm transaction-action"
+                   role="button"
+                   data-bs-toggle="tooltip"
+                   data-bs-title="{% translate "Edit" %}"
+                   hx-get="{% url 'transaction_edit' transaction_id=transaction.id %}"
+                   hx-target="#generic-offcanvas" hx-swap="innerHTML">
+                  <i class="fa-solid fa-pencil fa-fw"></i></a>
+                <a class="btn btn-secondary btn-sm transaction-action"
+                   role="button"
+                   data-bs-toggle="tooltip"
+                   data-bs-title="{% translate "Duplicate" %}"
+                   hx-get="{% url 'transaction_clone' transaction_id=transaction.id %}"
+                   _="on click if event.ctrlKey set @hx-get to `{% url 'transaction_clone' transaction_id=transaction.id %}?edit=true` then call htmx.process(me) end then trigger ready"
+                   hx-trigger="ready">
+                  <i class="fa-solid fa-clone fa-fw"></i></a>
+                <a class="btn btn-secondary btn-sm transaction-action"
+                   role="button"
+                   data-bs-toggle="tooltip"
+                   data-bs-title="{% translate "Delete" %}"
+                   hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
+                   hx-trigger='confirmed'
+                   data-bypass-on-ctrl="true"
+                   data-title="{% translate "Are you sure?" %}"
+                   data-text="{% translate "You won't be able to revert this!" %}"
+                   data-confirm-text="{% translate "Yes, delete it!" %}"
+                   _="install prompt_swal"><i class="fa-solid fa-trash fa-fw text-danger"></i>
+                </a>
+              {% else %}
+                <a class="btn btn-secondary btn-sm transaction-action"
+                   role="button"
+                   data-bs-toggle="tooltip"
+                   data-bs-title="{% translate "Restore" %}"
+                   hx-get="{% url 'transaction_undelete' transaction_id=transaction.id %}"><i
+                    class="fa-solid fa-trash-arrow-up"></i></a>
+                <a class="btn btn-secondary btn-sm transaction-action"
+                   role="button"
+                   data-bs-toggle="tooltip"
+                   data-bs-title="{% translate "Delete" %}"
+                   hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
+                   hx-trigger='confirmed'
+                   data-bypass-on-ctrl="true"
+                   data-title="{% translate "Are you sure?" %}"
+                   data-text="{% translate "You won't be able to revert this!" %}"
+                   data-confirm-text="{% translate "Yes, delete it!" %}"
+                   _="install prompt_swal"><i class="fa-solid fa-trash fa-fw text-danger"></i>
+                </a>
+              {% endif %}
+            </div>
           </div>
         </div>
       </div>
diff --git a/app/templates/monthly_overview/fragments/list.html b/app/templates/monthly_overview/fragments/list.html
index 2306687..0483e15 100644
--- a/app/templates/monthly_overview/fragments/list.html
+++ b/app/templates/monthly_overview/fragments/list.html
@@ -4,9 +4,9 @@
 
 <div id="transactions-list">
   {% for x in transactions_by_date %}
-    <div id="{{ x.grouper|slugify }}"
-         _="on htmx:afterSettle from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
-      <div class="mt-3 mb-1 w-100 tw-text-base border-bottom bg-body">
+    <div id="{{ x.grouper|slugify }}" class="transactions-divider"
+         _="on htmx:afterSwap from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
+      <div class="mt-3 mb-1 w-100 tw-text-base border-bottom bg-body transactions-divider-title">
         <a class="text-decoration-none d-inline-block w-100"
            role="button"
            data-bs-toggle="collapse"
@@ -17,15 +17,21 @@
         {{ x.grouper }}
         </a>
       </div>
-      <div class="collapse" id="c-{{ x.grouper|slugify }}-collapse"
+      <div class="collapse transactions-divider-collapse" id="c-{{ x.grouper|slugify }}-collapse"
            _="on shown.bs.collapse sessionStorage.setItem(the closest parent @id, 'true')
               on hidden.bs.collapse sessionStorage.setItem(the closest parent @id, 'false')
-              on htmx:afterSettle from #transactions
+              on htmx:afterSettle from #transactions or toggle
                 set state to sessionStorage.getItem(the closest parent @id)
                 if state is 'true' or state is null
                   add .show to me
                   set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true
-                end">
+                else
+                  remove .show from me
+                  set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to false
+                end
+              on show
+                add .show to me
+                set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true">
         <div class="d-flex flex-column">
         {% for transaction in x.list %}
           <c-transaction.item
diff --git a/app/templates/monthly_overview/pages/overview.html b/app/templates/monthly_overview/pages/overview.html
index f6b6d01..46ee48a 100644
--- a/app/templates/monthly_overview/pages/overview.html
+++ b/app/templates/monthly_overview/pages/overview.html
@@ -172,6 +172,20 @@
                     _="on click call #filter.reset() then trigger change on #filter">{% translate 'Clear' %}</button>
           </div>
         </div>
+        <div id="search" class="my-3">
+          <label class="w-100">
+          <input type="search" class="form-control" placeholder="Buscar" hx-preserve id="quick-search"
+                 _="on input or search or htmx:afterSwap from window
+                      if my value is empty
+                        trigger toggle on <.transactions-divider-collapse/>
+                      else
+                        trigger show on <.transactions-divider-collapse/>
+                      end
+                      show <.transactions-divider-title/> when my value is empty
+                      show <.transaction/> in <#transactions-list/>
+                      when its textContent.toLowerCase() contains my value.toLowerCase()">
+          </label>
+        </div>
         {#      Transactions list#}
         <div id="transactions"
              class="show-loading"