Add category-activity transaction view

Signed-off-by: Knut Ahlers <knut@ahlers.me>

frontend/components/accountOverview.vue

@@ -58,6 +58,7 @@
             <button
               v-shortkey.once="['ctrl', 'alt', 'n']"
               class="btn btn-primary"
+              :disabled="accountIsCategory"
               @click="showAddTransaction = !showAddTransaction"
               @shortkey="showAddTransaction = !showAddTransaction"
             >
@@ -66,6 +67,7 @@
             </button>
             <button
               class="btn btn-primary"
+              :disabled="accountIsCategory"
               data-bs-toggle="modal"
               data-bs-target="#transferMoneyModal"
             >
@@ -75,6 +77,7 @@
 
             <button
               class="btn btn-success"
+              :disabled="accountIsCategory"
               @click="markAccountReconciled"
             >
               <i class="fas fa-fw fa-square-check mr-1" />
@@ -150,6 +153,9 @@
                 <th class="minimized-column">
                   Date
                 </th>
+                <th v-if="accountIsCategory">
+                  Account
+                </th>
                 <th>Payee</th>
                 <th v-if="account.type !== 'tracking'">
                   Category
@@ -177,7 +183,7 @@
               >
                 <tr
                   v-if="tx.id !== editedTxId"
-                  :key="tx.id"
+                  :key="`display-${tx.id}`"
                   @dblclick="editTx(tx.id)"
                 >
                   <td>
@@ -189,6 +195,9 @@
                   <td class="minimized-column">
                     {{ new Date(tx.time).toLocaleDateString() }}
                   </td>
+                  <td v-if="accountIsCategory">
+                    {{ accountIdToName[tx.account] }}
+                  </td>
                   <td>{{ tx.payee }}</td>
                   <td v-if="account.type !== 'tracking'">
                     {{ accountIdToName[tx.category] }}
@@ -216,7 +225,7 @@
                 </tr>
                 <tx-editor
                   v-else
-                  :key="tx.id"
+                  :key="`editor-${tx.id}`"
                   :account="account"
                   :accounts="accounts"
                   :edit="tx"
@@ -391,6 +400,10 @@ export default {
       return Object.fromEntries(this.accounts.map(acc => [acc.id, acc.name]))
     },
 
+    accountIsCategory() {
+      return this.account.type === 'category'
+    },
+
     accountTypes() {
       return Object.fromEntries(this.accounts.map(acc => [acc.id, acc.type]))
     },

frontend/components/budgetDashboard.vue

@@ -63,7 +63,13 @@
                   {{ formatNumber(allocatedByCategory[cat.id] || 0) }} €
                 </td>
                 <td :class="classFromNumber(activityByCategory[cat.id] || 0, ['text-end'])">
+                  <router-link
+                    class="text-white text-decoration-none"
+                    :to="{ name: 'account-transactions', params: { accountId: cat.id }}"
+                    title="List Transactions"
+                  >
                     {{ formatNumber(activityByCategory[cat.id] || 0) }} €
+                  </router-link>
                 </td>
                 <td class="text-end">
                   <a

frontend/components/txEditor.vue

@@ -11,6 +11,9 @@
         @keyup.enter="$refs.payee.focus()"
       >
     </td>
+    <td v-if="accountIsCategory">
+      {{ accountIdToName[edit.account] }}
+    </td>
     <td>
       <input
         ref="payee"
@@ -75,6 +78,14 @@ import { responseToJSON } from '../helpers'
 
 export default {
   computed: {
+    accountIdToName() {
+      return Object.fromEntries(this.accounts.map(acc => [acc.id, acc.name]))
+    },
+
+    accountIsCategory() {
+      return this.account.type === 'category'
+    },
+
     categories() {
       const cats = this.accounts.filter(acc => acc.type === 'category')
       cats.sort((a, b) => a.name.localeCompare(b.name))