From ebc34d70314fc4924a4b482f6a5bb17d7c01ceba Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Sun, 24 Apr 2022 20:12:41 +0000
Subject: [PATCH] Make UI work for problematic and filtered transactions

---
 web/src/pages/AllAccounts.vue  | 15 ++++++++++++---
 web/src/stores/transactions.ts | 10 ++++++----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/web/src/pages/AllAccounts.vue b/web/src/pages/AllAccounts.vue
index f7a2c74..428a288 100644
--- a/web/src/pages/AllAccounts.vue
+++ b/web/src/pages/AllAccounts.vue
@@ -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"
diff --git a/web/src/stores/transactions.ts b/web/src/stores/transactions.ts
index c3d0eb6..eb776c5 100644
--- a/web/src/stores/transactions.ts
+++ b/web/src/stores/transactions.ts
@@ -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();