Complete migration two transactions store

This commit is contained in:
Jan Bader 2022-02-28 13:13:21 +00:00
parent a3e12df2e2
commit bc75757ac7
5 changed files with 26 additions and 34 deletions

View File

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from "vue"; import { computed, ref } from "vue";
import Autocomplete, { Suggestion } from '../components/Autocomplete.vue' import Autocomplete from '../components/Autocomplete.vue'
import { Transaction, useAccountStore } from '../stores/budget-account' import { Transaction, useTransactionsStore } from "../stores/transactions";
import DateInput from "./DateInput.vue"; import DateInput from "./DateInput.vue";
const props = defineProps<{ const props = defineProps<{
@ -22,6 +22,7 @@ const TX = ref<Transaction>({
ID: "", ID: "",
Status: "Uncleared", Status: "Uncleared",
TransferAccount: "", TransferAccount: "",
Reconciled: false
}); });
const payeeType = ref<string|undefined>(undefined); const payeeType = ref<string|undefined>(undefined);
@ -41,10 +42,10 @@ const payload = computed(() => JSON.stringify({
state: "Uncleared" state: "Uncleared"
})); }));
const accountStore = useAccountStore(); const transactionsStore = useTransactionsStore();
function saveTransaction(e: MouseEvent) { function saveTransaction(e: MouseEvent) {
e.preventDefault(); e.preventDefault();
accountStore.saveTransaction(payload.value); transactionsStore.saveTransaction(payload.value);
} }
</script> </script>

View File

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from "vue"; import { computed, ref } from "vue";
import { useBudgetsStore } from "../stores/budget"; import { useBudgetsStore } from "../stores/budget";
import { Transaction, useAccountStore } from "../stores/budget-account"; import { Transaction, useTransactionsStore } from "../stores/transactions";
import Currency from "./Currency.vue"; import Currency from "./Currency.vue";
import TransactionEditRow from "./TransactionEditRow.vue"; import TransactionEditRow from "./TransactionEditRow.vue";
import { formatDate } from "../date"; import { formatDate } from "../date";
@ -14,7 +14,7 @@ const props = defineProps<{
const edit = ref(false); const edit = ref(false);
const CurrentBudgetID = computed(() => useBudgetsStore().CurrentBudgetID); const CurrentBudgetID = computed(() => useBudgetsStore().CurrentBudgetID);
const Reconciling = computed(() => useAccountStore().Reconciling); const Reconciling = computed(() => useTransactionsStore().Reconciling);
</script> </script>
<template> <template>

View File

@ -6,6 +6,7 @@ import TransactionInputRow from "../components/TransactionInputRow.vue";
import { useAccountStore } from "../stores/budget-account"; import { useAccountStore } from "../stores/budget-account";
import EditAccount from "../dialogs/EditAccount.vue"; import EditAccount from "../dialogs/EditAccount.vue";
import Button from "../components/Button.vue"; import Button from "../components/Button.vue";
import { useTransactionsStore } from "../stores/transactions";
defineProps<{ defineProps<{
budgetid: string budgetid: string
@ -13,27 +14,28 @@ defineProps<{
}>() }>()
const accounts = useAccountStore(); const accounts = useAccountStore();
const transactions = useTransactionsStore();
const TargetReconcilingBalance = ref(0); const TargetReconcilingBalance = ref(0);
function setReconciled(event: Event) { function setReconciled(event: Event) {
const target = event.target as HTMLInputElement; const target = event.target as HTMLInputElement;
accounts.SetReconciledForAllTransactions(target.checked); transactions.SetReconciledForAllTransactions(target.checked);
} }
function cancelReconcilation() { function cancelReconcilation() {
accounts.SetReconciledForAllTransactions(false); transactions.SetReconciledForAllTransactions(false);
accounts.Reconciling = false; transactions.Reconciling = false;
} }
function submitReconcilation() { function submitReconcilation() {
accounts.SubmitReconcilation(0); transactions.SubmitReconcilation(0);
accounts.Reconciling = false; transactions.Reconciling = false;
} }
function createReconcilationTransaction() { function createReconcilationTransaction() {
const diff = TargetReconcilingBalance.value - accounts.ReconcilingBalance; const diff = TargetReconcilingBalance.value - transactions.ReconcilingBalance;
accounts.SubmitReconcilation(diff); transactions.SubmitReconcilation(diff);
accounts.Reconciling = false; transactions.Reconciling = false;
} }
</script> </script>
@ -57,25 +59,25 @@ function createReconcilationTransaction() {
<span <span
class="border-2 border-blue-500 rounded-lg bg-blue-500 ml-2 p-1" class="border-2 border-blue-500 rounded-lg bg-blue-500 ml-2 p-1"
v-if="!accounts.Reconciling" v-if="!transactions.Reconciling"
@click="accounts.Reconciling = true" @click="transactions.Reconciling = true"
> >
Reconciled: Reconciled:
<Currency :value="accounts.CurrentAccount?.ReconciledBalance" /> <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
</span> </span>
</div> </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 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> <Button class="bg-blue-500 mx-3" @click="submitReconcilation">Yes!</Button>
<br />No, it's: <br />No, it's:
<input class="text-right" type="number" v-model="TargetReconcilingBalance" /> <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
Difference: Difference:
<Currency :value="accounts.ReconcilingBalance - TargetReconcilingBalance" /> <Currency :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />
<Button <Button
class="bg-orange-500 mx-3" 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" @click="createReconcilationTransaction"
>Create reconciling Transaction</Button> >Create reconciling Transaction</Button>
<Button class="bg-red-500 mx-3" @click="cancelReconcilation">Cancel</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 class="text-right">Amount</td>
<td style="width: 20px;"></td> <td style="width: 20px;"></td>
<td style="width: 40px;"></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" /> <input type="checkbox" @input="setReconciled" />
</td> </td>
</tr> </tr>
<TransactionInputRow :budgetid="budgetid" :accountid="accountid" /> <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
<TransactionRow <TransactionRow
v-for="(transaction, index) in accounts.TransactionsList" v-for="(transaction, index) in transactions.TransactionsList"
:key="transaction.ID" :key="transaction.ID"
:transaction="transaction" :transaction="transaction"
:index="index" :index="index"

View File

@ -82,14 +82,6 @@ export const useAccountStore = defineStore("budget/account", {
return this.GetAccount(state.CurrentAccountID); 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) { OnBudgetAccounts(state) {
return [...state.Accounts.values()].filter(x => x.OnBudget); return [...state.Accounts.values()].filter(x => x.OnBudget);
}, },

View File

@ -1,9 +1,6 @@
import { defineStore } from "pinia" import { defineStore } from "pinia"
import { GET, POST } from "../api"; import { POST } from "../api";
import { useBudgetsStore } from "./budget";
import { useAccountStore } from "./budget-account"; import { useAccountStore } from "./budget-account";
import { useSessionStore } from "./session";
interface State { interface State {
Transactions: Map<string, Transaction> Transactions: Map<string, Transaction>