From bc75757ac752f079a538da0c5cda79c88ccd8ca6 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Mon, 28 Feb 2022 13:13:21 +0000
Subject: [PATCH] Complete migration two transactions store

---
 web/src/components/TransactionInputRow.vue |  9 +++---
 web/src/components/TransactionRow.vue      |  4 +--
 web/src/pages/Account.vue                  | 34 ++++++++++++----------
 web/src/stores/budget-account.ts           |  8 -----
 web/src/stores/transactions.ts             |  5 +---
 5 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/web/src/components/TransactionInputRow.vue b/web/src/components/TransactionInputRow.vue
index 007eccf..9eb3da8 100644
--- a/web/src/components/TransactionInputRow.vue
+++ b/web/src/components/TransactionInputRow.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
-import { Transaction, useAccountStore } from '../stores/budget-account'
+import Autocomplete from '../components/Autocomplete.vue'
+import { Transaction, useTransactionsStore } from "../stores/transactions";
 import DateInput from "./DateInput.vue";
 
 const props = defineProps<{
@@ -22,6 +22,7 @@ const TX = ref<Transaction>({
     ID: "",
     Status: "Uncleared",
     TransferAccount: "",
+    Reconciled: false
 });
 
 const payeeType = ref<string|undefined>(undefined);
@@ -41,10 +42,10 @@ const payload = computed(() => JSON.stringify({
     state: "Uncleared"
 }));
 
-const accountStore = useAccountStore();
+const transactionsStore = useTransactionsStore();
 function saveTransaction(e: MouseEvent) {
     e.preventDefault();
-    accountStore.saveTransaction(payload.value);
+    transactionsStore.saveTransaction(payload.value);
 }
 </script>
 
diff --git a/web/src/components/TransactionRow.vue b/web/src/components/TransactionRow.vue
index a022774..100d52f 100644
--- a/web/src/components/TransactionRow.vue
+++ b/web/src/components/TransactionRow.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { useBudgetsStore } from "../stores/budget";
-import { Transaction, useAccountStore } from "../stores/budget-account";
+import { Transaction, useTransactionsStore } from "../stores/transactions";
 import Currency from "./Currency.vue";
 import TransactionEditRow from "./TransactionEditRow.vue";
 import { formatDate } from "../date";
@@ -14,7 +14,7 @@ const props = defineProps<{
 const edit = ref(false);
 
 const CurrentBudgetID = computed(() => useBudgetsStore().CurrentBudgetID);
-const Reconciling = computed(() => useAccountStore().Reconciling);
+const Reconciling = computed(() => useTransactionsStore().Reconciling);
 </script>
 
 <template>
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 94fcfe2..4b8150e 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -6,6 +6,7 @@ import TransactionInputRow from "../components/TransactionInputRow.vue";
 import { useAccountStore } from "../stores/budget-account";
 import EditAccount from "../dialogs/EditAccount.vue";
 import Button from "../components/Button.vue";
+import { useTransactionsStore } from "../stores/transactions";
 
 defineProps<{
     budgetid: string
@@ -13,27 +14,28 @@ defineProps<{
 }>()
 
 const accounts = useAccountStore();
+const transactions = useTransactionsStore();
 const TargetReconcilingBalance = ref(0);
 
 function setReconciled(event: Event) {
     const target = event.target as HTMLInputElement;
-    accounts.SetReconciledForAllTransactions(target.checked);
+    transactions.SetReconciledForAllTransactions(target.checked);
 }
 
 function cancelReconcilation() {
-    accounts.SetReconciledForAllTransactions(false);
-    accounts.Reconciling = false;
+    transactions.SetReconciledForAllTransactions(false);
+    transactions.Reconciling = false;
 }
 
 function submitReconcilation() {
-    accounts.SubmitReconcilation(0);
-    accounts.Reconciling = false;
+    transactions.SubmitReconcilation(0);
+    transactions.Reconciling = false;
 }
 
 function createReconcilationTransaction() {
-    const diff = TargetReconcilingBalance.value - accounts.ReconcilingBalance;
-    accounts.SubmitReconcilation(diff);
-    accounts.Reconciling = false;
+    const diff = TargetReconcilingBalance.value - transactions.ReconcilingBalance;
+    transactions.SubmitReconcilation(diff);
+    transactions.Reconciling = false;
 }
 </script>
 
@@ -57,25 +59,25 @@ function createReconcilationTransaction() {
 
             <span
                 class="border-2 border-blue-500 rounded-lg bg-blue-500 ml-2 p-1"
-                v-if="!accounts.Reconciling"
-                @click="accounts.Reconciling = true"
+                v-if="!transactions.Reconciling"
+                @click="transactions.Reconciling = true"
             >
                 Reconciled:
                 <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
             </span>
         </div>
 
-        <span v-if="accounts.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
+        <span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
             Is
-            <Currency :value="accounts.ReconcilingBalance" />your current balance?
+            <Currency :value="transactions.ReconcilingBalance" />your current balance?
             <Button class="bg-blue-500 mx-3" @click="submitReconcilation">Yes!</Button>
             <br />No, it's:
             <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
             Difference:
-            <Currency :value="accounts.ReconcilingBalance - TargetReconcilingBalance" />
+            <Currency :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />
             <Button
                 class="bg-orange-500 mx-3"
-                v-if="Math.abs(accounts.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
+                v-if="Math.abs(transactions.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
                 @click="createReconcilationTransaction"
             >Create reconciling Transaction</Button>
             <Button class="bg-red-500 mx-3" @click="cancelReconcilation">Cancel</Button>
@@ -91,13 +93,13 @@ function createReconcilationTransaction() {
             <td class="text-right">Amount</td>
             <td style="width: 20px;"></td>
             <td style="width: 40px;"></td>
-            <td style="width: 20px;" v-if="accounts.Reconciling">
+            <td style="width: 20px;" v-if="transactions.Reconciling">
                 <input type="checkbox" @input="setReconciled" />
             </td>
         </tr>
         <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
         <TransactionRow
-            v-for="(transaction, index) in accounts.TransactionsList"
+            v-for="(transaction, index) in transactions.TransactionsList"
             :key="transaction.ID"
             :transaction="transaction"
             :index="index"
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index bb4d73e..b7cf3fc 100644
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@@ -82,14 +82,6 @@ export const useAccountStore = defineStore("budget/account", {
 
             return this.GetAccount(state.CurrentAccountID);
         },
-        ReconcilingBalance(state): number {
-            let reconciledBalance = this.CurrentAccount!.ReconciledBalance;
-            for (const transaction of this.TransactionsList) {
-                if (transaction.Reconciled)
-                    reconciledBalance += transaction.Amount;
-            }
-            return reconciledBalance;
-        },
         OnBudgetAccounts(state) {
             return [...state.Accounts.values()].filter(x => x.OnBudget);
         },
diff --git a/web/src/stores/transactions.ts b/web/src/stores/transactions.ts
index 8346e98..b1935c0 100644
--- a/web/src/stores/transactions.ts
+++ b/web/src/stores/transactions.ts
@@ -1,9 +1,6 @@
-
 import { defineStore } from "pinia"
-import { GET, POST } from "../api";
-import { useBudgetsStore } from "./budget";
+import { POST } from "../api";
 import { useAccountStore } from "./budget-account";
-import { useSessionStore } from "./session";
 
 interface State {
     Transactions: Map<string, Transaction>