70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, ref, onMounted } 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";
|
|
|
|
defineProps<{
|
|
budgetid: string
|
|
}>()
|
|
|
|
const modalInputRow = ref<typeof TransactionInputRow | null>(null);
|
|
|
|
function submitModal() {
|
|
modalInputRow.value!.Save();
|
|
}
|
|
|
|
const accounts = useAccountStore();
|
|
const transactions = useTransactionsStore();
|
|
|
|
onMounted(() => {
|
|
transactions.GetProblematicTransactions();
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-[1fr_auto]">
|
|
<div>
|
|
<h1 class="inline">
|
|
Problematic Transactions
|
|
</h1>
|
|
</div>
|
|
</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 transactions.ProblematicTransactionsList"
|
|
:key="transaction.ID"
|
|
:with-account="true"
|
|
:transactionid="transaction.ID"
|
|
:index="index"
|
|
/>
|
|
</table>
|
|
</template>
|
|
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
.negative {
|
|
color: red;
|
|
}
|
|
</style>
|