From a031dd5bb15fcb7f51ac65bd953b58516b027fce Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Sun, 24 Apr 2022 20:21:32 +0000
Subject: [PATCH] Add date filters to UI

---
 web/src/pages/AllAccounts.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/AllAccounts.vue b/web/src/pages/AllAccounts.vue
index 428a288..9115e18 100644
--- a/web/src/pages/AllAccounts.vue
+++ b/web/src/pages/AllAccounts.vue
@@ -11,6 +11,7 @@ import Modal from "../components/Modal.vue";
 import Input from "../components/Input.vue";
 import Checkbox from "../components/Checkbox.vue";
 import { formatDate } from "../date";
+import DateInput from "../components/DateInput.vue";
 import Autocomplete from '../components/Autocomplete.vue'
 
 defineProps<{
@@ -37,6 +38,8 @@ const filters = ref({
   PayeeID: null,
   Category: null,
   CategoryID: null,
+  FromDate: null,
+  ToDate: null,
 });
 
 watch(() => filters.value.AccountID + filters.value.PayeeID + filters.value.CategoryID, function() {
@@ -63,13 +66,17 @@ const transactionsList = computed(() => {
     </div>
   </div>
 
-  <div>
+  <div class="grid grid-cols-2 w-96">
     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" model="payees" class="inline-block" /><br>
     Category:
     <Autocomplete v-model:text="filters.Category" v-model:id="filters.CategoryID" model="categories" class="inline-block" /><br>
+    From Date:
+    <DateInput v-model="filters.FromDate" class="inline-block" /><br>
+    To Date:
+    <DateInput v-model="filters.ToDate" class="inline-block" />
   </div>
 
   <table>