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() { 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); 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> </script>
<template> <template>
<div class="grid grid-cols-[1fr_auto]"> <div class="grid grid-cols-[1fr_auto]">
<div> <div>
<h1 class="inline"> <h1 class="inline">
Problematic Transactions {{ hasFilters ? "Filtered" : "Problematic" }} Transactions
</h1> </h1>
</div> </div>
</div> </div>
<div> <div>
<h1>Filters</h1>
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:
@ -73,7 +82,7 @@ watch(() => filters.value.AccountID + filters.value.PayeeID + filters.value.Cate
<td class="text-right">Amount</td> <td class="text-right">Amount</td>
</tr> </tr>
<TransactionRow <TransactionRow
v-for="(transaction, index) in transactions.FilteredTransactionsList" v-for="(transaction, index) in transactionsList"
:key="transaction.ID" :key="transaction.ID"
:with-account="true" :with-account="true"
:transactionid="transaction.ID" :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 budgetStore = useBudgetsStore();
const result = await GET("/budget/" + budgetStore.CurrentBudgetID + "/problematic-transactions"); const result = await GET("/budget/" + budgetStore.CurrentBudgetID + "/problematic-transactions");
const response = await result.json(); const response = await result.json();
this.AddTransactions(response.Transactions); const transactions = response.Transactions ?? [];
this.ProblematicTransactions = [...response.Transactions.map((x : Transaction) => x.ID)]; this.AddTransactions(transactions);
this.ProblematicTransactions = [...transactions?.map((x : Transaction) => x.ID)];
}, },
async GetFilteredTransactions(accountID : string | null, categoryID : string | null, payeeID : string | null) { async GetFilteredTransactions(accountID : string | null, categoryID : string | null, payeeID : string | null) {
const budgetStore = useBudgetsStore(); const budgetStore = useBudgetsStore();
@ -98,8 +99,9 @@ export const useTransactionsStore = defineStore("budget/transactions", {
}); });
const result = await POST("/budget/" + budgetStore.CurrentBudgetID + "/filtered-transactions", payload); const result = await POST("/budget/" + budgetStore.CurrentBudgetID + "/filtered-transactions", payload);
const response = await result.json(); const response = await result.json();
this.AddTransactions(response.Transactions); const transactions = response.Transactions ?? [];
this.FilteredTransactions = [...response.Transactions.map((x : Transaction) => x.ID)]; this.AddTransactions(transactions);
this.FilteredTransactions = [...transactions.map((x : Transaction) => x.ID)];
}, },
async SubmitReconcilation(reconciliationTransactionAmount: number) { async SubmitReconcilation(reconciliationTransactionAmount: number) {
const accountsStore = useAccountStore(); const accountsStore = useAccountStore();