Ersetzt ungültige UTable-Empty-Props durch einen gemeinsamen Empty-State-Slot, damit leere Tabellen keine Objekt-/JSON-Ausgabe mehr anzeigen.
116 lines
3.4 KiB
Vue
116 lines
3.4 KiB
Vue
<script setup>
|
|
|
|
const createddocuments = ref([])
|
|
const bankaccounts = ref([])
|
|
const selected = ref([])
|
|
const selectedBankaccount = ref(null)
|
|
const loading = ref(true)
|
|
const toast = useToast()
|
|
const router = useRouter()
|
|
|
|
const setup = async () => {
|
|
loading.value = true
|
|
const [documents, accounts] = await Promise.all([
|
|
useEntities("createddocuments").select("*, customer(id,name), outgoingsepamandate(*, bankaccount(*)), statementallocations(*)"),
|
|
useEntities("bankaccounts").select("*")
|
|
])
|
|
|
|
createddocuments.value = documents.filter(i => i.payment_type === "direct-debit" && i.outgoingsepamandate)
|
|
bankaccounts.value = accounts.filter(i => !i.archived && !i.expired)
|
|
selected.value = createddocuments.value
|
|
selectedBankaccount.value = bankaccounts.value[0]?.id || null
|
|
loading.value = false
|
|
}
|
|
|
|
setup()
|
|
|
|
const createExport = async () => {
|
|
if (!selectedBankaccount.value) {
|
|
toast.add({ title: "Bitte wählen Sie ein Gläubigerkonto aus.", color: "error" })
|
|
return
|
|
}
|
|
|
|
if (!selected.value.length) {
|
|
toast.add({ title: "Bitte wählen Sie mindestens einen Beleg aus.", color: "error" })
|
|
return
|
|
}
|
|
|
|
//NUMMERN MAPPEN ZU IDS UND AN BACKEND FUNKTION ÜBERGEBEN
|
|
const ids = selected.value.map((i) => i.id)
|
|
|
|
const res = await useNuxtApp().$api("/api/exports/sepa", {
|
|
method: "POST",
|
|
body: {
|
|
idsToExport: ids,
|
|
creditorBankaccountId: selectedBankaccount.value
|
|
}
|
|
})
|
|
|
|
if (res.success) {
|
|
toast.add({ title: "SEPA-Export wird erstellt. Sie finden die Datei anschließend in der Exportliste." })
|
|
await router.push("/export")
|
|
} else {
|
|
toast.add({ title: res.message || "Der SEPA-Export konnte nicht gestartet werden.", color: "error" })
|
|
}
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar title="SEPA Export erstellen">
|
|
<template #right>
|
|
<UButton @click="createExport">
|
|
Erstellen
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
<div class="p-4">
|
|
<UFormField label="Gläubigerkonto" class="max-w-xl">
|
|
<USelectMenu
|
|
v-model="selectedBankaccount"
|
|
value-key="id"
|
|
label-key="name"
|
|
:items="bankaccounts"
|
|
:search-input="{ placeholder: 'Konto suchen...' }"
|
|
:filter-fields="['name', 'iban', 'bankId']"
|
|
class="w-full"
|
|
>
|
|
<template #default>
|
|
{{ bankaccounts.find(i => i.id === selectedBankaccount)?.name || "Gläubigerkonto auswählen" }}
|
|
</template>
|
|
<template #item="{ item }">
|
|
{{ item.name || item.ownerName || "Bankkonto" }} - {{ item.iban }} - {{ item.bankId }}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormField>
|
|
</div>
|
|
<UTable
|
|
:loading="loading"
|
|
v-model="selected"
|
|
:loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
|
|
:data="createddocuments"
|
|
:columns="normalizeTableColumns([
|
|
{ key: 'documentNumber', label: 'Belegnummer' },
|
|
{ key: 'customer', label: 'Kunde' },
|
|
{ key: 'documentDate', label: 'Belegdatum' },
|
|
{ key: 'outgoingsepamandate', label: 'SEPA-Mandat' },
|
|
])"
|
|
>
|
|
<template #customer-cell="{ row }">
|
|
{{ row.original.customer?.name || "-" }}
|
|
</template>
|
|
<template #outgoingsepamandate-cell="{ row }">
|
|
{{ row.original.outgoingsepamandate?.reference || "-" }}
|
|
</template>
|
|
<template #empty>
|
|
<TableEmptyState label="Keine SEPA-Belege anzuzeigen" />
|
|
</template>
|
|
</UTable>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|