Implement filtering on frontend

web/src/pages/AllAccounts.vue

@@ -38,17 +38,33 @@ const filters = ref({
   PayeeID: null,
   Category: null,
   CategoryID: null,
-  FromDate: null,
+  FromDate: new Date(1900, 0, 2, 0, 0, 0),
-  ToDate: null,
+  ToDate: new Date(2999,11,32,0,0,0),
 });
 
-watch(() => filters.value.AccountID + filters.value.PayeeID + filters.value.CategoryID, function() {
+watch(() => filters.value.AccountID 
+  + filters.value.PayeeID 
+  + filters.value.CategoryID
+  + filters.value.FromDate?.toISOString()
+  + filters.value.ToDate?.toISOString(), function() {
+            console.log(filters.value.FromDate)
   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,
+    filters.value.FromDate?.toISOString(),
+    filters.value.ToDate?.toISOString(),
+    );
 })
 
-const hasFilters = computed(() => filters.value.AccountID != null || filters.value.PayeeID != null || filters.value.CategoryID);
+const hasFilters = computed(() => 
+  filters.value.AccountID != null 
+  || filters.value.PayeeID != null 
+  || filters.value.CategoryID != null
+  || (filters.value.FromDate != null && filters.value.FromDate.getYear() > 1900)
+  || (filters.value.ToDate != null && filters.value.ToDate.getYear() < 2999))
 const transactionsList = computed(() => {
   if (hasFilters.value){
     return transactions.FilteredTransactionsList;

web/src/stores/transactions.ts

@@ -90,12 +90,14 @@ export const useTransactionsStore = defineStore("budget/transactions", {
             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, fromDate : string, toDate : string) {
             const budgetStore = useBudgetsStore();
             const payload = JSON.stringify({
               category_id: categoryID,
               payee_id: payeeID,
               account_id: accountID,
+              from_date: fromDate,
+              to_date: toDate,
             });
             const result = await POST("/budget/" + budgetStore.CurrentBudgetID + "/filtered-transactions", payload);
             const response = await result.json();