feat: convert transaction-item to django-cotton

app/templates/cotton/transaction/item.html

@@ -0,0 +1,144 @@
+{% load i18n %}
+<div class="transaction d-flex my-3">
+  {% 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 }}" aria-label="{% translate 'Select' %}">
+  </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 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">
+      <a class="text-decoration-none my-lg-3 mx-lg-3 mx-2 my-2"
+         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 tw-text-green-400"></i>{% else %}<i
+              class="fa-regular fa-circle tw-text-red-400"></i>{% endif %}
+      </a>
+    </div>
+    <div class="col-lg-8 col-12">
+{#      Date#}
+      <div class="mb-1 tw-text-gray-400">
+        <i class="fa-solid fa-calendar fa-fw me-1 fa-xs"></i>{{ transaction.date|date:"SHORT_DATE_FORMAT" }} • {{ transaction.reference_date|date:"b/Y" }}</div>
+{#      Description#}
+      <div class="mb-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">
+{#        Notes#}
+        {% if transaction.notes %}
+        <div class="mb-1 tw-text-gray-400">
+          <i class="fa-solid fa-align-left fa-fw me-1 fa-xs"></i>{{ transaction.notes | linebreaksbr }}
+        </div>
+        {% endif %}
+        {% if transaction.category %}
+        <div class="mb-1">
+          {% spaceless %}
+          <i class="fa-solid fa-icons fa-fw me-1 fa-xs"></i>
+          <span class="">{{ transaction.category.name }}</span>
+          {% endspaceless %}
+        </div>
+        {% endif %}
+        {#        Tags#}
+        {% with transaction.tags.all as tags %}
+        {% if tags %}
+        <div class="mb-1">
+          {% for tag in tags %}
+            <span><i class="fa-solid fa-hashtag fa-fw fa-xs"></i>{{ tag.name }}</span>
+          {% endfor %}
+        </div>
+        {% endif %}
+        {% endwith %}
+      </div>
+    </div>
+    <div class="col-lg-3 col-12 text-lg-end align-self-end">
+        <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>
+        {#    Exchange Rate#}
+        {% with exchanged=transaction.exchanged_amount %}
+        {% if exchanged %}
+        <c-amount.display 
+            :amount="exchanged.amount"
+            :prefix="exchanged.prefix"
+            :suffix="exchanged.suffix"
+            :decimal_places="exchanged.decimal_places"
+            color="grey"></c-amount.display>
+        {% 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-2/4 tw--top-6 tw-invisible d-none
+      d-xl-flex flex-xl-row tw-text-base card">
+        <div class="card-body p-1 shadow-lg">
+          <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">
+          <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 "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>
+        </div>
+      </div>
+{#      Item actions dropdown fallback for mobile#}
+      <div class="dropdown !tw-absolute tw-top-0 tw-right-0 xl:tw-invisible">
+        <button class="btn tw-text-2xl lg:tw-text-sm lg:tw-border-none text-light"
+                data-bs-toggle="dropdown"
+                aria-expanded="false">
+          <i class="fa-solid fa-ellipsis fa-fw"></i>
+        </button>
+        <ul class="dropdown-menu tw-text-base">
+          <li><a class="dropdown-item"
+                 role="button"
+                 hx-get="{% url 'transaction_edit' transaction_id=transaction.id %}"
+                 hx-target="#generic-offcanvas">
+            <i class="fa-solid fa-pencil me-3"></i>{% translate "Edit" %}
+          </a></li>
+          <li><a class="dropdown-item"
+                 role="button"
+                 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 me-3"></i>{% translate "Delete" %}
+          </a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+</div>

app/templates/installment_plans/fragments/list_transactions.html

@@ -7,7 +7,9 @@
 {% block body %}
 <div hx-get="{% url 'installment_plan_transactions' installment_plan_id=installment_plan.id %}" hx-trigger="updated from:window" hx-vals='{"disable_selection": true}' hx-target="closest .offcanvas" class="show-loading">
 {% for transaction in transactions %}
-  {% include 'transactions/fragments/item.html' with transaction=transaction disable_selection=True %}
+  <c-transaction.item
+    :transaction="transaction"
+    :disable-selection="True"></c-transaction.item>
 {% endfor %}
 </div>
 {% endblock %}

app/templates/monthly_overview/fragments/list.html

@@ -25,8 +25,9 @@
       </div>
       <div class="collapse show" id="{{ x.grouper|slugify }}">
         <div class="">
-        {% for trans in x.list %}
-        {% include 'transactions/fragments/item.html' with transaction=trans %}
+        {% for transaction in x.list %}
+          <c-transaction.item
+            :transaction="transaction"></c-transaction.item>
         {% endfor %}
         </div>
       </div>

app/templates/recurring_transactions/fragments/list_transactions.html

@@ -7,7 +7,9 @@
 {% block body %}
 <div hx-get="{% url 'recurring_transaction_transactions' recurring_transaction_id=recurring_transaction.id %}" hx-trigger="updated from:window" hx-vals='{"disable_selection": true}' hx-target="closest .offcanvas" class="show-loading">
 {% for transaction in transactions %}
-  {% include 'transactions/fragments/item.html' with transaction=transaction disable_selection=True %}
+  <c-transaction.item
+    :transaction="transaction"
+    :disable-selection="True"></c-transaction.item>
 {% endfor %}
 </div>
 {% endblock %}

app/templates/transactions/fragments/item.html

@@ -1,5 +1,4 @@
 {% load i18n %}
-{% load currency_display %}
 <div class="transaction d-flex my-3">
   {% if not disable_selection %}
   <label class="px-3 d-flex align-items-center justify-content-center">

app/templates/yearly_overview/fragments/list.html

@@ -1,39 +0,0 @@
-{% load natural %}
-{% load i18n %}
-{% regroup transactions by date|customnaturaldate as transactions_by_date %}
-
-<div>
-  {% for x in transactions_by_date %}
-    <div>
-      <div class="my-3 w-100 tw-text-base border-bottom bg-body">
-        <a class="text-decoration-none d-inline-block w-100"
-           role="button"
-           data-bs-toggle="collapse"
-           data-bs-target="#{{ x.grouper|slugify }}"
-           id="#{{ x.grouper|slugify }}-collapsible"
-           aria-expanded="true"
-           aria-controls="collapseExample">
-        {{ x.grouper }}
-        </a>
-      </div>
-      <div class="collapse show" id="{{ x.grouper|slugify }}">
-        <div class="ps-3">
-        {% for trans in x.list %}
-        {% include 'transactions/fragments/item.html' with transaction=trans %}
-        {% endfor %}
-        </div>
-      </div>
-    </div>
-
-  {% empty %}
-    <div class="row p-5">
-      <div class="col p-5">
-        <div class="text-center">
-          <i class="fa-solid fa-circle-xmark tw-text-6xl"></i>
-          <p class="lead mt-4 mb-0">{% translate "No transactions this month" %}</p>
-          <p class="tw-text-gray-500">{% translate "Try adding one" %}</p>
-        </div>
-      </div>
-    </div>
-  {% endfor %}
-</div>