From a7e1826f52e1032b09bedb0e63b3483b0d46d6fa Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Sun, 24 Apr 2022 20:12:23 +0000
Subject: [PATCH] Implement UI

---
 web/src/pages/AllAccounts.vue  | 10 +++++++---
 web/src/stores/transactions.ts | 20 +++++++++++++++++++-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/AllAccounts.vue b/web/src/pages/AllAccounts.vue
index 7ced986..f7a2c74 100644
--- a/web/src/pages/AllAccounts.vue
+++ b/web/src/pages/AllAccounts.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref, onMounted } from "vue"
+import { computed, ref, onMounted, watch } from "vue"
 import Currency from "../components/Currency.vue";
 import TransactionRow from "../components/TransactionRow.vue";
 import TransactionInputRow from "../components/TransactionInputRow.vue";
@@ -38,6 +38,10 @@ const filters = ref({
   Category: 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>
 
 <template>
@@ -54,7 +58,7 @@ const filters = ref({
     Account: 
     <Autocomplete v-model:text="filters.Account" v-model:id="filters.AccountID" model="accounts" class="inline-block" /><br>
     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:
     <Autocomplete v-model:text="filters.Category" v-model:id="filters.CategoryID" model="categories" class="inline-block" /><br>
   </div>
@@ -69,7 +73,7 @@ const filters = ref({
       <td class="text-right">Amount</td>
     </tr>
     <TransactionRow
-      v-for="(transaction, index) in transactions.ProblematicTransactionsList"
+      v-for="(transaction, index) in transactions.FilteredTransactionsList"
       :key="transaction.ID"
       :with-account="true"
       :transactionid="transaction.ID"
diff --git a/web/src/stores/transactions.ts b/web/src/stores/transactions.ts
index 26373e6..c3d0eb6 100644
--- a/web/src/stores/transactions.ts
+++ b/web/src/stores/transactions.ts
@@ -8,6 +8,7 @@ interface State {
     Transactions: Map<string, Transaction>;
     Reconciling: boolean;
     ProblematicTransactions: Array<string>;
+    FilteredTransactions: Array<string>;
 }
 
 export interface Transaction {
@@ -33,6 +34,7 @@ export const useTransactionsStore = defineStore("budget/transactions", {
         Transactions: new Map<string, Transaction>(),
         Reconciling: false,
         ProblematicTransactions: new Array<string>(),
+        FilteredTransactions: new Array<string>(),
     }),
     getters: {
         ReconcilingBalance(state): number {
@@ -47,7 +49,8 @@ export const useTransactionsStore = defineStore("budget/transactions", {
         },
         TransactionsByDate(state) : Record<string, Transaction[]> {
             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));
         },
         TransactionsList(state) : Transaction[] {
@@ -58,6 +61,9 @@ export const useTransactionsStore = defineStore("budget/transactions", {
         },
         ProblematicTransactionsList(state) : Transaction[] {
             return [...state.ProblematicTransactions.map(x => state.Transactions!.get(x)!)];
+        },
+        FilteredTransactionsList(state) : Transaction[] {
+            return [...state.FilteredTransactions.map(x => state.Transactions!.get(x)!)];
         }
     },
     actions: {
@@ -83,6 +89,18 @@ export const useTransactionsStore = defineStore("budget/transactions", {
             this.AddTransactions(response.Transactions);
             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) {
             const accountsStore = useAccountStore();
             const account = accountsStore.CurrentAccount!;