Create transaction detail view

nummi/main/static/main/css/main.css

@@ -459,3 +459,32 @@ ul.statements {
     }
   }
 }
+
+.multilink {
+  display: grid;
+  grid-auto-columns: max-content;
+}
+
+.transaction-details {
+  display: grid;
+  grid-auto-columns: minmax(32rem, max-content);
+  grid-auto-rows: min-content;
+
+  max-width: 32rem;
+
+  ul {
+    list-style: none;
+    display: grid;
+
+    li.value {
+      font-size: 1.5rem;
+      text-align: right;
+    }
+  }
+
+  p.description,
+  ul {
+    border: var(--gray) 1px solid;
+    padding: var(--gap);
+  }
+}

nummi/transaction/templates/transaction/invoice_table.html

@@ -7,32 +7,28 @@
         </colgroup>
         <thead>
             <tr>
-                <th>{% translate "Name" %}</th>
-                <th>{% translate "File" %}</th>
-                <th>{% translate "Delete" %}</th>
+                <th>{% translate "Invoice" %}</th>
+                <th class="wi">{{ "file-edit"|remix }}</th>
             </tr>
         </thead>
         <tbody>
             {% for invoice in transaction.invoices %}
                 <tr>
                     <th scope="row" class="l">
-                        <a href="{{ invoice.get_absolute_url }}">{{ invoice.name }}</a>
+                        <a href="{{ invoice.file.url }}">{{ invoice.name }} [{{ invoice.file|extension }}]</a>
                     </th>
                     <td>
-                        <a href="{{ invoice.file.url }}">{% translate "File" %} [{{ invoice.file|extension }}]</a>
-                    </td>
-                    <td>
-                        <a href="{{ invoice.get_delete_url }}">{% translate "Delete" %}</a>
+                        <a href="{{ invoice.get_absolute_url }}" title="{% translate "Edit" %}">{{ "file-edit"|remix }}</a>
                     </td>
                 </tr>
             {% empty %}
                 <tr>
-                    <td class="empty" colspan="3">{% translate "No invoice" %}</td>
+                    <td class="empty" colspan="2">{% translate "No invoice" %}</td>
                 </tr>
             {% endfor %}
         </tbody>
         <tfoot>
-            <tr class="more">
+            <tr class="new">
                 <td colspan="3">
                     <a href="{% url "new_invoice" transaction.pk %}">{% translate "Create invoice" %}</a>
                 </td>

nummi/transaction/templates/transaction/transaction_detail.html

@@ -0,0 +1,42 @@
+{% extends "main/form/base.html" %}
+{% load i18n %}
+{% load main_extras %}
+{% block title %}
+    {{ transaction }}
+    – Nummi
+{% endblock %}
+{% block link %}
+    {{ block.super }}
+    {% css "main/css/form.css" %}
+    {% css "main/css/table.css" %}
+    {% css "main/css/plot.css" %}
+{% endblock %}
+{% block body %}
+    <h2>{{ transaction }}</h2>
+    <section class="transaction-details">
+        <ul>
+            {% if statement %}
+                <li>
+                    <a href="{{ account.get_absolute_url }}">{{ account.icon|remix }}{{ account }}</a> –
+                    <a href="{{ statement.get_absolute_url }}">{{ statement }}</a>
+                </li>
+            {% endif %}
+            {% if category %}
+                <li>
+                    <a href="{{ category.get_absolute_url }}">{{ category.icon|remix }}{{ category }}</a>
+                </li>
+            {% endif %}
+            {% if transaction.trader %}<li class="wi">{{ "p2p"|remix }}{{ transaction.trader }}</li>{% endif %}
+            <li class="date wi">{{ "calendar"|remix }}{{ transaction.date }}</li>
+            <li class="value">{{ transaction.value|pmvalue }}</li>
+        </ul>
+        <p>
+            <a href="{% url "edit_transaction" transaction.id %}">{{ "edit"|remix }}{% translate "Edit transaction" %}</a>
+        </p>
+        {% if transaction.description %}<p class="description">{{ transaction.description|linebreaksbr }}</p>{% endif %}
+    </section>
+    <section>
+        <h3>{% translate "Invoices" %}</h3>
+        {% include "transaction/invoice_table.html" %}
+    </section>
+{% endblock %}

nummi/transaction/templates/transaction/transaction_form.html

@@ -13,12 +13,9 @@
             <a href="{{ statement.get_absolute_url }}">{{ statement }}</a>
         </p>
     {% endif %}
-{% endblock %}
-{% block tables %}
-    {% if not form.instance|adding %}
-        <section>
-            <h3>{% translate "Invoices" %}</h3>
-            {% include "transaction/invoice_table.html" %}
-        </section>
+    {% if not instance|adding %}
+        <p>
+            <a href="{{ instance.get_absolute_url }}">{{ "arrow-go-back"|remix }}{% translate "Back" %}</a>
+        </p>
     {% endif %}
 {% endblock %}

nummi/transaction/urls.py

@@ -15,7 +15,12 @@ urlpatterns = [
         name="transaction_month",
     ),
     path("new", views.TransactionCreateView.as_view(), name="new_transaction"),
-    path("<transaction>", views.TransactionUpdateView.as_view(), name="transaction"),
+    path("<transaction>", views.TransactionDetailView.as_view(), name="transaction"),
+    path(
+        "<transaction>/edit",
+        views.TransactionUpdateView.as_view(),
+        name="edit_transaction",
+    ),
     path(
         "<transaction>/delete",
         views.TransactionDeleteView.as_view(),

nummi/transaction/views.py

@@ -7,6 +7,7 @@ from history.utils import history
 from main.views import (
     NummiCreateView,
     NummiDeleteView,
+    NummiDetailView,
     NummiListView,
     NummiUpdateView,
     UserMixin,
@@ -61,6 +62,22 @@ class TransactionUpdateView(NummiUpdateView):
     pk_url_kwarg = "transaction"
 
 
+class TransactionDetailView(NummiDetailView):
+    model = Transaction
+    pk_url_kwarg = "transaction"
+    context_object_name = "transaction"
+
+    def get_context_data(self, **kwargs):
+        data = super().get_context_data(**kwargs)
+        transaction = data.get("transaction")
+
+        return data | {
+            "account": transaction.statement.account,
+            "statement": transaction.statement,
+            "category": transaction.category,
+        }
+
+
 class InvoiceUpdateView(NummiUpdateView):
     model = Invoice
     form_class = InvoiceForm