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

Make UI work for problematic and filtered transactions

Browse Source
This commit is contained in:
Jan Bader 2022-04-24 20:12:41 +00:00 committed by Gitea
parent a7e1826f52
commit 77c1a6dd18
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,21 +40,30 @@ const filters = ref({
});
watch(() => filters.value.AccountID + filters.value.PayeeID + filters.value.CategoryID, function() {
if(!hasFilters.value)
return;
transactions.GetFilteredTransactions(filters.value.AccountID, filters.value.CategoryID, filters.value.PayeeID);
})
const hasFilters = computed(() => filters.value.AccountID != null || filters.value.PayeeID != null || filters.value.CategoryID);
const transactionsList = computed(() => {
if (hasFilters.value){
return transactions.FilteredTransactionsList;
}
return transactions.ProblematicTransactionsList;
})
</script>
<template>
<div class="grid grid-cols-[1fr_auto]">
<div>
<h1 class="inline">
Problematic Transactions
{{ hasFilters ? "Filtered" : "Problematic" }} Transactions
</h1>
</div>
</div>
<div>
<h1>Filters</h1>
Account:
<Autocomplete v-model:text="filters.Account" v-model:id="filters.AccountID" model="accounts" class="inline-block" /><br>
Payee:
@ -73,7 +82,7 @@ watch(() => filters.value.AccountID + filters.value.PayeeID + filters.value.Cate
<td class="text-right">Amount</td>
</tr>
<TransactionRow
v-for="(transaction, index) in transactions.FilteredTransactionsList"
v-for="(transaction, index) in transactionsList"
:key="transaction.ID"
:with-account="true"
:transactionid="transaction.ID"

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

@ -86,8 +86,9 @@ export const useTransactionsStore = defineStore("budget/transactions", {
const budgetStore = useBudgetsStore();
const result = await GET("/budget/" + budgetStore.CurrentBudgetID + "/problematic-transactions");
const response = await result.json();
this.AddTransactions(response.Transactions);
this.ProblematicTransactions = [...response.Transactions.map((x : Transaction) => x.ID)];
const transactions = response.Transactions ?? [];
this.AddTransactions(transactions);
this.ProblematicTransactions = [...transactions?.map((x : Transaction) => x.ID)];
},
async GetFilteredTransactions(accountID : string | null, categoryID : string | null, payeeID : string | null) {
const budgetStore = useBudgetsStore();
@ -98,8 +99,9 @@ export const useTransactionsStore = defineStore("budget/transactions", {
});
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)];
const transactions = response.Transactions ?? [];
this.AddTransactions(transactions);
this.FilteredTransactions = [...transactions.map((x : Transaction) => x.ID)];
},
async SubmitReconcilation(reconciliationTransactionAmount: number) {
const accountsStore = useAccountStore();