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

Improve frontend

Browse Source
This commit is contained in:
Jan Bader 2022-02-27 20:02:57 +00:00
parent b4321395d9
commit 52503a4c92
2 changed files with 62 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,11 +13,31 @@ defineProps<{
}>()
const accounts = useAccountStore();
const TargetReconcilingBalance = ref(0);
function setReconciled(event: Event) {
const target = event.target as HTMLInputElement;
accounts.SetReconciledForAllTransactions(target.checked);
}
function cancelReconcilation() {
accounts.SetReconciledForAllTransactions(false);
accounts.Reconciling = false;
}
function submitReconcilation() {
}
function createReconcilationTransaction() {
}
</script>
<template>
<h1 class="inline">{{ accounts.CurrentAccount?.Name }}</h1>
<EditAccount /> <br />
<EditAccount />
<br />
<span>
Current Balance:
@ -29,15 +49,29 @@ const accounts = useAccountStore();
<Currency :value="accounts.CurrentAccount?.ClearedBalance" />
</span>
<span v-if="accounts.Reconciling">
<br />
Reconciling
<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" />
<Currency :value="accounts.ReconcilingBalance" />
<Button @click="accounts.Reconciling = true" v-if="!accounts.Reconciling">Reconcile</Button>
<Button class="bg-blue-500" @click="accounts.Reconciling = true" v-if="!accounts.Reconciling">Reconcile</Button>
</span>
<table>
<tr class="font-bold">
@ -48,7 +82,9 @@ const accounts = useAccountStore();
<td class="text-right">Amount</td>
<td style="width: 20px;"></td>
<td style="width: 40px;"></td>
<td style="width: 20px;" v-if="accounts.Reconciling">R</td>
<td style="width: 20px;" v-if="accounts.Reconciling">
<input type="checkbox" @input="setReconciled" />
</td>
</tr>
<TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
<TransactionRow

27
web/src/stores/budget-account.ts
View File

@ -74,7 +74,7 @@ export const useAccountStore = defineStore("budget/account", {
const categoryGroups = [];
let prev = undefined;
for (const category of categories) {
if(category.Group != prev)
if (category.Group != prev)
categoryGroups.push({
Name: category.Group,
Expand: category.Group != "Hidden Categories",
@ -85,7 +85,7 @@ export const useAccountStore = defineStore("budget/account", {
}
},
CategoriesForMonthAndGroup(state) {
return (year: number, month: number, group : string) => {
return (year: number, month: number, group: string) => {
const categories = this.AllCategoriesForMonth(year, month);
return categories.filter(x => x.Group == group);
}
@ -99,7 +99,7 @@ export const useAccountStore = defineStore("budget/account", {
ReconcilingBalance(state): number {
let reconciledBalance = this.CurrentAccount!.ReconciledBalance;
for (const transaction of this.TransactionsList) {
if(transaction.Reconciled)
if (transaction.Reconciled)
reconciledBalance += transaction.Amount;
}
return reconciledBalance;
@ -116,11 +116,11 @@ export const useAccountStore = defineStore("budget/account", {
OffBudgetAccountsBalance(state): number {
return this.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.ClearedBalance), 0);
},
TransactionsList(state) : Transaction[] {
TransactionsList(state): Transaction[] {
return this.CurrentAccount!.Transactions.map(x => {
return this.Transactions.get(x)!
});
}
},
},
actions: {
async SetCurrentAccount(budgetid: string, accountid: string) {
@ -148,12 +148,12 @@ export const useAccountStore = defineStore("budget/account", {
async FetchMonthBudget(budgetid: string, year: number, month: number) {
const result = await GET("/budget/" + budgetid + "/" + year + "/" + month);
const response = await result.json();
if(response.Categories == undefined || response.Categories.length <= 0)
if (response.Categories == undefined || response.Categories.length <= 0)
return;
this.addCategoriesForMonth(year, month, response.Categories);
},
async EditAccount(accountid : string, name : string, onBudget : boolean) {
const result = await POST("/account/" + accountid, JSON.stringify({name: name, onBudget: onBudget}));
async EditAccount(accountid: string, name: string, onBudget: boolean) {
const result = await POST("/account/" + accountid, JSON.stringify({ name: name, onBudget: onBudget }));
const response = await result.json();
useBudgetsStore().MergeBudgetingData(response);
},
@ -169,6 +169,15 @@ export const useAccountStore = defineStore("budget/account", {
state.Months.set(year, yearMap);
});
},
SetReconciledForAllTransactions(value: boolean) {
for (const transaction of this.TransactionsList) {
if (transaction.Status == "Reconciled")
continue;
transaction.Reconciled = value;
}
},
logout() {
this.$reset()
},
@ -177,7 +186,7 @@ export const useAccountStore = defineStore("budget/account", {
const response = await result.json();
this.CurrentAccount?.Transactions.unshift(response);
},
async editTransaction(transactionid : string, payload: string) {
async editTransaction(transactionid: string, payload: string) {
const result = await POST("/transaction/" + transactionid, payload);
const response = await result.json();
this.CurrentAccount?.Transactions.unshift(response);