162 lines
4.1 KiB
Vue
162 lines
4.1 KiB
Vue
<template>
|
|
<UDashboardNavbar title="Bankbuchungen">
|
|
|
|
</UDashboardNavbar>
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<USelectMenu
|
|
:options="dataStore.bankAccounts"
|
|
v-model="filterAccount"
|
|
option-attribute="iban"
|
|
multiple
|
|
by="id"
|
|
>
|
|
<template #label>
|
|
Konto
|
|
</template>
|
|
</USelectMenu>
|
|
</template>
|
|
<template #right>
|
|
<USelectMenu
|
|
v-model="selectedColumns"
|
|
icon="i-heroicons-adjustments-horizontal-solid"
|
|
:options="templateColumns"
|
|
multiple
|
|
class="hidden lg:block"
|
|
by="key"
|
|
>
|
|
<template #label>
|
|
Spalten
|
|
</template>
|
|
</USelectMenu>
|
|
</template>
|
|
</UDashboardToolbar>
|
|
<UTable
|
|
:rows="filteredRows"
|
|
:columns="columns"
|
|
class="w-full"
|
|
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
|
@select="(i) => {selectedStatement = i; showStatementModal = true}"
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
|
|
>
|
|
<template #account-data="{row}">
|
|
{{row.account ? (dataStore.getBankAccountById(row.account).name ? dataStore.getBankAccountById(row.account).name :dataStore.getBankAccountById(row.account).iban) : ""}}
|
|
</template>
|
|
<template #valueDate-data="{row}">
|
|
{{dayjs(row.valueDate).format("DD.MM.YY")}}
|
|
</template>
|
|
<template #amount-data="{row}">
|
|
<span
|
|
v-if="row.amount >= 0"
|
|
class="text-primary-500"
|
|
>{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
|
|
<span
|
|
v-else-if="row.amount < 0"
|
|
class="text-rose-500"
|
|
>{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
|
|
</template>
|
|
<template #partner-data="{row}">
|
|
<span
|
|
v-if="row.amount < 0"
|
|
>
|
|
{{row.credName}}
|
|
</span>
|
|
<span
|
|
v-else-if="row.amount > 0"
|
|
>
|
|
{{row.debName}}
|
|
</span>
|
|
</template>
|
|
</UTable>
|
|
|
|
<USlideover
|
|
v-model="showStatementModal"
|
|
>
|
|
<UCard class="h-full">
|
|
<template #header>
|
|
<span v-if="selectedStatement.amount > 0">
|
|
{{selectedStatement.debName}}
|
|
</span>
|
|
<span v-else-if="selectedStatement.amount < 0">
|
|
{{selectedStatement.credName}}
|
|
</span>
|
|
</template>
|
|
|
|
<div class="truncate">
|
|
<p>Betrag: {{String(selectedStatement.amount.toFixed(2)).replace(".",",")}} €</p>
|
|
<p>Buchungsdatum: {{dayjs(selectedStatement.date).format("DD.MM.YYYY")}}</p>
|
|
<p>Werstellungsdatum: {{dayjs(selectedStatement.valueDate).format("DD.MM.YYYY")}}</p>
|
|
<p>Partner: {{selectedStatement.amount > 0 ? selectedStatement.debName : selectedStatement.credName}}</p>
|
|
<p>Partner IBAN: {{selectedStatement.amount > 0 ? selectedStatement.debIban : selectedStatement.credIban}}</p>
|
|
<p>Konto: {{selectedStatement.account}}</p>
|
|
<p class="text-wrap">Beschreibung: <br>{{selectedStatement.text}}</p>
|
|
</div>
|
|
|
|
<UFormGroup>
|
|
<USelectMenu
|
|
:options="dataStore.createddocuments"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
|
|
|
|
</UCard>
|
|
|
|
</USlideover>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import dayjs from "dayjs";
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
const dataStore = useDataStore()
|
|
const router = useRouter()
|
|
|
|
const selectedStatement = ref(null)
|
|
const showStatementModal = ref(false)
|
|
|
|
const templateColumns = [
|
|
{
|
|
key: "account",
|
|
label: "Konto",
|
|
sortable: true
|
|
},{
|
|
key: "valueDate",
|
|
label: "Valuta",
|
|
sortable: true
|
|
},
|
|
{
|
|
key: "amount",
|
|
label: "Betrag",
|
|
sortable: true
|
|
},
|
|
{
|
|
key: "partner",
|
|
label: "Name",
|
|
sortable: true
|
|
},
|
|
{
|
|
key: "text",
|
|
label: "Beschreibung",
|
|
sortable: true
|
|
}
|
|
]
|
|
const selectedColumns = ref(templateColumns)
|
|
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
|
|
|
|
|
const searchString = ref('')
|
|
const filterAccount = ref(dataStore.bankAccounts || [])
|
|
|
|
const filteredRows = computed(() => {
|
|
return useSearch(searchString.value, dataStore.bankStatements.filter(i => filterAccount.value.find(x => x.id === i.account)))
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |