From 3500f667a947b6184555e23808b955985058a6d1 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Wed, 6 Nov 2024 17:07:22 -0300
Subject: [PATCH] feat: move action_bar to it's own cotton component and add
 basic sum of selected items

---
 app/templates/cotton/amount/display.html      |  2 +-
 .../cotton/ui/transactions_action_bar.html    | 80 +++++++++++++++++++
 .../monthly_overview/fragments/list.html      | 64 +--------------
 .../transactions/fragments/list_all.html      | 62 +-------------
 4 files changed, 86 insertions(+), 122 deletions(-)
 create mode 100644 app/templates/cotton/ui/transactions_action_bar.html

diff --git a/app/templates/cotton/amount/display.html b/app/templates/cotton/amount/display.html
index e0513ed5..bb8a7208 100644
--- a/app/templates/cotton/amount/display.html
+++ b/app/templates/cotton/amount/display.html
@@ -2,6 +2,6 @@
 
 <div class="{% if text_end %}text-end{% elif text_start %}text-start{% endif %}">
   <div class="amount{% if color == 'grey' %} tw-text-gray-500{% elif color == 'green' %} tw-text-green-400{% elif color == 'red' %} tw-text-red-400{% endif %}"
-       data-original-value="{% currency_display amount=amount prefix=prefix suffix=suffix decimal_places=decimal_places %}">
+       data-original-value="{% currency_display amount=amount prefix=prefix suffix=suffix decimal_places=decimal_places %}" data-amount="{{ amount|floatformat:"-40u" }}">
   </div>
 </div>
diff --git a/app/templates/cotton/ui/transactions_action_bar.html b/app/templates/cotton/ui/transactions_action_bar.html
new file mode 100644
index 00000000..e3ae2ac0
--- /dev/null
+++ b/app/templates/cotton/ui/transactions_action_bar.html
@@ -0,0 +1,80 @@
+{% load i18n %}
+<div class="tw-sticky tw-bottom-4 tw-left-0 tw-right-0 tw-z-50 tw-hidden mx-auto tw-w-fit" id="actions-bar"
+_="on change from #transactions-list or htmx:afterSettle
+          if no <input[type='checkbox']:checked/> in #transactions-list
+            add .tw-hidden to #actions-bar
+          else
+            remove .tw-hidden from #actions-bar
+            then trigger selected_transactions_updated
+          end
+        end">
+  <div class="card slide-in-left">
+    <div class="card-body p-2">
+      {% 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()">
+          <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()">
+          <i class="fa-regular fa-square tw-text-red-400"></i>
+        </button>
+      </div>
+      <div class="vr mx-3 tw-align-middle"></div>
+      <div class="btn-group me-3" role="group">
+        <button class="btn btn-secondary btn-sm"
+              hx-get="{% url 'transactions_bulk_pay' %}"
+              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>
+        </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>
+      </div>
+      <button class="btn btn-secondary btn-sm"
+              hx-get="{% url 'transactions_bulk_delete' %}"
+              hx-include=".transaction"
+              hx-trigger="confirmed"
+              data-bs-toggle="tooltip"
+              data-bs-title="{% translate 'Delete' %}"
+              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 them!" %}"
+              _="install prompt_swal">
+        <i class="fa-solid fa-trash text-danger"></i>
+      </button>
+      <div class="vr mx-3 tw-align-middle"></div>
+      <span _="on selected_transactions_updated from #actions-bar
+                set total to 0.0
+                for amt in <.transaction:has(input[name='transactions']:checked) .amount/>
+                  set amountValue to parseFloat(amt.getAttribute('data-amount'))
+                  if not isNaN(amountValue)
+                    set total to total + amountValue
+                  end
+                end
+                put total.toLocaleString() into me
+              end
+              on click
+                set original_value to my innerText
+                writeText(my innerText) on navigator.clipboard
+                put '{% translate "copied!" %}' into me
+                wait 1s
+                put original_value into me
+              end"
+            class="" role="button"></span>
+      {% endspaceless %}
+    </div>
+  </div>
+</div>
diff --git a/app/templates/monthly_overview/fragments/list.html b/app/templates/monthly_overview/fragments/list.html
index 8cbc9c31..23066877 100644
--- a/app/templates/monthly_overview/fragments/list.html
+++ b/app/templates/monthly_overview/fragments/list.html
@@ -2,14 +2,7 @@
 {% load i18n %}
 {% regroup transactions by date|customnaturaldate as transactions_by_date %}
 
-<div id="transactions-list"
-     _="on change or click or htmx:afterSettle
-          if no <input[type='checkbox']:checked/> in me
-            add .tw-hidden to #actions-bar
-          else
-            remove .tw-hidden from #actions-bar
-          end
-        end">
+<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')">
@@ -47,57 +40,6 @@
       title="{% translate 'No transactions this month' %}"
       subtitle="{% translate "Try adding one" %}"></c-msg.empty>
   {% endfor %}
-    <!-- Floating bar -->
-  <div class="tw-sticky tw-bottom-4 tw-left-0 tw-right-0 tw-z-50 tw-hidden mx-auto tw-w-fit" id="actions-bar">
-    <div class="card slide-in-left">
-      <div class="card-body p-2">
-        {% 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()">
-            <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()">
-            <i class="fa-regular fa-square tw-text-red-400"></i>
-          </button>
-        </div>
-        <div class="vr mx-3 tw-align-middle"></div>
-        <div class="btn-group me-3" role="group">
-          <button class="btn btn-secondary btn-sm"
-                hx-get="{% url 'transactions_bulk_pay' %}"
-                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>
-          </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>
-        </div>
-        <button class="btn btn-secondary btn-sm"
-                hx-get="{% url 'transactions_bulk_delete' %}"
-                hx-include=".transaction"
-                hx-trigger="confirmed"
-                data-bs-toggle="tooltip"
-                data-bs-title="{% translate 'Delete' %}"
-                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 them!" %}"
-                _="install prompt_swal">
-          <i class="fa-solid fa-trash text-danger"></i>
-        </button>
-        {% endspaceless %}
-      </div>
-    </div>
-  </div>
+{# Floating bar #}
+  <c-ui.transactions-action-bar></c-ui.transactions-action-bar>
 </div>
diff --git a/app/templates/transactions/fragments/list_all.html b/app/templates/transactions/fragments/list_all.html
index 0e098191..2f0cf67c 100644
--- a/app/templates/transactions/fragments/list_all.html
+++ b/app/templates/transactions/fragments/list_all.html
@@ -3,14 +3,7 @@
 
 {% regroup page_obj by date|customnaturaldate as transactions_by_date %}
 
-<div id="transactions-list"
-     _="on change or click
-          if no <input[type='checkbox']:checked/> in me
-            add .tw-hidden to #actions-bar
-          else
-            remove .tw-hidden from #actions-bar
-          end
-        end">
+<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')">
@@ -127,57 +120,6 @@
   </div>
   {% endif %}
 {#  Floating bar#}
-<div class="tw-sticky tw-bottom-4 tw-left-0 tw-right-0 tw-z-50 tw-hidden mx-auto tw-w-fit" id="actions-bar">
-  <div class="card slide-in-left">
-    <div class="card-body p-2">
-      {% 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()">
-          <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()">
-          <i class="fa-regular fa-square tw-text-red-400"></i>
-        </button>
-      </div>
-      <div class="vr mx-3 tw-align-middle"></div>
-      <div class="btn-group me-3" role="group">
-        <button class="btn btn-secondary btn-sm"
-              hx-get="{% url 'transactions_bulk_pay' %}"
-              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>
-        </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>
-      </div>
-      <button class="btn btn-secondary btn-sm"
-              hx-get="{% url 'transactions_bulk_delete' %}"
-              hx-include=".transaction"
-              hx-trigger="confirmed"
-              data-bs-toggle="tooltip"
-              data-bs-title="{% translate 'Delete' %}"
-              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 them!" %}"
-              _="install prompt_swal">
-        <i class="fa-solid fa-trash text-danger"></i>
-      </button>
-      {% endspaceless %}
-    </div>
-  </div>
-</div>
+  <c-ui.transactions-action-bar></c-ui.transactions-action-bar>
 
 </div>