109 lines
3.5 KiB
Vue
109 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, ref } from "vue"
|
|
import Currency from "../components/Currency.vue";
|
|
import TransactionRow from "../components/TransactionRow.vue";
|
|
import TransactionInputRow from "../components/TransactionInputRow.vue";
|
|
import { useAccountStore } from "../stores/budget-account";
|
|
import EditAccount from "../dialogs/EditAccount.vue";
|
|
import Button from "../components/Button.vue";
|
|
|
|
defineProps<{
|
|
budgetid: string
|
|
accountid: string
|
|
}>()
|
|
|
|
const accounts = useAccountStore();
|
|
const TargetReconcilingBalance = ref(0);
|
|
|
|
function setReconciled(event: Event) {
|
|
const target = event.target as HTMLInputElement;
|
|
accounts.SetReconciledForAllTransactions(target.checked);
|
|
}
|
|
|
|
function cancelReconcilation() {
|
|
accounts.SetReconciledForAllTransactions(false);
|
|
accounts.Reconciling = false;
|
|
}
|
|
|
|
function submitReconcilation() {
|
|
accounts.SubmitReconcilation(0);
|
|
accounts.Reconciling = false;
|
|
}
|
|
|
|
function createReconcilationTransaction() {
|
|
const diff = TargetReconcilingBalance.value - accounts.ReconcilingBalance ;
|
|
accounts.SubmitReconcilation(diff);
|
|
accounts.Reconciling = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="inline">{{ accounts.CurrentAccount?.Name }}</h1>
|
|
<EditAccount />
|
|
<br />
|
|
|
|
<span>
|
|
Current Balance:
|
|
<Currency :value="accounts.CurrentAccount?.WorkingBalance" />
|
|
</span>
|
|
|
|
<span>
|
|
Cleared Balance:
|
|
<Currency :value="accounts.CurrentAccount?.ClearedBalance" />
|
|
</span>
|
|
|
|
<span v-if="accounts.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
|
|
Is <Currency :value="accounts.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" />
|
|
<Button
|
|
class="bg-orange-500 mx-3"
|
|
v-if="Math.abs(accounts.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
|
|
@click="createReconcilationTransaction"
|
|
>Create reconciling Transaction</Button>
|
|
<Button
|
|
class="bg-red-500 mx-3"
|
|
@click="cancelReconcilation"
|
|
>Cancel</Button>
|
|
</span>
|
|
<span v-if="!accounts.Reconciling">
|
|
Reconciled Balance:
|
|
<Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
|
|
<Button class="bg-blue-500" @click="accounts.Reconciling = true" v-if="!accounts.Reconciling">Reconcile</Button>
|
|
</span>
|
|
<table>
|
|
<tr class="font-bold">
|
|
<td style="width: 90px;">Date</td>
|
|
<td style="max-width: 150px;">Payee</td>
|
|
<td style="max-width: 200px;">Category</td>
|
|
<td>Memo</td>
|
|
<td class="text-right">Amount</td>
|
|
<td style="width: 20px;"></td>
|
|
<td style="width: 40px;"></td>
|
|
<td style="width: 20px;" v-if="accounts.Reconciling">
|
|
<input type="checkbox" @input="setReconciled" />
|
|
</td>
|
|
</tr>
|
|
<TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
|
|
<TransactionRow
|
|
v-for="(transaction, index) in accounts.TransactionsList" :key="transaction.ID"
|
|
:transaction="transaction"
|
|
:index="index"
|
|
/>
|
|
</table>
|
|
</template>
|
|
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
.negative {
|
|
color: red;
|
|
}
|
|
</style> |