jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Improve layout of Account header

Browse Source
This commit is contained in:
Jan Bader 2022-02-28 07:56:46 +00:00
parent 7dfbef60a4
commit bbb12a788d
1 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
web/src/pages/Account.vue
View File

@ -31,51 +31,57 @@ function submitReconcilation() {
} }
function createReconcilationTransaction() { function createReconcilationTransaction() {
const diff = TargetReconcilingBalance.value - accounts.ReconcilingBalance ; const diff = TargetReconcilingBalance.value - accounts.ReconcilingBalance;
accounts.SubmitReconcilation(diff); accounts.SubmitReconcilation(diff);
accounts.Reconciling = false; accounts.Reconciling = false;
} }
</script> </script>
<template> <template>
<h1 class="inline">{{ accounts.CurrentAccount?.Name }}</h1> <div class="grid grid-cols-2">
<EditAccount /> <h1 class="inline">
<br /> {{ accounts.CurrentAccount?.Name }}
<EditAccount />
</h1>
<span> <div class="text-right">
Current Balance: <span class="border-2 rounded-lg p-1">
<Currency :value="accounts.CurrentAccount?.WorkingBalance" /> Working:
</span> <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
</span>
<span> <span class="border-2 rounded-lg p-1 ml-2">
Cleared Balance: Cleared:
<Currency :value="accounts.CurrentAccount?.ClearedBalance" /> <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
</span> </span>
<span v-if="accounts.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2"> <span
Is <Currency :value="accounts.ReconcilingBalance" /> your current balance? class="border-2 border-blue-500 rounded-lg bg-blue-500 ml-2 p-1"
<Button v-if="!accounts.Reconciling"
class="bg-blue-500 mx-3" @click="accounts.Reconciling = true"
@click="submitReconcilation">Yes!</Button> >
<br /> Reconciled:
<Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
</span>
</div>
<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>
</div>
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> <table>
<tr class="font-bold"> <tr class="font-bold">
<td style="width: 90px;">Date</td> <td style="width: 90px;">Date</td>
@ -91,7 +97,8 @@ function createReconcilationTransaction() {
</tr> </tr>
<TransactionInputRow :budgetid="budgetid" :accountid="accountid" /> <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
<TransactionRow <TransactionRow
v-for="(transaction, index) in accounts.TransactionsList" :key="transaction.ID" v-for="(transaction, index) in accounts.TransactionsList"
:key="transaction.ID"
:transaction="transaction" :transaction="transaction"
:index="index" :index="index"
/> />