Use transactionid for TransactionRow

web/src/components/TransactionEditRow.vue

@@ -3,6 +3,7 @@ import { computed, ref } from "vue";
 import Autocomplete from './Autocomplete.vue'
 import { useAccountStore } from '../stores/budget-account'
 import DateInput from "./DateInput.vue";
+import { useTransactionsStore } from "../stores/transactions";
 
 const props = defineProps<{
     transactionid: string
@@ -10,8 +11,8 @@ const props = defineProps<{
 
 const emit = defineEmits(["save"]);
 
-const accountStore = useAccountStore();
+const transactionsStore = useTransactionsStore();
-const TX = accountStore.Transactions.get(props.transactionid)!;
+const TX = transactionsStore.Transactions.get(props.transactionid)!;
 const payeeType = ref<string|undefined>(undefined);
 
 const payload = computed(() => JSON.stringify({
@@ -29,7 +30,7 @@ const payload = computed(() => JSON.stringify({
 
 function saveTransaction(e: MouseEvent) {
     e.preventDefault();
-    accountStore.editTransaction(TX.ID, payload.value);
+    transactionsStore.editTransaction(TX.ID, payload.value);
     emit('save');
 }
 </script>

web/src/components/TransactionRow.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { useBudgetsStore } from "../stores/budget";
-import { Transaction, useTransactionsStore } from "../stores/transactions";
+import { useTransactionsStore } from "../stores/transactions";
 import Currency from "./Currency.vue";
 import TransactionEditRow from "./TransactionEditRow.vue";
 import { formatDate } from "../date";
 
 const props = defineProps<{
-    transaction: Transaction,
+    transactionid: string,
     index: number,
 }>();
 
@@ -15,36 +15,39 @@ const edit = ref(false);
 
 const CurrentBudgetID = computed(() => useBudgetsStore().CurrentBudgetID);
 const Reconciling = computed(() => useTransactionsStore().Reconciling);
+
+const transactionsStore = useTransactionsStore();
+const TX = transactionsStore.Transactions.get(props.transactionid)!;
 </script>
 
 <template>
     <tr
         v-if="!edit"
-        class="{{new Date(transaction.Date) > new Date() ? 'future' : ''}}"
+        class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
         :class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']"
     >
         <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
-        <td>{{ formatDate(transaction.Date) }}</td>
+        <td>{{ formatDate(TX.Date) }}</td>
-        <td>{{ transaction.TransferAccount ? "Transfer : " + transaction.TransferAccount : transaction.Payee }}</td>
+        <td>{{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}</td>
-        <td>{{ transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : "" }}</td>
+        <td>{{ TX.CategoryGroup ? TX.CategoryGroup + " : " + TX.Category : "" }}</td>
         <td>
             <a
-                :href="'/budget/' + CurrentBudgetID + '/transaction/' + transaction.ID"
+                :href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID"
-            >{{ transaction.Memo }}</a>
+            >{{ TX.Memo }}</a>
         </td>
         <td>
-            <Currency class="block" :value="transaction.Amount" />
+            <Currency class="block" :value="TX.Amount" />
         </td>
-        <td>{{ transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*") }}</td>
+        <td>{{ TX.Status == "Reconciled" ? "✔" : (TX.Status == "Uncleared" ? "" : "*") }}</td>
         <td class="text-right">
-            {{ transaction.GroupID ? "☀" : "" }}
+            {{ TX.GroupID ? "☀" : "" }}
             <a @click="edit = true;">✎</a>
         </td>
-        <td v-if="Reconciling && transaction.Status != 'Reconciled'">
+        <td v-if="Reconciling && TX.Status != 'Reconciled'">
-            <input type="checkbox" v-model="transaction.Reconciled" />
+            <input type="checkbox" v-model="TX.Reconciled" />
         </td>
     </tr>
-    <TransactionEditRow v-if="edit" :transactionid="transaction.ID" @save="edit = false" />
+    <TransactionEditRow v-if="edit" :transactionid="TX.ID" @save="edit = false" />
 </template>
 
 <style>

web/src/pages/Account.vue

@@ -101,7 +101,7 @@ function createReconcilationTransaction() {
         <TransactionRow
             v-for="(transaction, index) in transactions.TransactionsList"
             :key="transaction.ID"
-            :transaction="transaction"
+            :transactionid="transaction.ID"
             :index="index"
         />
     </table>

web/src/pages/BudgetSidebar.vue

@@ -50,7 +50,9 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
-      Closed Accounts
+      <div class="flex flex-row justify-between font-bold">
+        <span>Closed Accounts</span>
+      </div>
     </li>
     <!--<li>
       <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>