103 lines
2.9 KiB
Vue
103 lines
2.9 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 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,
|
|
});
|
|
|
|
watch(() => filters.value.AccountID + filters.value.PayeeID + filters.value.CategoryID, function() {
|
|
if(!hasFilters.value)
|
|
return;
|
|
transactions.GetFilteredTransactions(filters.value.AccountID, filters.value.CategoryID, filters.value.PayeeID);
|
|
})
|
|
|
|
const hasFilters = computed(() => filters.value.AccountID != null || filters.value.PayeeID != null || filters.value.CategoryID);
|
|
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>
|
|
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>
|
|
</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>
|