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