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
123 lines
2.4 KiB
Vue
123 lines
2.4 KiB
Vue
<template>
|
|
<div id="main">
|
|
|
|
<div class="flex items-center gap-1">
|
|
<UButton @click="router.push(`/vendorinvoices/create/`)">+ Eingangsrechnung</UButton>
|
|
|
|
<UInput
|
|
v-model="searchString"
|
|
placeholder="Suche..."
|
|
/>
|
|
</div>
|
|
|
|
|
|
|
|
<UTable
|
|
:rows="filteredRows"
|
|
:columns="itemColumns"
|
|
@select="selectItem"
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
|
|
>
|
|
<template #state-data="{row}">
|
|
<span
|
|
v-if="row.state === 'Entwurf'"
|
|
class="text-cyan-500"
|
|
>
|
|
{{row.state}}
|
|
</span>
|
|
<span
|
|
v-if="row.state === 'Bezahlt'"
|
|
class="text-primary-500"
|
|
>
|
|
{{row.state}}
|
|
</span>
|
|
</template>
|
|
<template #vendor-data="{row}">
|
|
{{vendors.find(vendor => vendor.id === row.vendor) ? vendors.find(vendor => vendor.id === row.vendor).name : ''}}
|
|
</template>
|
|
<template #date-data="{row}">
|
|
{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}
|
|
</template>
|
|
<template #dueDate-data="{row}">
|
|
{{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}
|
|
</template>
|
|
<template #amount-data="{row}">
|
|
{{row.amount ? row.amount.toFixed(2) + ' €' : ''}}
|
|
</template>
|
|
</UTable>
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as dayjs from "dayjs";
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
|
|
const router = useRouter()
|
|
const {vendorInvoices, vendors} = storeToRefs(useDataStore())
|
|
const mode = ref("show")
|
|
|
|
const itemColumns = [
|
|
{
|
|
key: 'state',
|
|
label: "Status.",
|
|
sortable: true
|
|
},
|
|
{
|
|
key: 'vendor',
|
|
label: "Lieferant",
|
|
sortable: true
|
|
},
|
|
{
|
|
key: "reference",
|
|
label: "Referenz",
|
|
sortable: true
|
|
},
|
|
{
|
|
key: "date",
|
|
label: "Datum",
|
|
sortable: true
|
|
},
|
|
{
|
|
key: "dueDate",
|
|
label: "Fällig:",
|
|
sortable: true
|
|
},
|
|
{
|
|
key: "amount",
|
|
label: "Betrag",
|
|
sortable: true
|
|
},
|
|
]
|
|
|
|
|
|
const selectItem = (item) => {
|
|
console.log(item)
|
|
router.push(`/vendorinvoices/edit/${item.id} `)
|
|
}
|
|
|
|
|
|
const searchString = ref('')
|
|
|
|
const filteredRows = computed(() => {
|
|
if(!searchString.value) {
|
|
return vendorInvoices.value
|
|
}
|
|
|
|
return vendorInvoices.value.filter(item => {
|
|
return Object.values(item).some((value) => {
|
|
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
|
})
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |