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

Implement custom checkbox #35

Merged
jacob1123 merged 4 commits from checkbox into master 2022-03-02 21:34:27 +01:00
Conversation 0 Commits 4 Files Changed 7 +36 -21
1 changed files with 36 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 42dc51fe9a - Show all commits

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

@ -49,42 +49,49 @@ function createReconcilationTransaction() {
</h1>
<div class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm">
<span class="border-2 rounded-lg p-1 whitespace-nowrap flex-1">
<span class="rounded-lg p-1 whitespace-nowrap flex-1">
Working:
<Currency :value="accounts.CurrentAccount?.WorkingBalance" />
</span>
<span class="border-2 rounded-lg p-1 whitespace-nowrap flex-1">
<span class="rounded-lg p-1 whitespace-nowrap flex-1">
Cleared:
<Currency :value="accounts.CurrentAccount?.ClearedBalance" />
</span>
<span
class="border-2 border-blue-500 rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
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>
</div>
<span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 dark:bg-gray-800 rounded-lg p-2">
Is
<Currency :value="transactions.ReconcilingBalance" />your current balance?
<Button class="bg-blue-500 mx-3 py-2" @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 py-2"
v-if="Math.abs(transactions.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
@click="createReconcilationTransaction"
>Create reconciling Transaction</Button>
<Button class="bg-red-500 mx-3 py-2" @click="cancelReconcilation">Cancel</Button>
<span v-if="transactions.Reconciling" class="contents">
<Button @click="submitReconcilation"
class="bg-blue-500 p-1 whitespace-nowrap flex-1">
My current balance is&nbsp;
<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">
@ -97,7 +104,11 @@ function createReconcilationTransaction() {
<Input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" />
</td>
</tr>
<TransactionInputRow class="hidden md:table-row" :budgetid="budgetid" :accountid="accountid" />
<TransactionInputRow
class="hidden md:table-row"
:budgetid="budgetid"
:accountid="accountid"
/>
<TransactionRow
v-for="(transaction, index) in transactions.TransactionsList"
:key="transaction.ID"
@ -110,7 +121,11 @@ function createReconcilationTransaction() {
<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" />
<TransactionInputRow
class="grid grid-cols-2"
:budgetid="budgetid"
:accountid="accountid"
/>
</Modal>
</div>
</template>