flfeders/FEDEO
2
1
Fork 0
Code Issues 63 Pull Requests Actions Packages Projects 21 Releases Wiki Activity

Merge branch 'devCorrected' into 'beta'

Browse Source 
Dev corrected

See merge request fedeo/software!57
This commit is contained in:
Florian Federspiel
2026-01-01 15:28:02 +00:00
parent e0f73c20c9 2c7449ef7a
commit cebe20fd43
7 changed files with 666 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
components/PageLeaveGuard.vue Normal file
View File

@@ -0,0 +1,98 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
// Wir erwarten eine Prop, die sagt, ob geschützt werden soll
const props = defineProps<{
when: boolean // z.B. true, wenn Formular dirty ist
}>()
const showModal = ref(false)
const pendingNext = ref<null | ((val?: boolean) => void)>(null)
// --- 1. Interne Navigation (Nuxt) ---
onBeforeRouteLeave((to, from, next) => {
if (!props.when) {
next()
return
}
// Navigation pausieren & Modal zeigen
pendingNext.value = next
showModal.value = true
})
const confirmLeave = () => {
if (pendingNext.value) pendingNext.value()
showModal.value = false
}
const cancelLeave = () => {
showModal.value = false
// Navigation wird implizit abgebrochen
}
// --- 2. Externe Navigation (Browser Tab schließen) ---
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
if (props.when) {
e.preventDefault()
e.returnValue = ''
}
}
onMounted(() => window.addEventListener('beforeunload', handleBeforeUnload))
onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnload))
</script>
<template>
<Teleport to="body">
<div v-if="showModal" class="guard-overlay">
<div class="guard-modal">
<div class="guard-header">
<slot name="title">Seite wirklich verlassen?</slot>
</div>
<div class="guard-body">
<slot>
Du hast ungespeicherte Änderungen. Diese gehen verloren, wenn du die Seite verlässt.
</slot>
</div>
<div class="guard-actions">
<button @click="cancelLeave" class="btn-cancel">
Nein, bleiben
</button>
<button @click="confirmLeave" class="btn-confirm">
Ja, verlassen
</button>
</div>
</div>
</div>
</Teleport>
</template>
<style scoped>
/* Basis-Styling - passe dies an dein Design System an */
.guard-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.6);
display: flex; align-items: center; justify-content: center;
z-index: 9999; backdrop-filter: blur(2px);
}
.guard-modal {
background: white; padding: 24px; border-radius: 12px;
width: 90%; max-width: 400px; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
font-family: sans-serif;
}
.guard-header { font-size: 1.25rem; font-weight: bold; margin-bottom: 1rem; }
.guard-body { margin-bottom: 1.5rem; color: #4a5568; }
.guard-actions { display: flex; justify-content: flex-end; gap: 12px; }
/* Buttons */
button { padding: 8px 16px; border-radius: 6px; cursor: pointer; border: none; font-weight: 600;}
.btn-cancel { background: #edf2f7; color: #2d3748; }
.btn-cancel:hover { background: #e2e8f0; }
.btn-confirm { background: #e53e3e; color: white; }
.btn-confirm:hover { background: #c53030; }
</style>

93
pages/banking/index.vue
View File

@@ -1,11 +1,12 @@
<script setup>
import dayjs from "dayjs";
// Zugriff auf $api und Toast Notification
const { $api } = useNuxtApp()
const toast = useToast()
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
}
})
@@ -18,6 +19,8 @@ const bankstatements = ref([])
const bankaccounts = ref([])
const filterAccount = ref([])
// Status für den Lade-Button
const isSyncing = ref(false)
const setupPage = async () => {
bankstatements.value = (await useEntities("bankstatements").select("*, statementallocations(*)", "date", false))
@@ -25,6 +28,34 @@ const setupPage = async () => {
if(bankaccounts.value.length > 0) filterAccount.value = bankaccounts.value
}
// Funktion für den Bankabruf
const syncBankStatements = async () => {
isSyncing.value = true
try {
await $api('/api/functions/services/bankstatementsync', { method: 'POST' })
toast.add({
title: 'Erfolg',
description: 'Bankdaten wurden erfolgreich synchronisiert.',
icon: 'i-heroicons-check-circle',
color: 'green'
})
// Wichtig: Daten neu laden, damit die neuen Buchungen direkt sichtbar sind
await setupPage()
} catch (error) {
console.error(error)
toast.add({
title: 'Fehler',
description: 'Beim Abrufen der Bankdaten ist ein Fehler aufgetreten.',
icon: 'i-heroicons-exclamation-circle',
color: 'red'
})
} finally {
isSyncing.value = false
}
}
const templateColumns = [
{
key: "account",
@@ -100,9 +131,6 @@ const filteredRows = computed(() => {
}
}
return useSearch(searchString.value, temp.filter(i => filterAccount.value.find(x => x.id === i.account)))
})
@@ -112,6 +140,17 @@ setupPage()
<template>
<UDashboardNavbar title="Bankbuchungen" :badge="filteredRows.length">
<template #right>
<UButton
label="Bankabruf"
icon="i-heroicons-arrow-path"
color="primary"
variant="solid"
:loading="isSyncing"
@click="syncBankStatements"
class="mr-2"
/>
<UInput
id="searchinput"
name="searchinput"
@@ -139,12 +178,12 @@ setupPage()
<UDashboardToolbar>
<template #left>
<USelectMenu
:options="bankaccounts"
v-model="filterAccount"
option-attribute="iban"
multiple
by="id"
:ui-menu="{ width: 'min-w-max' }"
:options="bankaccounts"
v-model="filterAccount"
option-attribute="iban"
multiple
by="id"
:ui-menu="{ width: 'min-w-max' }"
>
<template #label>
Konto
@@ -152,19 +191,6 @@ setupPage()
</USelectMenu>
</template>
<template #right>
<!-- <USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
by="key"
:ui-menu="{ width: 'min-w-max' }"
>
<template #label>
Spalten
</template>
</USelectMenu>-->
<USelectMenu
icon="i-heroicons-adjustments-horizontal-solid"
multiple
@@ -197,12 +223,12 @@ setupPage()
</template>
<template #amount-data="{row}">
<span
v-if="row.amount >= 0"
class="text-primary-500"
v-if="row.amount >= 0"
class="text-primary-500"
>{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
<span
v-else-if="row.amount < 0"
class="text-rose-500"
v-else-if="row.amount < 0"
class="text-rose-500"
>{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
</template>
<template #openAmount-data="{row}">
@@ -210,23 +236,20 @@ setupPage()
</template>
<template #partner-data="{row}">
<span
v-if="row.amount < 0"
v-if="row.amount < 0"
>
{{row.credName}}
</span>
<span
v-else-if="row.amount > 0"
v-else-if="row.amount > 0"
>
{{row.debName}}
</span>
</template>
</UTable>
<PageLeaveGuard :when="isSyncing"/>
</template>
<style scoped>
</style>

4
pages/createDocument/edit/[[id]].vue
View File

@@ -1290,6 +1290,7 @@ const saveSerialInvoice = async () => {
contactPerson: itemInfo.value.contactPerson,
serialConfig: itemInfo.value.serialConfig,
letterhead: itemInfo.value.letterhead,
taxType:itemInfo.value.taxType
}
let data = null
@@ -1693,7 +1694,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
<UFormGroup
label="Steuertyp:"
v-if="['invoices','advanceInvoices','quotes','confirmationOrders'].includes(itemInfo.type)"
v-if="['invoices','advanceInvoices','quotes','confirmationOrders','serialInvoices'].includes(itemInfo.type)"
>
<USelectMenu
:options="[{key:'Standard', label: 'Standard'},{key:'13b UStG', label: '13b UStG'},{key:'19 UStG', label: '19 UStG Kleinunternehmer'}/*,{key:'12.3 UStG', label: 'PV 0% USt'}*/]"
@@ -3136,6 +3137,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
</UTabs>
<UProgress animation="carousel" v-else/>
</UDashboardPanelContent>
<PageLeaveGuard :when="true"/>

192
pages/createDocument/index.vue
View File

@@ -68,78 +68,69 @@
class="ml-2"
variant="outline"
>
{{ filteredRows.filter(i => item.key === 'invoices' ? ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type) : item.key === i.type).length }}
{{ getRowsForTab(item.key).length }}
</UBadge>
</template>
<template #item="{item}">
<div style="height: 80vh; overflow-y: scroll">
<UTable
:columns="columns"
:columns="getColumnsForTab(item.key)"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
:rows="filteredRows.filter(i => item.key === 'invoices' ? ['invoices','advanceInvoices','cancellationInvoices'].includes(i.type) : item.key === i.type)"
:rows="getRowsForTab(item.key)"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
class="w-full"
@select="selectItem"
>
<template #type-data="{row}">
{{ dataStore.documentTypesForCreation[row.type].labelSingle }}
<!--
<span v-if="row.type === 'cancellationInvoices'"> zu {{row.linkedDocument.documentNumber}}</span>
-->
<span v-if="row.type === 'cancellationInvoices'" class="text-cyan-500">{{
dataStore.documentTypesForCreation[row.type].labelSingle
}} für {{ filteredRows.find(i => row.createddocument?.id === i.id)?.documentNumber }}</span>
<span v-else>{{ dataStore.documentTypesForCreation[row.type].labelSingle }}</span>
</template>
<template #state-data="{row}">
<span
v-if="row.state === 'Entwurf'"
class="text-rose-500"
>
{{ row.state }}
</span>
<!-- <span
v-if="row.state === 'Gebucht'"
class="text-cyan-500"
>
{{row.state}}
</span>-->
<span v-if="row.state === 'Entwurf'" class="text-rose-500">{{ row.state }}</span>
<span
v-if="row.state === 'Gebucht' && !items.find(i => i.createddocument && i.createddocument.id === row.id)"
class="text-primary-500"
>
{{ row.state }}
</span>
{{ row.state }}
</span>
<span
v-else-if="row.state === 'Gebucht' && items.find(i => i.createddocument && i.createddocument.id === row.id && i.type === 'cancellationInvoices') && ['invoices','advanceInvoices'].includes(row.type)"
class="text-cyan-500"
>
Storniert mit {{ items.find(i => i.createddocument && i.createddocument.id === row.id).documentNumber }}
</span>
<span
v-else-if="row.state === 'Gebucht'"
class="text-primary-500"
>
{{ row.state }}
</span>
Storniert mit {{ items.find(i => i.createddocument && i.createddocument.id === row.id).documentNumber }}
</span>
<span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{ row.state }}</span>
</template>
<template #partner-data="{row}">
<span v-if="row.customer && row.customer.name.length <21">{{ row.customer ? row.customer.name : "" }}</span>
<span v-if="row.customer && row.customer.name.length < 21">{{ row.customer ? row.customer.name : "" }}</span>
<UTooltip v-else-if="row.customer && row.customer.name.length > 20" :text="row.customer.name">
{{ row.customer.name.substring(0, 20) }}...
</UTooltip>
</template>
<template #reference-data="{row}">
<span v-if="row === filteredRows[selectedItem]"
class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
<span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{ row.documentNumber }}</span>
<span v-else>{{ row.documentNumber }}</span>
</template>
<template #date-data="{row}">
<span v-if="row.date">{{ row.date ? dayjs(row.date).format("DD.MM.YY") : '' }}</span>
<span
v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</span>
<span v-if="row.documentDate">{{ row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : '' }}</span>
</template>
<template #dueDate-data="{row}">
<span
v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
:class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' ">{{ row.documentDate ? dayjs(row.documentDate).add(row.paymentDays, 'day').format("DD.MM.YY") : '' }}</span>
<span
v-if="row.state === 'Gebucht' && row.paymentDays && ['invoices','advanceInvoices'].includes(row.type) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)"
:class="dayjs(row.documentDate).add(row.paymentDays,'day').diff(dayjs()) <= 0 && !isPaid(row) ? ['text-rose-500'] : '' "
>
{{ row.documentDate ? dayjs(row.documentDate).add(row.paymentDays, 'day').format("DD.MM.YY") : '' }}
</span>
</template>
<template #paid-data="{row}">
<div
v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht' && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id)">
@@ -147,20 +138,21 @@
<span v-else class="text-rose-600">Offen</span>
</div>
</template>
<template #amount-data="{row}">
<span
v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span>
<span v-if="row.type !== 'deliveryNotes'">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items)) }}</span>
</template>
<template #amountOpen-data="{row}">
<span
v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">{{ displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n, {amount}) => n + amount, 0)) }}</span>
v-if="!['deliveryNotes','cancellationInvoices','quotes','confirmationOrders'].includes(row.type) && row.state !== 'Entwurf' && !useSum().getIsPaid(row,items) && !items.find(i => i.linkedDocument && i.linkedDocument.id === row.id) ">
{{ displayCurrency(useSum().getCreatedDocumentSum(row, items) - row.statementallocations.reduce((n, {amount}) => n + amount, 0)) }}
</span>
</template>
</UTable>
</div>
</template>
</UTabs>
</template>
<script setup>
@@ -168,8 +160,6 @@ import dayjs from "dayjs";
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
@@ -178,7 +168,13 @@ defineShortcuts({
'Enter': {
usingInput: true,
handler: () => {
router.push(`/createDocument/show/${filteredRows.value[selectedItem.value].id}`)
// Zugriff auf das aktuell sichtbare Element basierend auf Tab und Selektion
const currentList = getRowsForTab(selectedTypes.value[activeTabIndex.value]?.key || 'drafts')
// Fallback auf globale Liste falls nötig, aber Logik sollte auf Tab passen
if (filteredRows.value[selectedItem.value]) {
router.push(`/createDocument/show/${filteredRows.value[selectedItem.value].id}`)
}
}
},
'arrowdown': () => {
@@ -206,7 +202,7 @@ const dataType = dataStore.dataTypes[type]
const items = ref([])
const selectedItem = ref(0)
const activeTabIndex = ref(0)
const setupPage = async () => {
items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)", "documentNumber", true, true))
@@ -215,56 +211,53 @@ const setupPage = async () => {
setupPage()
const templateColumns = [
{
key: "reference",
label: "Referenz"
},
{
key: 'type',
label: "Typ"
}, {
key: 'state',
label: "Status"
},
{
key: "amount",
label: "Betrag"
},
{
key: 'partner',
label: "Kunde"
},
{
key: "date",
label: "Datum"
},
{
key: "amountOpen",
label: "Offener Betrag"
},
{
key: "paid",
label: "Bezahlt"
},
{
key: "dueDate",
label: "Fällig"
}
{key: "reference", label: "Referenz"},
{key: 'type', label: "Typ"},
{key: 'state', label: "Status"},
{key: "amount", label: "Betrag"},
{key: 'partner', label: "Kunde"},
{key: "date", label: "Datum"},
{key: "amountOpen", label: "Offener Betrag"},
{key: "paid", label: "Bezahlt"},
{key: "dueDate", label: "Fällig"}
]
// Eigene Spalten für Entwürfe: Referenz raus, Status rein
const draftColumns = [
{key: 'type', label: "Typ"},
{key: 'state', label: "Status"}, // Status wieder drin
{key: 'partner', label: "Kunde"},
{key: "date", label: "Erstellt am"},
{key: "amount", label: "Betrag"}
]
const selectedColumns = ref(tempStore.columns["createddocuments"] ? tempStore.columns["createddocuments"] : templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.find(i => i.key === column.key)))
const getColumnsForTab = (tabKey) => {
if (tabKey === 'drafts') {
return draftColumns
}
return columns.value
}
const templateTypes = [
{
key: "drafts",
label: "Entwürfe"
},
{
key: "invoices",
label: "Rechnungen"
}/*,{
},
/*,{
key: "cancellationInvoices",
label: "Stornorechnungen"
},{
key: "advanceInvoices",
label: "Abschlagsrechnungen"
}*/, {
},*/
{
key: "quotes",
label: "Angebote"
}, {
@@ -282,7 +275,6 @@ const types = computed(() => {
const selectItem = (item) => {
console.log(item)
if (item.state === "Entwurf") {
router.push(`/createDocument/edit/${item.id}`)
} else if (item.state !== "Entwurf") {
@@ -294,7 +286,6 @@ const displayCurrency = (value, currency = "€") => {
return `${Number(value).toFixed(2).replace(".", ",")} ${currency}`
}
const searchString = ref(tempStore.searchStrings['createddocuments'] || '')
const clearSearchString = () => {
@@ -305,8 +296,18 @@ const selectableFilters = ref(dataType.filters.map(i => i.name))
const selectedFilters = ref(dataType.filters.filter(i => i.default).map(i => i.name) || [])
const filteredRows = computed(() => {
let tempItems = items.value.filter(i => types.value.find(x => {
// 1. Draft Tab Logic
if (x.key === 'drafts') return i.state === 'Entwurf'
// 2. Global Draft Exclusion (drafts shouldn't be in other tabs)
if (i.state === 'Entwurf' && x.key !== 'drafts') return false
// 3. Normal Type Logic
if (x.key === 'invoices') return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type)
return x.key === i.type
}))
let tempItems = items.value.filter(i => types.value.find(x => x.key === 'invoices' ? ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type) : x.key === i.type))
tempItems = tempItems.filter(i => i.type !== "serialInvoices")
tempItems = tempItems.map(i => {
@@ -323,23 +324,32 @@ const filteredRows = computed(() => {
})
}
tempItems = useSearch(searchString.value, tempItems)
return useSearch(searchString.value, tempItems.slice().reverse())
})
const getRowsForTab = (tabKey) => {
return filteredRows.value.filter(row => {
if (tabKey === 'drafts') {
return row.state === 'Entwurf'
}
if (row.state === 'Entwurf') return false
if (tabKey === 'invoices') {
return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(row.type)
}
return row.type === tabKey
})
}
const isPaid = (item) => {
let amountPaid = 0
item.statementallocations.forEach(allocation => amountPaid += allocation.amount)
return Number(amountPaid.toFixed(2)) === useSum().getCreatedDocumentSum(item, items.value)
}
</script>
<style scoped>
</style>

477
pages/createDocument/serialInvoice.vue
View File

@@ -14,6 +14,23 @@
<UKbd value="/" />
</template>
</UInput>
<UButton
icon="i-heroicons-queue-list"
color="gray"
variant="ghost"
label="Ausführungen"
@click="openExecutionsSlideover"
/>
<UButton
icon="i-heroicons-play"
color="white"
variant="solid"
label="Ausführen"
@click="openExecutionModal"
/>
<UButton
@click="router.push(`/createDocument/edit?type=serialInvoices`)"
>
@@ -21,20 +38,9 @@
</UButton>
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<template #right>
<!-- <USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
by="key"
>
<template #label>
Spalten
</template>
</USelectMenu>-->
<USelectMenu
v-model="selectedFilters"
icon="i-heroicons-adjustments-horizontal-solid"
@@ -52,6 +58,40 @@
</USelectMenu>
</template>
</UDashboardToolbar>
<div v-if="runningExecutions.length > 0" class="p-4 space-y-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 flex items-center gap-2">
<UIcon name="i-heroicons-arrow-path" class="animate-spin text-primary" />
Laufende Ausführungen
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<UCard v-for="exec in runningExecutions" :key="exec.id" :ui="{ body: { padding: 'p-4' } }">
<div class="flex justify-between items-start mb-2">
<div>
<p class="text-sm font-medium">Start: {{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</p>
</div>
<UBadge color="primary" variant="subtle">Läuft</UBadge>
</div>
<div class="text-xs text-gray-500 flex justify-between mb-3">
<span>{{exec.summary}}</span>
</div>
<div class="flex justify-end pt-2 border-t border-gray-100 dark:border-gray-800">
<UButton
size="xs"
color="white"
variant="solid"
icon="i-heroicons-check"
label="Fertigstellen"
:loading="finishingId === exec.id"
@click="finishExecution(exec.id)"
/>
</div>
</UCard>
</div>
</div>
<UTable
:rows="filteredRows"
:columns="columns"
@@ -60,6 +100,18 @@
@select="(row) => router.push(`/createDocument/edit/${row.id}`)"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
>
<template #actions-data="{ row }">
<div @click.stop>
<UDropdown :items="getActionItems(row)" :popper="{ placement: 'bottom-end' }">
<UButton
color="gray"
variant="ghost"
icon="i-heroicons-ellipsis-horizontal-20-solid"
/>
</UDropdown>
</div>
</template>
<template #type-data="{row}">
{{dataStore.documentTypesForCreation[row.type].labelSingle}}
</template>
@@ -67,23 +119,6 @@
<span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
</template>
<!--<template #reference-data="{row}">
<span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
<span v-else>{{row.documentNumber}}</span>
</template>
<template #date-data="{row}">
<span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
<span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
</template>
<template #dueDate-data="{row}">
<span :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : '' ">{{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}</span>
</template>
<template #paid-data="{row}">
<div v-if="row.type === 'invoices' ||row.type === 'advanceInvoices'">
<span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span>
<span v-else class="text-rose-600">Offen</span>
</div>
</template>-->
<template #amount-data="{row}">
{{displayCurrency(calculateDocSum(row))}}
</template>
@@ -100,25 +135,231 @@
</template>
</UTable>
<UModal v-model="showExecutionModal" :ui="{ width: 'sm:max-w-4xl' }">
<UCard>
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Serienrechnungen manuell ausführen
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionModal = false" />
</div>
</template>
<div class="space-y-4">
<UFormGroup label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend').">
<UInput type="date" v-model="executionDate" />
</UFormGroup>
<UDivider label="Vorlagen auswählen" />
<div class="max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-800 rounded-md">
<UTable
v-model="selectedExecutionRows"
:rows="activeTemplates"
:columns="executionColumns"
:ui="{ th: { base: 'whitespace-nowrap' } }"
>
<template #partner-data="{row}">
{{row.customer ? row.customer.name : "-"}}
</template>
<template #amount-data="{row}">
{{displayCurrency(calculateDocSum(row))}}
</template>
<template #serialConfig.intervall-data="{row}">
{{ row.serialConfig?.intervall }}
</template>
</UTable>
</div>
<div class="text-sm text-gray-500">
{{ selectedExecutionRows.length }} Vorlage(n) ausgewählt.
</div>
</div>
<template #footer>
<div class="flex justify-end gap-2">
<UButton color="white" @click="showExecutionModal = false">Abbrechen</UButton>
<UButton
color="primary"
:loading="isExecuting"
:disabled="selectedExecutionRows.length === 0"
@click="executeSerialInvoices"
>
Jetzt ausführen
</UButton>
</div>
</template>
</UCard>
</UModal>
<USlideover v-model="showExecutionsSlideover" :ui="{ width: 'w-screen max-w-md' }">
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Alle Ausführungen
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showExecutionsSlideover = false" />
</div>
</template>
<div class="space-y-4 overflow-y-auto h-full p-1">
<div v-if="executionsLoading" class="flex justify-center py-4">
<UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 w-6 h-6" />
</div>
<div v-else-if="completedExecutions.length === 0" class="text-center text-gray-500 py-8">
Keine abgeschlossenen Ausführungen gefunden.
</div>
<div v-for="exec in completedExecutions" :key="exec.id" class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
<div class="flex justify-between items-start mb-2">
<span class="text-sm font-semibold">{{ dayjs(exec.createdAt).format('DD.MM.YYYY HH:mm') }}</span>
<UBadge :color="getStatusColor(exec.status)" variant="subtle" size="xs">
{{ getStatusLabel(exec.status) }}
</UBadge>
</div>
<div class="text-xs text-gray-500 grid grid-cols-2 gap-2 mt-2">
<div>
<UIcon name="i-heroicons-check-circle" class="text-green-500 w-3 h-3 align-text-bottom" />
{{exec.summary}}
</div>
</div>
</div>
</div>
</UCard>
</USlideover>
</template>
<script setup>
import dayjs from "dayjs";
const router = useRouter()
const { $api } = useNuxtApp()
const toast = useToast()
const dataStore = useDataStore()
const items = ref([])
const selectedItem = ref(0)
// --- Execution State ---
const showExecutionModal = ref(false)
const executionDate = ref(dayjs().format('YYYY-MM-DD'))
const selectedExecutionRows = ref([])
const isExecuting = ref(false)
// --- SerialExecutions State (Liste der Ausführungen) ---
const showExecutionsSlideover = ref(false)
const executionItems = ref([])
const executionsLoading = ref(false)
// NEU: Statusvariable für den Fertigstellungs-Prozess
const finishingId = ref(null)
const setupPage = async () => {
// 1. Vorlagen laden
items.value = await useEntities("createddocuments").select("*, customer(id,name), contract(id,name, contractNumber)","documentDate",undefined,true)
// 2. Ausführungen laden
await fetchExecutions()
}
// --- Logic für Ausführungen ---
const fetchExecutions = async () => {
executionsLoading.value = true
try {
const res = await useEntities("serialexecutions").select("*", "createdAt", true)
executionItems.value = res || []
} catch (e) {
console.error("Fehler beim Laden der serialexecutions", e)
} finally {
executionsLoading.value = false
}
}
const runningExecutions = computed(() => {
// Filtert nach Status 'draft'
return executionItems.value.filter(i => i.status === 'draft')
})
const completedExecutions = computed(() => {
// Filtert alles was NICHT läuft (und nicht 'draft' ist, um Dopplungen zu vermeiden)
return executionItems.value.filter(i => i.status !== 'running' && i.status !== 'pending' && i.status !== 'draft')
})
const openExecutionsSlideover = () => {
showExecutionsSlideover.value = true
fetchExecutions() // Refresh beim Öffnen
}
// NEU: Funktion zum Fertigstellen
const finishExecution = async (executionId) => {
if (!executionId) return
finishingId.value = executionId
try {
await $api(`/api/functions/serial/finish/${executionId}`, {
method: 'POST'
})
toast.add({
title: 'Ausführung beendet',
description: 'Der Prozess wurde erfolgreich als fertig markiert.',
icon: 'i-heroicons-check-circle',
color: 'green'
})
// Liste aktualisieren, damit die Karte aus "Laufend" verschwindet
await fetchExecutions()
} catch (error) {
console.error(error)
toast.add({
title: 'Fehler',
description: 'Die Ausführung konnte nicht beendet werden.',
icon: 'i-heroicons-exclamation-triangle',
color: 'red'
})
} finally {
finishingId.value = null
}
}
const getStatusColor = (status) => {
switch (status) {
case 'completed':
return 'green'
case 'error':
return 'red'
case 'running':
case 'draft': // Draft auch als Primary färben
return 'primary'
default:
return 'gray'
}
}
const getStatusLabel = (status) => {
switch (status) {
case 'completed':
return 'Abgeschlossen'
case 'error':
return 'Fehlerhaft'
case 'draft':
return 'Gestartet'
default:
return status
}
}
// --- Bestehende Logik ---
const searchString = ref("")
const filteredRows = computed(() => {
let temp = items.value.filter(i => i.type === "serialInvoices").map(i => {
return {
...i,
@@ -126,42 +367,83 @@ const filteredRows = computed(() => {
}
})
/*if(showDrafts.value === true) {
temp = temp.filter(i => i.state === "Entwurf")
} else {
temp = temp.filter(i => i.state !== "Entwurf")
}*/
selectedFilters.value.forEach(filterName => {
let filter = filterOptions.value.find(i => i.name === filterName)
temp = temp.filter(filter.filterFunction)
})
return useSearch(searchString.value, temp.slice().reverse())
})
const templateColumns = [
{
key: 'serialConfig.active',
label: "Aktiv"
},{
key: "amount",
label: "Betrag"
},
{
key: 'partner',
label: "Kunde"
},
{
key: 'contract',
label: "Vertrag"
},
{
key: 'serialConfig.intervall',
label: "Rhythmus"
const activeTemplates = computed(() => {
return items.value
.filter(i => i.type === "serialInvoices" && i.serialConfig?.active === true)
.map(i => ({...i}))
})
// NEU: Schnellaktionen Logik
const getActionItems = (row) => {
const isActive = row.serialConfig && row.serialConfig.active
return [
[{
label: isActive ? 'Deaktivieren' : 'Aktivieren',
icon: isActive ? 'i-heroicons-pause' : 'i-heroicons-play',
class: isActive ? 'text-red-500' : 'text-primary',
click: () => toggleActiveState(row)
}]
]
}
const toggleActiveState = async (row) => {
const newState = !row.serialConfig.active
// Optimistisches Update im UI
row.serialConfig.active = newState
try {
// Annahme: createddocuments Tabelle erlaubt update
await useEntities('createddocuments').update(row.id, {
serialConfig: {
...row.serialConfig,
active: newState
}
})
toast.add({
title: newState ? 'Aktiviert' : 'Deaktiviert',
description: `Die Vorlage wurde ${newState ? 'aktiviert' : 'deaktiviert'}.`,
icon: 'i-heroicons-check',
color: 'green'
})
} catch (e) {
console.error(e)
// Rollback im Fehlerfall
row.serialConfig.active = !newState
toast.add({
title: 'Fehler',
description: 'Status konnte nicht gespeichert werden.',
color: 'red'
})
}
}
const templateColumns = [
{ key: 'actions', label: '' }, // NEU: Spalte für Menü ganz links
{ key: 'serialConfig.active', label: "Aktiv" },
{ key: "amount", label: "Betrag" },
{ key: 'partner', label: "Kunde" },
{ key: 'contract', label: "Vertrag" },
{ key: 'serialConfig.intervall', label: "Rhythmus" }
]
const executionColumns = [
{key: 'partner', label: "Kunde"},
{key: 'contract', label: "Vertrag"},
{key: 'serialConfig.intervall', label: "Intervall"},
{key: "amount", label: "Betrag"},
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
@@ -170,46 +452,79 @@ const filterOptions = ref([
name: "Archivierte ausblenden",
default: true,
"filterFunction": function (row) {
if(!row.archived) {
return true
} else {
return false
}
return !row.archived;
}
},{
}, {
name: "Inaktive ausblenden",
default: true,
"filterFunction": function (row) {
if(row.serialConfig.active) {
return true
} else {
return false
}
return !!row.serialConfig.active;
}
}
])
const selectedFilters = ref(filterOptions.value.filter(i => i.default).map(i => i.name) ||[])
const selectedFilters = ref(filterOptions.value.filter(i => i.default).map(i => i.name) || [])
const displayCurrency = (value, currency = "€") => {
return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
return `${Number(value).toFixed(2).replace(".", ",")} ${currency}`
}
const calculateDocSum = (row) => {
let sum = 0
row.rows.forEach(row => {
if(row.mode === "normal" || row.mode === "service" || row.mode === "free") {
if (row.mode === "normal" || row.mode === "service" || row.mode === "free") {
sum += row.quantity * row.price * (1 - row.discountPercent / 100) * (1 + row.taxPercent / 100)
}
})
return sum.toFixed(2)
}
const openExecutionModal = () => {
executionDate.value = dayjs().format('YYYY-MM-DD')
selectedExecutionRows.value = []
showExecutionModal.value = true
}
const executeSerialInvoices = async () => {
if (selectedExecutionRows.value.length === 0) return;
isExecuting.value = true
try {
const payload = {
tenantId: dataStore.currentTenantId || items.value[0]?.tenant,
executionDate: executionDate.value,
templateIds: selectedExecutionRows.value.map(row => row.id)
}
const res = await $api('/api/functions/serial/start', {
method: 'POST',
body: payload
})
toast.add({
title: 'Ausführung gestartet',
description: `${res.length} Rechnungen werden im Hintergrund generiert.`,
icon: 'i-heroicons-check-circle',
color: 'green'
})
showExecutionModal.value = false
selectedExecutionRows.value = []
// Liste aktualisieren, um den "Läuft" Status zu sehen
await fetchExecutions()
} catch (error) {
console.error(error)
toast.add({
title: 'Fehler',
description: 'Die Ausführung konnte nicht gestartet werden.',
icon: 'i-heroicons-exclamation-triangle',
color: 'red'
})
} finally {
isExecuting.value = false
}
}
setupPage()
</script>
<style scoped>
</style>
</script>

10
pages/incomingInvoices/[mode]/[id].vue
View File

@@ -43,6 +43,10 @@ const setup = async () => {
accounts.value = await useEntities("accounts").selectSpecial()
itemInfo.value = await useEntities("incominginvoices").selectSingle(route.params.id, "*, files(*)")
//TODO: Dirty Fix
itemInfo.value.vendor = itemInfo.value.vendor?.id
await loadFile(itemInfo.value.files[itemInfo.value.files.length-1].id)
if(itemInfo.value.date && !itemInfo.value.dueDate) itemInfo.value.dueDate = itemInfo.value.date
@@ -412,7 +416,7 @@ const findIncomingInvoiceErrors = computed(() => {
value-attribute="id"
searchable
:disabled="mode === 'show'"
:search-attributes="['label']"
:search-attributes="['label','number']"
searchable-placeholder="Suche..."
v-model="item.account"
:color="(item.account && accounts.find(i => i.id === item.account)) ? 'primary' : 'rose'"
@@ -420,6 +424,9 @@ const findIncomingInvoiceErrors = computed(() => {
<template #label>
{{accounts.find(account => account.id === item.account) ? accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
</template>
<template #option="{ option}">
{{option.number}} - {{option.label}}
</template>
</USelectMenu>
</UFormGroup>
@@ -575,6 +582,7 @@ const findIncomingInvoiceErrors = computed(() => {
<UProgress v-else animation="carousel"/>
</UDashboardPanelContent>
<PageLeaveGuard :when="true"/>

2
stores/data.js
View File

@@ -2608,7 +2608,7 @@ export const useDataStore = defineStore('data', () => {
},
cancellationInvoices: {
label: "Stornorechnungen",
labelSingle: "Stornorechnung"
labelSingle: "Storno"
},
quotes: {
label: "Angebote",