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

Implement UI

Browse Source
This commit is contained in:
Jan Bader 2022-04-24 20:12:23 +00:00 committed by Gitea
parent 94b5c4bbd3
commit a7e1826f52
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/pages/AllAccounts.vue
View File

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, onMounted } from "vue" import { computed, ref, onMounted, watch } from "vue"
import Currency from "../components/Currency.vue"; import Currency from "../components/Currency.vue";
import TransactionRow from "../components/TransactionRow.vue"; import TransactionRow from "../components/TransactionRow.vue";
import TransactionInputRow from "../components/TransactionInputRow.vue"; import TransactionInputRow from "../components/TransactionInputRow.vue";
@ -38,6 +38,10 @@ const filters = ref({
Category: null, Category: null,
CategoryID: null, CategoryID: null,
}); });
watch(() => filters.value.AccountID + filters.value.PayeeID + filters.value.CategoryID, function() {
transactions.GetFilteredTransactions(filters.value.AccountID, filters.value.CategoryID, filters.value.PayeeID);
})
</script> </script>
<template> <template>
@ -54,7 +58,7 @@ const filters = ref({
Account: Account:
<Autocomplete v-model:text="filters.Account" v-model:id="filters.AccountID" model="accounts" class="inline-block" /><br> <Autocomplete v-model:text="filters.Account" v-model:id="filters.AccountID" model="accounts" class="inline-block" /><br>
Payee: Payee:
<Autocomplete v-model:text="filters.Payee" v-model:id="filters.PayeeID" v-model:type="payeeType" model="payees" class="inline-block" /><br> <Autocomplete v-model:text="filters.Payee" v-model:id="filters.PayeeID" model="payees" class="inline-block" /><br>
Category: Category:
<Autocomplete v-model:text="filters.Category" v-model:id="filters.CategoryID" model="categories" class="inline-block" /><br> <Autocomplete v-model:text="filters.Category" v-model:id="filters.CategoryID" model="categories" class="inline-block" /><br>
</div> </div>
@ -69,7 +73,7 @@ const filters = ref({
<td class="text-right">Amount</td> <td class="text-right">Amount</td>
</tr> </tr>
<TransactionRow <TransactionRow
v-for="(transaction, index) in transactions.ProblematicTransactionsList" v-for="(transaction, index) in transactions.FilteredTransactionsList"
:key="transaction.ID" :key="transaction.ID"
:with-account="true" :with-account="true"
:transactionid="transaction.ID" :transactionid="transaction.ID"

20
web/src/stores/transactions.ts
View File

@ -8,6 +8,7 @@ interface State {
Transactions: Map<string, Transaction>; Transactions: Map<string, Transaction>;
Reconciling: boolean; Reconciling: boolean;
ProblematicTransactions: Array<string>; ProblematicTransactions: Array<string>;
FilteredTransactions: Array<string>;
} }
export interface Transaction { export interface Transaction {
@ -33,6 +34,7 @@ export const useTransactionsStore = defineStore("budget/transactions", {
Transactions: new Map<string, Transaction>(), Transactions: new Map<string, Transaction>(),
Reconciling: false, Reconciling: false,
ProblematicTransactions: new Array<string>(), ProblematicTransactions: new Array<string>(),
FilteredTransactions: new Array<string>(),
}), }),
getters: { getters: {
ReconcilingBalance(state): number { ReconcilingBalance(state): number {
@ -47,7 +49,8 @@ export const useTransactionsStore = defineStore("budget/transactions", {
}, },
TransactionsByDate(state) : Record<string, Transaction[]> { TransactionsByDate(state) : Record<string, Transaction[]> {
const accountsStore = useAccountStore(); const accountsStore = useAccountStore();
const allTransactions = [...this.Transactions.values()]; const accountID = accountsStore.CurrentAccountID;
const allTransactions = [...this.Transactions.values()].filter(x => x.AccountID == accountID);
return groupBy(allTransactions, x => formatDate(x.Date)); return groupBy(allTransactions, x => formatDate(x.Date));
}, },
TransactionsList(state) : Transaction[] { TransactionsList(state) : Transaction[] {
@ -58,6 +61,9 @@ export const useTransactionsStore = defineStore("budget/transactions", {
}, },
ProblematicTransactionsList(state) : Transaction[] { ProblematicTransactionsList(state) : Transaction[] {
return [...state.ProblematicTransactions.map(x => state.Transactions!.get(x)!)]; return [...state.ProblematicTransactions.map(x => state.Transactions!.get(x)!)];
},
FilteredTransactionsList(state) : Transaction[] {
return [...state.FilteredTransactions.map(x => state.Transactions!.get(x)!)];
} }
}, },
actions: { actions: {
@ -83,6 +89,18 @@ export const useTransactionsStore = defineStore("budget/transactions", {
this.AddTransactions(response.Transactions); this.AddTransactions(response.Transactions);
this.ProblematicTransactions = [...response.Transactions.map((x : Transaction) => x.ID)]; this.ProblematicTransactions = [...response.Transactions.map((x : Transaction) => x.ID)];
}, },
async GetFilteredTransactions(accountID : string | null, categoryID : string | null, payeeID : string | null) {
const budgetStore = useBudgetsStore();
const payload = JSON.stringify({
category_id: categoryID,
payee_id: payeeID,
account_id: accountID,
});
const result = await POST("/budget/" + budgetStore.CurrentBudgetID + "/filtered-transactions", payload);
const response = await result.json();
this.AddTransactions(response.Transactions);
this.FilteredTransactions = [...response.Transactions.map((x : Transaction) => x.ID)];
},
async SubmitReconcilation(reconciliationTransactionAmount: number) { async SubmitReconcilation(reconciliationTransactionAmount: number) {
const accountsStore = useAccountStore(); const accountsStore = useAccountStore();
const account = accountsStore.CurrentAccount!; const account = accountsStore.CurrentAccount!;