flfeders
9e092823e4
Added Bankimport, BankAccounts, BankStatements Some Visual Changes Added Contacts Changes in VendorInvoices Added layouts with default an one for Login PAge Added Input Group Component
142 lines
2.9 KiB
Vue
142 lines
2.9 KiB
Vue
<script setup>
|
|
import * as dayjs from "dayjs";
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
const route = useRoute()
|
|
const supabase = useSupabaseClient()
|
|
|
|
const {bankStatements,bankAccounts} = storeToRefs(useDataStore())
|
|
|
|
const searchString = ref("")
|
|
const showAssigned = ref(false)
|
|
const selectedAccount = ref(0)
|
|
|
|
const filteredRows = computed(() => {
|
|
let statements = bankStatements.value
|
|
|
|
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) {
|
|
return statements.value.filter(item => {
|
|
return Object.values(item).some((value) => {
|
|
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
|
})
|
|
})
|
|
} else {
|
|
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="bankAccounts.filter(account => account.used)"
|
|
v-model="selectedAccount"
|
|
option-attribute="iban"
|
|
value-attribute="id"
|
|
>
|
|
<template #label>
|
|
{{bankAccounts.find(account => account.id === selectedAccount) ? bankAccounts.find(account => account.id === selectedAccount).iban : "Kontoauswählen"}}
|
|
</template>
|
|
</USelectMenu>
|
|
<UCheckbox
|
|
v-model="showAssigned"
|
|
label="Zugeordnete Anzeigen"
|
|
/>
|
|
</InputGroup>
|
|
|
|
<UTable
|
|
:rows="bankStatements"
|
|
: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> |