From 2b6be8c6ac89898e230586aedecd6373e0450043 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Sat, 25 Jan 2025 12:43:53 -0300
Subject: [PATCH] feat: tidy up transactions action bar

---
 app/apps/transactions/views/transactions.py   |  3 -
 .../cotton/ui/transactions_action_bar.html    | 78 ++++++++++++-------
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/app/apps/transactions/views/transactions.py b/app/apps/transactions/views/transactions.py
index 80ac759..bde35b7 100644
--- a/app/apps/transactions/views/transactions.py
+++ b/app/apps/transactions/views/transactions.py
@@ -147,14 +147,12 @@ def transactions_bulk_edit(request):
     transaction_ids = request.GET.getlist("transactions") or request.POST.getlist(
         "transactions"
     )
-    print(transaction_ids)
     # Load the selected transactions
     transactions = Transaction.objects.filter(id__in=transaction_ids)
 
     if request.method == "POST":
         form = BulkEditTransactionForm(request.POST, user=request.user)
         if form.is_valid():
-            print(form.cleaned_data)
             # Apply changes from the form to all selected transactions
             for transaction in transactions:
                 for field_name, value in form.cleaned_data.items():
@@ -168,7 +166,6 @@ def transactions_bulk_edit(request):
                         else:
                             setattr(transaction, field_name, value)
 
-                print(transaction.is_paid)
                 transaction.save()
                 transaction_updated.send(sender=transaction)
 
diff --git a/app/templates/cotton/ui/transactions_action_bar.html b/app/templates/cotton/ui/transactions_action_bar.html
index 50fed1d..6fd5e60 100644
--- a/app/templates/cotton/ui/transactions_action_bar.html
+++ b/app/templates/cotton/ui/transactions_action_bar.html
@@ -13,36 +13,57 @@
   <div class="card slide-in-bottom">
     <div class="card-body p-2 d-flex justify-content-between align-items-center gap-3">
       {% spaceless %}
-        <div class="btn-group" role="group">
-          <button class="btn btn-secondary btn-sm"
-                  data-bs-toggle="tooltip"
-                  data-bs-title="{% translate 'Select All' %}"
-                  _="on click set <#transactions-list input[type='checkbox']/>'s checked to true then call me.blur() then trigger change">
-            <i class="fa-regular fa-square-check tw-text-green-400"></i>
-          </button>
-          <button class="btn btn-secondary btn-sm"
-                  data-bs-toggle="tooltip"
-                  data-bs-title="{% translate 'Unselect All' %}"
-                  _="on click set <#transactions-list input[type='checkbox']/>'s checked to false then call me.blur() then trigger change">
-            <i class="fa-regular fa-square tw-text-red-400"></i>
+        <div class="dropdown">
+          <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"
+                  aria-expanded="false">
+            <i class="fa-regular fa-square-check fa-fw"></i>
           </button>
+          <ul class="dropdown-menu">
+            <li>
+              <div class="dropdown-item px-3 tw-cursor-pointer"
+                   _="on click set <#transactions-list input[type='checkbox']/>'s checked to true then call me.blur() then trigger change">
+                <i class="fa-regular fa-square-check tw-text-green-400 me-3"></i>{% translate 'Select All' %}
+              </div>
+            </li>
+            <li>
+              <div class="dropdown-item px-3 tw-cursor-pointer"
+                   _="on click set <#transactions-list input[type='checkbox']/>'s checked to false then call me.blur() then trigger change">
+                <i class="fa-regular fa-square tw-text-red-400 me-3"></i>{% translate 'Unselect All' %}
+              </div>
+            </li>
+          </ul>
         </div>
-        <div class="vr mx-3 tw-align-middle"></div>
-        <div class="btn-group me-3" role="group">
+        <div class="vr tw-align-middle"></div>
+        <div class="btn-group">
           <button class="btn btn-secondary btn-sm"
-                  hx-get="{% url 'transactions_bulk_pay' %}"
+                  hx-get="{% url 'transactions_bulk_edit' %}"
+                  hx-target="#generic-offcanvas"
                   hx-include=".transaction"
                   data-bs-toggle="tooltip"
-                  data-bs-title="{% translate 'Mark as paid' %}">
-            <i class="fa-regular fa-circle-check tw-text-green-400"></i>
+                  data-bs-title="{% translate 'Edit' %}">
+            <i class="fa-solid fa-pencil"></i>
           </button>
-          <button class="btn btn-secondary btn-sm"
-                  hx-get="{% url 'transactions_bulk_unpay' %}"
-                  hx-include=".transaction"
-                  data-bs-toggle="tooltip"
-                  data-bs-title="{% translate 'Mark as unpaid' %}">
-            <i class="fa-regular fa-circle tw-text-red-400"></i>
+          <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                  data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
+            <span class="visually-hidden">{% trans "Toggle Dropdown" %}</span>
           </button>
+
+          <ul class="dropdown-menu">
+            <li>
+              <div class="dropdown-item px-3 tw-cursor-pointer"
+                   hx-get="{% url 'transactions_bulk_unpay' %}"
+                   hx-include=".transaction">
+                <i class="fa-regular fa-circle tw-text-red-400 fa-fw me-3"></i>{% translate 'Mark as unpaid' %}
+              </div>
+            </li>
+            <li>
+              <div class="dropdown-item px-3 tw-cursor-pointer"
+                   hx-get="{% url 'transactions_bulk_pay' %}"
+                   hx-include=".transaction">
+                <i class="fa-regular fa-circle-check tw-text-green-400 fa-fw me-3"></i>{% translate 'Mark as paid' %}
+              </div>
+            </li>
+          </ul>
         </div>
         <button class="btn btn-secondary btn-sm"
                 hx-get="{% url 'transactions_bulk_delete' %}"
@@ -57,9 +78,9 @@
                 _="install prompt_swal">
           <i class="fa-solid fa-trash text-danger"></i>
         </button>
-        <div class="vr mx-3 tw-align-middle"></div>
+        <div class="vr tw-align-middle"></div>
         <div class="btn-group"
-              _="on selected_transactions_updated from #actions-bar
+             _="on selected_transactions_updated from #actions-bar
                   set realTotal to math.bignumber(0)
                   set flatTotal to math.bignumber(0)
                   set transactions to <.transaction:has(input[name='transactions']:checked)/>
@@ -95,8 +116,7 @@
                   put Math.min.apply(Math, realAmountValues).toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 40}) into #calc-menu-min's innerText
                   put mean.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 40}) into #calc-menu-mean's innerText
                   put flatAmountValues.length.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 40}) into #calc-menu-count's innerText
-                end"
-        >
+                end">
           <button class="btn btn-secondary btn-sm" _="on click
                       set original_value to #real-total-front's innerText
                       writeText(original_value) on navigator.clipboard
@@ -104,8 +124,8 @@
                       wait 1s
                       put original_value into #real-total-front's innerText
                     end">
-            <i class="fa-solid fa-plus fa-fw me-2 text-primary"></i>
-            <span id="real-total-front">0</span>
+            <i class="fa-solid fa-plus fa-fw me-md-2 text-primary"></i>
+            <span class="d-none d-md-inline-block" id="real-total-front">0</span>
           </button>
           <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
                   data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">