116 lines
4.0 KiB
Vue
116 lines
4.0 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";
|
|
import { useTransactionsStore } from "../stores/transactions";
|
|
|
|
defineProps<{
|
|
budgetid: string
|
|
accountid: string
|
|
}>()
|
|
|
|
const accounts = useAccountStore();
|
|
const transactions = useTransactionsStore();
|
|
const TargetReconcilingBalance = ref(0);
|
|
|
|
function setReconciled(event: Event) {
|
|
const target = event.target as HTMLInputElement;
|
|
transactions.SetReconciledForAllTransactions(target.checked);
|
|
}
|
|
|
|
function cancelReconcilation() {
|
|
transactions.SetReconciledForAllTransactions(false);
|
|
transactions.Reconciling = false;
|
|
}
|
|
|
|
function submitReconcilation() {
|
|
transactions.SubmitReconcilation(0);
|
|
transactions.Reconciling = false;
|
|
}
|
|
|
|
function createReconcilationTransaction() {
|
|
const diff = TargetReconcilingBalance.value - transactions.ReconcilingBalance;
|
|
transactions.SubmitReconcilation(diff);
|
|
transactions.Reconciling = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-2">
|
|
<h1 class="inline">
|
|
{{ accounts.CurrentAccount?.Name }}
|
|
<EditAccount />
|
|
</h1>
|
|
|
|
<div class="text-right">
|
|
<span class="border-2 rounded-lg p-1 whitespace-nowrap">
|
|
Working:
|
|
<Currency :value="accounts.CurrentAccount?.WorkingBalance" />
|
|
</span>
|
|
|
|
<span class="border-2 rounded-lg p-1 ml-2 whitespace-nowrap">
|
|
Cleared:
|
|
<Currency :value="accounts.CurrentAccount?.ClearedBalance" />
|
|
</span>
|
|
|
|
<span
|
|
class="border-2 border-blue-500 rounded-lg bg-blue-500 ml-2 p-1 whitespace-nowrap"
|
|
v-if="!transactions.Reconciling"
|
|
@click="transactions.Reconciling = true"
|
|
>
|
|
Reconciled:
|
|
<Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
|
|
</span>
|
|
</div>
|
|
|
|
<span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
|
|
Is
|
|
<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="transactions.ReconcilingBalance - TargetReconcilingBalance" />
|
|
<Button
|
|
class="bg-orange-500 mx-3"
|
|
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>
|
|
</span>
|
|
</div>
|
|
|
|
<table>
|
|
<tr class="font-bold">
|
|
<td class="hidden md:block" 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: 80px;">
|
|
<input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" />
|
|
</td>
|
|
</tr>
|
|
<TransactionInputRow class="hidden md:table-row" :budgetid="budgetid" :accountid="accountid" />
|
|
<TransactionRow
|
|
v-for="(transaction, index) in transactions.TransactionsList"
|
|
:key="transaction.ID"
|
|
:transactionid="transaction.ID"
|
|
:index="index"
|
|
/>
|
|
</table>
|
|
</template>
|
|
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
.negative {
|
|
color: red;
|
|
}
|
|
</style> |