126 lines
3.6 KiB
Vue
126 lines
3.6 KiB
Vue
<script lang="ts" setup>
|
|
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";
|
|
import { useAccountStore } from "../stores/budget-account";
|
|
import EditAccount from "../dialogs/EditAccount.vue";
|
|
import Button from "../components/SimpleButton.vue";
|
|
import { useTransactionsStore } from "../stores/transactions";
|
|
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<{
|
|
budgetid: string
|
|
}>()
|
|
|
|
const modalInputRow = ref<typeof TransactionInputRow | null>(null);
|
|
|
|
function submitModal() {
|
|
modalInputRow.value!.Save();
|
|
}
|
|
|
|
const accounts = useAccountStore();
|
|
const transactions = useTransactionsStore();
|
|
|
|
onMounted(() => {
|
|
transactions.GetProblematicTransactions();
|
|
})
|
|
|
|
const filters = ref({
|
|
Account: null,
|
|
AccountID: null,
|
|
Payee: null,
|
|
PayeeID: null,
|
|
Category: null,
|
|
CategoryID: null,
|
|
FromDate: new Date(1900, 0, 2),
|
|
ToDate: new Date(2999,11,32),
|
|
});
|
|
|
|
watch(() => filters.value.AccountID
|
|
+ filters.value.PayeeID
|
|
+ filters.value.CategoryID
|
|
+ filters.value.FromDate?.toISOString()
|
|
+ filters.value.ToDate?.toISOString(), function() {
|
|
if(!hasFilters.value)
|
|
return;
|
|
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 != null
|
|
|| (filters.value.FromDate != null && filters.value.FromDate.getFullYear() > 1901)
|
|
|| (filters.value.ToDate != null && filters.value.ToDate.getFullYear() < 2998))
|
|
|
|
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">
|
|
{{ hasFilters ? "Filtered" : "Problematic" }} Transactions
|
|
</h1>
|
|
</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>
|
|
<tr class="font-bold">
|
|
<td class="hidden md:block" style="width: 90px;">Date</td>
|
|
<td style="max-width: 200px;">Account</td>
|
|
<td style="max-width: 150px;">Payee</td>
|
|
<td style="max-width: 200px;">Category</td>
|
|
<td>Memo</td>
|
|
<td class="text-right">Amount</td>
|
|
</tr>
|
|
<TransactionRow
|
|
v-for="(transaction, index) in transactionsList"
|
|
:key="transaction.ID"
|
|
:with-account="true"
|
|
:transactionid="transaction.ID"
|
|
:index="index"
|
|
/>
|
|
</table>
|
|
</template>
|
|
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
.negative {
|
|
color: red;
|
|
}
|
|
</style>
|