WYGIWYH/app/templates/cotton/transaction/item.html

{% load markdown %}
{% load i18n %}
<div
    class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %} group/transaction">
  <div class="flex my-1">
    {% if not disable_selection or not dummy %}
      <label class="px-3 flex! items-center justify-center">
        <input class="checkbox" type="checkbox" name="transactions" value="{{ transaction.id }}"
               id="check-{{ transaction.id }}" aria-label="{% translate 'Select' %}" hx-preserve>
      </label>
    {% endif %}
    <div class="border-s-4 border-e-0 border-t-0
                hover:bg-base-200 p-2 {% if transaction.account.is_asset %}border-dashed{% else %}border-solid{% endif %}
                {% if transaction.type == "EX" %}border-s-error{% else %}border-s-success{% endif %} relative
                w-full transaction-item bg-base-100 rounded">
      <div class="flex flex-wrap font-mono text-sm items-center">
        <div class="lg:w-auto w-full flex items-center text-2xl lg:text-xl lg:text-center text-center p-0 cursor-pointer">
          {% if not transaction.deleted %}
            <a class="no-underline p-3 text-base-content/50"
               title="{% if transaction.is_paid %}{% trans 'Paid' %}{% else %}{% trans 'Projected' %}{% endif %}"
               role="button"
                {% if not dummy %}
               hx-get="{% url 'transaction_pay' transaction_id=transaction.id %}"
               hx-target="closest .transaction"
               hx-swap="outerHTML"{% endif %}>
              {% 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="no-underline p-3 text-base-content/50"
                 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="lg:flex-1 w-full {% if transaction.account.is_untracked_by or transaction.category.mute or transaction.mute %}opacity-70{% endif %}">
          {#      Date#}
          <div class="flex flex-wrap mb-2 lg:mb-1 text-base-content/70">
            <div class="w-auto pe-1"><i class="fa-solid fa-calendar fa-fw mr-1 fa-xs"></i></div>
            <div
                class="flex-1 ps-0">{{ transaction.date|date:"SHORT_DATE_FORMAT" }} • {{ transaction.reference_date|date:"b/Y" }}</div>
          </div>
          {#      Description#}
          <div class="mb-2 lg:mb-1 text-base-content text-base">
            {% spaceless %}
              <span class="{% if transaction.description %}mr-2{% endif %}">{{ transaction.description }}</span>
              {% if transaction.installment_plan and transaction.installment_id %}
                <span
                    class="badge badge-neutral mx-1">{{ transaction.installment_id }}/{{ transaction.installment_plan.installment_total_number }}</span>
              {% endif %}
              {% if transaction.recurring_transaction %}
                <span class="text-primary text-xs mx-1"><i class="fa-solid fa-arrows-rotate fa-fw"></i></span>
              {% endif %}
              {% if transaction.dca_expense_entries.all or transaction.dca_income_entries.all %}
                <span class="badge badge-neutral mx-1">{% trans 'DCA' %}</span>
              {% endif %}
            {% endspaceless %}
          </div>
          <div class="text-base-content/70 text-sm">
            {#        Entities #}
            {% comment %} First, check for the highest priority: a valid 'overriden_entities' list. {% endcomment %}
            {% if overriden_entities %}
              <div class="flex flex-wrap mb-2 lg:mb-1 text-base-content/70">
                <div class="w-auto pe-1"><i class="fa-solid fa-user-group fa-fw mr-1 fa-xs"></i></div>
                <div class="flex-1 ps-0">{{ overriden_entities|join:", " }}</div>
              </div>

              {% comment %} If no override, fall back to transaction entities, but ONLY if the transaction has an ID. {% endcomment %}
            {% elif transaction.id and transaction.entities.all %}
              <div class="flex flex-wrap mb-2 lg:mb-1 text-base-content/70">
                <div class="w-auto pe-1"><i class="fa-solid fa-user-group fa-fw mr-1 fa-xs"></i></div>
                <div class="flex-1 ps-0">{{ transaction.entities.all|join:", " }}</div>
              </div>
            {% endif %}
            {#        Notes#}
            {% if transaction.notes %}
              <div class="flex flex-wrap mb-2 lg:mb-1 text-base-content/70">
                <div class="w-auto pe-1"><i class="fa-solid fa-align-left fa-fw mr-1 fa-xs"></i></div>
                <div class="flex-1 ps-0">{{ transaction.notes | limited_markdown | linebreaksbr }}</div>
              </div>
            {% endif %}
            {#        Category#}
            {% if transaction.category %}
              <div class="flex flex-wrap mb-2 lg:mb-1 text-base-content/70">
                <div class="w-auto pe-1"><i class="fa-solid fa-icons fa-fw mr-1 fa-xs"></i></div>
                <div class="flex-1 ps-0">{{ transaction.category.name }}</div>
              </div>
            {% endif %}
            {#        Tags#}
            {% comment %} First, check for the highest priority: a valid 'overriden_tags' list. {% endcomment %}
            {% if overriden_tags %}
              <div class="flex flex-wrap mb-2 lg:mb-1 text-base-content/70">
                <div class="w-auto pe-1"><i class="fa-solid fa-hashtag fa-fw mr-1 fa-xs"></i></div>
                <div class="flex-1 ps-0">{{ overriden_tags|join:", " }}</div>
              </div>

              {% comment %} If no override, fall back to transaction tags, but ONLY if the transaction has an ID. {% endcomment %}
            {% elif transaction.id and transaction.tags.all %}
              <div class="flex flex-wrap mb-2 lg:mb-1 text-base-content/70">
                <div class="w-auto pe-1"><i class="fa-solid fa-hashtag fa-fw mr-1 fa-xs"></i></div>
                <div class="flex-1 ps-0">{{ transaction.tags.all|join:", " }}</div>
              </div>
            {% endif %}
          </div>
        </div>
        <div
            class="lg:w-auto w-full lg:text-right self-end {% if transaction.account.is_untracked_by or transaction.category.mute or transaction.mute %}opacity-70{% endif %}">
          <div class="main-amount mb-2 lg:mb-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#}
          {% if not dummy %}
            {% with exchanged=transaction.exchanged_amount %}
              {% if exchanged %}
                <div class="exchanged-amount mb-2 lg:mb-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 %}
          {% endif %}
          <div>
            {% if transaction.account.group %}{{ transaction.account.group.name }} • {% endif %}{{ transaction.account.name }}
          </div>
        </div>
        {% if not dummy %}
          <div class="z-1000">
            {#      Item actions#}
            <div
                class="card card-border-base-100 transaction-actions absolute left-1/2 -translate-x-1/2 -translate-y-1/2 top-0 invisible group-hover/transaction:visible flex flex-row bg-base-200">
              <div class="card-body p-1 shadow-lg flex flex-row gap-1">
                {% if not transaction.deleted %}
                  <a class="btn btn-soft btn-sm transaction-action"
                      role="button"
                      hx-get="{% url 'transaction_edit' transaction_id=transaction.id %}"
                      hx-target="#generic-offcanvas" hx-swap="innerHTML"
                      data-tippy-content="{% translate "Edit" %}">
                    <i class="fa-solid fa-pencil fa-fw"></i></a>
                  <a class="btn btn-error btn-soft btn-sm transaction-action"
                      role="button"
                      hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
                      hx-trigger='confirmed'
                      data-tippy-content="{% 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 it!" %}"
                      _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i>
                  </a>
                    <button class="btn btn-soft btn-sm transaction-action" data-bs-toggle="dropdown" aria-expanded="false">
                      <i class="fa-solid fa-ellipsis fa-fw"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-md-start menu">
                      <div class="absolute inset-[0rem_-3rem_-3rem_-3rem] pointer-events-auto -z-10"></div>
                      {% if transaction.account.is_untracked_by %}
                        <li class="menu-disabled" aria-disabled="true">
                          <a class="flex items-center">
                            <i class="fa-solid fa-eye fa-fw mr-2"></i>
                            <div>
                              {% translate 'Show on summaries' %}
                              <div
                                  class="block text-base-content/60 text-xs font-medium">{% translate 'Controlled by account' %}</div>
                            </div>
                          </a>
                        </li>
                      {% elif transaction.category.mute %}
                        <li class="menu-disabled" aria-disabled="true">
                          <a class="flex items-center">
                            <i class="fa-solid fa-eye fa-fw mr-2"></i>
                            <div>
                              {% translate 'Show on summaries' %}
                              <div
                                  class="block text-base-content/60 text-xs font-medium">{% translate 'Controlled by category' %}</div>
                            </div>
                          </a>
                        </li>
                      {% elif transaction.mute %}
                        <li><a href="#"
                               hx-get="{% url 'transaction_mute' transaction_id=transaction.id %}"
                               hx-target="closest .transaction" hx-swap="outerHTML"><i
                            class="fa-solid fa-eye fa-fw mr-2"></i>{% translate 'Show on summaries' %}</a></li>
                      {% else %}
                        <li><a href="#"
                               hx-get="{% url 'transaction_mute' transaction_id=transaction.id %}"
                               hx-target="closest .transaction" hx-swap="outerHTML"><i
                            class="fa-solid fa-eye-slash fa-fw mr-2"></i>{% translate 'Hide from summaries' %}</a></li>
                      {% endif %}
                      <li><a href="#"
                             hx-get="{% url 'quick_transaction_add_as_quick_transaction' transaction_id=transaction.id %}"><i
                          class="fa-solid fa-person-running fa-fw mr-2"></i>{% translate 'Add as quick transaction' %}</a>
                      </li>
                      <hr class="my-1 hr">
                      <li><a href="#"
                             hx-get="{% url 'transaction_change_month' transaction_id=transaction.id change_type='previous' %}"><i
                          class="fa-solid fa-calendar-minus fa-fw mr-2"></i>{% translate 'Move to previous month' %}</a>
                      </li>
                      <li><a href="#"
                             hx-get="{% url 'transaction_change_month' transaction_id=transaction.id change_type='next' %}"><i
                          class="fa-solid fa-calendar-plus fa-fw mr-2"></i>{% translate 'Move to next month' %}</a></li>
                      <li><a href="#"
                             hx-get="{% url 'transaction_move_to_today' transaction_id=transaction.id %}"><i
                          class="fa-solid fa-calendar-day fa-fw mr-2"></i>{% translate 'Move to today' %}</a></li>
                      <hr class="my-1 hr">
                      <li><a href="#"
                             hx-get="{% url 'transaction_clone' transaction_id=transaction.id %}"><i
                          class="fa-solid fa-clone fa-fw mr-2"></i>{% translate 'Duplicate' %}</a></li>
                    </ul>
                {% else %}
                  <div class="tooltip" data-tippy-content="{% translate "Restore" %}">
                    <a class="btn btn-success btn-soft btn-sm transaction-action"
                       role="button"
                       hx-get="{% url 'transaction_undelete' transaction_id=transaction.id %}"><i
                        class="fa-solid fa-trash-arrow-up fa-fw"></i></a>
                  </div>
                  <div class="tooltip" data-tippy-content="{% translate "Delete" %}">
                    <a class="btn btn-error btn-soft btn-sm transaction-action"
                       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 fa-fw"></i>
                    </a>
                  </div>
                {% endif %}
              </div>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>