jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Add date filters to UI

Browse Source
This commit is contained in:
Jan Bader 2022-04-24 20:21:32 +00:00
parent f068dd5009
commit 92f56b1046
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/pages/AllAccounts.vue
View File

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