138 lines
2.9 KiB
Vue
138 lines
2.9 KiB
Vue
<script setup>
|
|
import * as dayJS from "dayjs";
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
const dataStore = useDataStore()
|
|
const route = useRoute()
|
|
const supabase = useSupabaseClient()
|
|
|
|
|
|
const searchString = ref("")
|
|
const showAssigned = ref(false)
|
|
const selectedAccount = ref(0)
|
|
|
|
const filteredRows = computed(() => {
|
|
let statements = dataStore.bankStatements
|
|
|
|
if(!showAssigned.value) {
|
|
statements = statements.filter(statement => !statement.customerInvoice || !statement.vendorInvoice)
|
|
}
|
|
|
|
if(selectedAccount.value !== 0) {
|
|
statements = statements.filter(statement => statement.account === selectedAccount.value)
|
|
}
|
|
|
|
if(searchString.value.length > 0) {
|
|
statements = statements.filter(item => {
|
|
return Object.values(item).some((value) => {
|
|
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
|
})
|
|
})
|
|
}
|
|
|
|
return statements
|
|
})
|
|
|
|
|
|
|
|
const showStatementSlideover = ref(false)
|
|
const selectedStatement = ref({})
|
|
|
|
const selectStatement = (statement) => {
|
|
selectedStatement.value = statement
|
|
showStatementSlideover.value = true
|
|
}
|
|
|
|
const statementColumns = [
|
|
{
|
|
key:"amount",
|
|
label: "Betrag"
|
|
},
|
|
{
|
|
key:"date",
|
|
label: "Datum",
|
|
sortable: true
|
|
},
|
|
{
|
|
key: "credName",
|
|
label: "Empfänger"
|
|
},
|
|
{
|
|
key: "debName",
|
|
label: "Sender"
|
|
},
|
|
{
|
|
key: "text",
|
|
label: "Verwendungszweck"
|
|
},
|
|
]
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<USlideover
|
|
v-model="showStatementSlideover"
|
|
>
|
|
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
|
|
|
|
|
|
|
|
|
<DevOnly>
|
|
{{selectedStatement}}
|
|
</DevOnly>
|
|
</UCard>
|
|
|
|
</USlideover>
|
|
|
|
<InputGroup :gap="2">
|
|
<UInput
|
|
v-model="searchString"
|
|
placeholder="Suche..."
|
|
/>
|
|
<USelectMenu
|
|
:options="dataStore.bankAccounts.filter(account => account.used)"
|
|
v-model="selectedAccount"
|
|
option-attribute="iban"
|
|
value-attribute="id"
|
|
>
|
|
<template #label>
|
|
{{dataStore.bankAccounts.find(account => account.id === selectedAccount) ? dataStore.bankAccounts.find(account => account.id === selectedAccount).iban : "Kontoauswählen"}}
|
|
</template>
|
|
</USelectMenu>
|
|
<UCheckbox
|
|
v-model="showAssigned"
|
|
label="Zugeordnete Anzeigen"
|
|
/>
|
|
</InputGroup>
|
|
|
|
<UTable
|
|
:rows="filteredRows"
|
|
:columns="statementColumns"
|
|
@select="selectStatement"
|
|
>
|
|
<template #amount-data="{row}">
|
|
<span
|
|
v-if="row.amount >= 0"
|
|
class="text-primary-500"
|
|
>
|
|
{{row.amount.toFixed(2) + " €"}}
|
|
</span>
|
|
<span
|
|
v-if="row.amount < 0"
|
|
class="text-rose-600"
|
|
>
|
|
{{row.amount.toFixed(2) + " €"}}
|
|
</span>
|
|
</template>
|
|
<template #date-data="{row}">
|
|
{{dayJS(row.date).format("DD.MM.YY")}}
|
|
</template>
|
|
</UTable>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |