143 lines
4.8 KiB
Vue
143 lines
4.8 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";
|
|
import Modal from "../components/Modal.vue";
|
|
import Input from "../components/Input.vue";
|
|
|
|
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-[1fr_auto]">
|
|
<div>
|
|
<h1 class="inline">
|
|
{{ accounts.CurrentAccount?.Name }}
|
|
</h1>
|
|
<EditAccount />
|
|
</div>
|
|
|
|
<div class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm">
|
|
<span class="rounded-lg p-1 whitespace-nowrap flex-1">
|
|
Working:
|
|
<Currency :value="accounts.CurrentAccount?.WorkingBalance" />
|
|
</span>
|
|
|
|
<span class="rounded-lg p-1 whitespace-nowrap flex-1">
|
|
Cleared:
|
|
<Currency :value="accounts.CurrentAccount?.ClearedBalance" />
|
|
</span>
|
|
|
|
<span
|
|
class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
|
|
v-if="!transactions.Reconciling"
|
|
@click="transactions.Reconciling = true"
|
|
>
|
|
Reconciled:
|
|
<Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
|
|
</span>
|
|
|
|
<span v-if="transactions.Reconciling" class="contents">
|
|
<Button @click="submitReconcilation"
|
|
class="bg-blue-500 p-1 whitespace-nowrap flex-1">
|
|
My current balance is
|
|
<Currency :value="transactions.ReconcilingBalance" />
|
|
</Button>
|
|
|
|
<Button @click="createReconcilationTransaction"
|
|
class="bg-orange-500 p-1 whitespace-nowrap flex-1">
|
|
No, it's:
|
|
<Input
|
|
class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
|
|
type="number"
|
|
v-model="TargetReconcilingBalance"
|
|
/>
|
|
(Difference
|
|
<Currency
|
|
:value="transactions.ReconcilingBalance - TargetReconcilingBalance"
|
|
/>)
|
|
</Button>
|
|
<Button class="bg-red-500 p-1 flex-1" @click="cancelReconcilation">Cancel</Button>
|
|
</span>
|
|
</div>
|
|
</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>
|
|
<div class="md:hidden">
|
|
<Modal>
|
|
<template v-slot:placeholder>
|
|
<Button class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2">+</Button>
|
|
</template>
|
|
<TransactionInputRow
|
|
class="grid grid-cols-2"
|
|
:budgetid="budgetid"
|
|
:accountid="accountid"
|
|
/>
|
|
</Modal>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
.negative {
|
|
color: red;
|
|
}
|
|
</style> |