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

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

@ -38,44 +38,50 @@ function createReconcilationTransaction() {
</script>
<template>
<h1 class="inline">{{ accounts.CurrentAccount?.Name }}</h1>
<div class="grid grid-cols-2">
<h1 class="inline">
{{ accounts.CurrentAccount?.Name }}
<EditAccount />
<br />
</h1>
<span>
Current Balance:
<div class="text-right">
<span class="border-2 rounded-lg p-1">
Working:
<Currency :value="accounts.CurrentAccount?.WorkingBalance" />
</span>
<span>
Cleared Balance:
<span class="border-2 rounded-lg p-1 ml-2">
Cleared:
<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 />
<span
class="border-2 border-blue-500 rounded-lg bg-blue-500 ml-2 p-1"
v-if="!accounts.Reconciling"
@click="accounts.Reconciling = true"
>
Reconciled:
<Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
</span>
</div>
No, it's: <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
Difference: <Currency :value="accounts.ReconcilingBalance - TargetReconcilingBalance" />
<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>
<Button class="bg-red-500 mx-3" @click="cancelReconcilation">Cancel</Button>
</span>
</div>
<table>
<tr class="font-bold">
<td style="width: 90px;">Date</td>
@ -91,7 +97,8 @@ function createReconcilationTransaction() {
</tr>
<TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
<TransactionRow
v-for="(transaction, index) in accounts.TransactionsList" :key="transaction.ID"
v-for="(transaction, index) in accounts.TransactionsList"
:key="transaction.ID"
:transaction="transaction"
:index="index"
/>