108 lines
3.1 KiB
Vue
108 lines
3.1 KiB
Vue
<script setup>
|
|
import dayjs from "dayjs";
|
|
const supabase = useSupabaseClient()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const profileStore = useProfileStore()
|
|
|
|
|
|
const props = defineProps({
|
|
queryStringData: {
|
|
type: String
|
|
},
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
topLevelType: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
platform: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const statementallocations = ref([])
|
|
const incominginvoices = ref([])
|
|
|
|
const setup = async () => {
|
|
//statementallocations.value = (await supabase.from("statementallocations").select("*, bs_id(*)").eq("account", route.params.id).eq("tenant",profileStore.currentTenant).order("created_at",{ascending: true})).data
|
|
//incominginvoices.value = (await useSupabaseSelect("incominginvoices", "*, vendor(*)")).filter(i => i.accounts.find(x => x.account == route.params.id))
|
|
}
|
|
|
|
setup()
|
|
|
|
const selectAllocation = (allocation) => {
|
|
if(allocation.type === "statementallocation") {
|
|
router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
|
|
} else if(allocation.type === "incominginvoice") {
|
|
router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
|
|
}
|
|
}
|
|
|
|
const renderedAllocations = computed(() => {
|
|
|
|
let tempstatementallocations = props.item.statementallocations.map(i => {
|
|
return {
|
|
...i,
|
|
type: "statementallocation",
|
|
date: i.bs_id.date,
|
|
partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
|
|
}
|
|
})
|
|
|
|
|
|
/*let incominginvoicesallocations = []
|
|
|
|
incominginvoices.value.forEach(i => {
|
|
|
|
incominginvoicesallocations.push(...i.accounts.filter(x => x.account == route.params.id).map(x => {
|
|
return {
|
|
...x,
|
|
incominginvoiceid: i.id,
|
|
type: "incominginvoice",
|
|
amount: x.amountGross ? x.amountGross : x.amountNet,
|
|
date: i.date,
|
|
partner: i.vendor.name,
|
|
description: i.description,
|
|
color: i.expense ? "red" : "green"
|
|
}
|
|
}))
|
|
})*/
|
|
|
|
return [...tempstatementallocations/*, ... incominginvoicesallocations*/]
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UCard class="mt-5">
|
|
<UTable
|
|
v-if="props.item.statementallocations"
|
|
:rows="renderedAllocations"
|
|
:columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
|
|
@select="(i) => selectAllocation(i)"
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
|
|
>
|
|
<template #amount-data="{row}">
|
|
<span class="text-right text-rose-600" v-if="row.amount < 0 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
|
|
<span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
|
|
<span v-else>{{useCurrency(row.amount)}}</span>
|
|
</template>
|
|
<template #date-data="{row}">
|
|
{{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
|
|
</template>
|
|
<template #description-data="{row}">
|
|
{{row.description ? row.description : ''}}
|
|
</template>
|
|
</UTable>
|
|
</UCard>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |