292 lines
10 KiB
Vue
292 lines
10 KiB
Vue
<script setup>
|
|
const {$api, $dayjs} = useNuxtApp()
|
|
const toast = useToast()
|
|
|
|
defineShortcuts({
|
|
'/': () => document.getElementById("searchinput").focus()
|
|
})
|
|
|
|
const tempStore = useTempStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const bankstatements = ref([])
|
|
const bankaccounts = ref([])
|
|
const filterAccount = ref([])
|
|
const isSyncing = ref(false)
|
|
const loadingDocs = ref(true) // Startet im Ladezustand
|
|
|
|
// Zeitraum-Optionen
|
|
const periodOptions = [
|
|
{label: 'Aktueller Monat', key: 'current_month'},
|
|
{label: 'Letzter Monat', key: 'last_month'},
|
|
{label: 'Aktuelles Quartal', key: 'current_quarter'},
|
|
{label: 'Letztes Quartal', key: 'last_quarter'},
|
|
{label: 'Benutzerdefiniert', key: 'custom'}
|
|
]
|
|
|
|
// Initialisierungswerte
|
|
const selectedPeriod = ref(periodOptions[0])
|
|
const dateRange = ref({
|
|
start: $dayjs().startOf('month').format('YYYY-MM-DD'),
|
|
end: $dayjs().endOf('month').format('YYYY-MM-DD')
|
|
})
|
|
|
|
const setupPage = async () => {
|
|
loadingDocs.value = true
|
|
try {
|
|
const [statements, accounts] = await Promise.all([
|
|
useEntities("bankstatements").select("*, statementallocations(*)", "valueDate", false),
|
|
useEntities("bankaccounts").select()
|
|
])
|
|
|
|
bankstatements.value = statements
|
|
bankaccounts.value = accounts
|
|
|
|
if (bankaccounts.value.length > 0 && filterAccount.value.length === 0) {
|
|
filterAccount.value = bankaccounts.value
|
|
}
|
|
|
|
// Erst nach dem Laden der Daten die Store-Werte anwenden
|
|
const savedBanking = tempStore.settings?.['banking'] || {}
|
|
if (savedBanking.periodKey) {
|
|
const found = periodOptions.find(p => p.key === savedBanking.periodKey)
|
|
if (found) selectedPeriod.value = found
|
|
}
|
|
if (savedBanking.range) {
|
|
dateRange.value = savedBanking.range
|
|
}
|
|
} catch (err) {
|
|
console.error("Setup Error:", err)
|
|
} finally {
|
|
loadingDocs.value = false
|
|
}
|
|
}
|
|
|
|
// Watcher für Schnellwahlen & Persistenz
|
|
watch([selectedPeriod, dateRange], ([newPeriod, newRange], [oldPeriod, oldRange]) => {
|
|
const now = $dayjs()
|
|
|
|
// Nur berechnen, wenn sich die Periode geändert hat
|
|
if (newPeriod.key !== oldPeriod?.key) {
|
|
switch (newPeriod.key) {
|
|
case 'current_month':
|
|
dateRange.value = {start: now.startOf('month').format('YYYY-MM-DD'), end: now.endOf('month').format('YYYY-MM-DD')}
|
|
break
|
|
case 'last_month':
|
|
const lastMonth = now.subtract(1, 'month')
|
|
dateRange.value = {start: lastMonth.startOf('month').format('YYYY-MM-DD'), end: lastMonth.endOf('month').format('YYYY-MM-DD')}
|
|
break
|
|
case 'current_quarter':
|
|
dateRange.value = {start: now.startOf('quarter').format('YYYY-MM-DD'), end: now.endOf('quarter').format('YYYY-MM-DD')}
|
|
break
|
|
case 'last_quarter':
|
|
const lastQuarter = now.subtract(1, 'quarter')
|
|
dateRange.value = {start: lastQuarter.startOf('quarter').format('YYYY-MM-DD'), end: lastQuarter.endOf('quarter').format('YYYY-MM-DD')}
|
|
break
|
|
}
|
|
}
|
|
// Speichern im Store
|
|
tempStore.modifyBankingPeriod(selectedPeriod.value.key, dateRange.value)
|
|
}, { deep: true })
|
|
|
|
const syncBankStatements = async () => {
|
|
isSyncing.value = true
|
|
try {
|
|
await $api('/api/functions/services/bankstatementsync', {method: 'POST'})
|
|
toast.add({title: 'Erfolg', description: 'Bankdaten synchronisiert.', color: 'green'})
|
|
await setupPage()
|
|
} catch (error) {
|
|
toast.add({title: 'Fehler', description: 'Fehler beim Abruf.', color: 'red'})
|
|
} finally {
|
|
isSyncing.value = false
|
|
}
|
|
}
|
|
|
|
const templateColumns = [
|
|
{key: "account", label: "Konto"},
|
|
{key: "valueDate", label: "Valuta"},
|
|
{key: "amount", label: "Betrag"},
|
|
{key: "openAmount", label: "Offen"},
|
|
{key: "partner", label: "Name"},
|
|
{key: "text", label: "Beschreibung"}
|
|
]
|
|
|
|
const searchString = ref(tempStore.searchStrings["bankstatements"] || '')
|
|
const selectedFilters = ref(tempStore.filters?.["banking"]?.["main"] || ['Nur offene anzeigen'])
|
|
|
|
const shouldShowMonthDivider = (row, index) => {
|
|
if (index === 0) return true;
|
|
const prevRow = filteredRows.value[index - 1];
|
|
return $dayjs(row.valueDate).format('MMMM YYYY') !== $dayjs(prevRow.valueDate).format('MMMM YYYY');
|
|
}
|
|
|
|
const calculateOpenSum = (statement) => {
|
|
const allocated = statement.statementallocations?.reduce((acc, curr) => acc + curr.amount, 0) || 0;
|
|
return (statement.amount - allocated).toFixed(2);
|
|
}
|
|
|
|
const filteredRows = computed(() => {
|
|
if (!bankstatements.value.length) return []
|
|
|
|
let temp = [...bankstatements.value]
|
|
|
|
// Filterung nach Datum
|
|
if (dateRange.value.start) {
|
|
temp = temp.filter(i => $dayjs(i.valueDate).isSameOrAfter($dayjs(dateRange.value.start), 'day'))
|
|
}
|
|
if (dateRange.value.end) {
|
|
temp = temp.filter(i => $dayjs(i.valueDate).isSameOrBefore($dayjs(dateRange.value.end), 'day'))
|
|
}
|
|
|
|
// Status Filter
|
|
if (selectedFilters.value.includes("Nur offene anzeigen")) {
|
|
temp = temp.filter(i => Number(calculateOpenSum(i)) !== 0)
|
|
}
|
|
if (selectedFilters.value.includes("Nur positive anzeigen")) {
|
|
temp = temp.filter(i => i.amount >= 0)
|
|
}
|
|
if (selectedFilters.value.includes("Nur negative anzeigen")) {
|
|
temp = temp.filter(i => i.amount < 0)
|
|
}
|
|
|
|
// Konto Filter & Suche
|
|
let results = temp.filter(i => filterAccount.value.find(x => x.id === i.account))
|
|
|
|
if (searchString.value) {
|
|
results = useSearch(searchString.value, results)
|
|
}
|
|
|
|
return results.sort((a, b) => $dayjs(b.valueDate).unix() - $dayjs(a.valueDate).unix())
|
|
})
|
|
|
|
const displayCurrency = (value) => `${Number(value).toFixed(2).replace(".", ",")} €`
|
|
|
|
onMounted(() => {
|
|
setupPage()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar title="Bankbuchungen" :badge="filteredRows.length">
|
|
<template #right>
|
|
<UButton
|
|
label="Bankabruf"
|
|
icon="i-heroicons-arrow-path"
|
|
:loading="isSyncing"
|
|
@click="syncBankStatements"
|
|
class="mr-2"
|
|
/>
|
|
<UInput
|
|
id="searchinput"
|
|
v-model="searchString"
|
|
icon="i-heroicons-magnifying-glass"
|
|
placeholder="Suche..."
|
|
@change="tempStore.modifySearchString('bankstatements',searchString)"
|
|
/>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<template #left>
|
|
<div class="flex items-center gap-3">
|
|
<USelectMenu
|
|
:options="bankaccounts"
|
|
v-model="filterAccount"
|
|
option-attribute="iban"
|
|
multiple
|
|
by="id"
|
|
placeholder="Konten"
|
|
class="w-48"
|
|
/>
|
|
<UDivider orientation="vertical" class="h-6"/>
|
|
<div class="flex items-center gap-2">
|
|
<USelectMenu
|
|
v-model="selectedPeriod"
|
|
:options="periodOptions"
|
|
class="w-44"
|
|
icon="i-heroicons-calendar-days"
|
|
/>
|
|
<div v-if="selectedPeriod.key === 'custom'" class="flex items-center gap-1">
|
|
<UInput type="date" v-model="dateRange.start" size="xs" class="w-32"/>
|
|
<UInput type="date" v-model="dateRange.end" size="xs" class="w-32"/>
|
|
</div>
|
|
<div v-else class="text-xs text-gray-400 hidden sm:block italic">
|
|
{{ $dayjs(dateRange.start).format('DD.MM.') }} - {{ $dayjs(dateRange.end).format('DD.MM.YYYY') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #right>
|
|
<USelectMenu
|
|
icon="i-heroicons-adjustments-horizontal"
|
|
multiple
|
|
v-model="selectedFilters"
|
|
:options="['Nur offene anzeigen','Nur positive anzeigen','Nur negative anzeigen']"
|
|
@change="tempStore.modifyFilter('banking','main',selectedFilters)"
|
|
/>
|
|
</template>
|
|
</UDashboardToolbar>
|
|
|
|
<div class="overflow-y-auto relative" style="height: calc(100vh - 200px)">
|
|
<div v-if="loadingDocs" class="p-20 flex flex-col items-center justify-center">
|
|
<UProgress animation="carousel" class="w-1/3 mb-4" />
|
|
<span class="text-sm text-gray-500 italic">Bankbuchungen werden geladen...</span>
|
|
</div>
|
|
|
|
<table v-else class="w-full text-left border-collapse">
|
|
<thead class="sticky top-0 bg-white dark:bg-gray-900 z-10 shadow-sm">
|
|
<tr class="text-xs font-semibold text-gray-500 uppercase">
|
|
<th v-for="col in templateColumns" :key="col.key" class="p-4 border-b dark:border-gray-800">
|
|
{{ col.label }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-for="(row, index) in filteredRows" :key="row.id">
|
|
<tr v-if="shouldShowMonthDivider(row, index)">
|
|
<td colspan="6" class="bg-gray-50 dark:bg-gray-800/50 p-2 pl-4 text-sm font-bold text-primary-600 border-y dark:border-gray-800">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-calendar" class="w-4 h-4"/>
|
|
{{ $dayjs(row.valueDate).format('MMMM YYYY') }}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr
|
|
class="hover:bg-gray-50 dark:hover:bg-gray-800/30 cursor-pointer border-b dark:border-gray-800 text-sm group"
|
|
@click="router.push(`/banking/statements/edit/${row.id}`)"
|
|
>
|
|
<td class="p-4 text-[10px] text-gray-400 font-mono truncate max-w-[150px]">
|
|
{{ row.account ? bankaccounts.find(i => i.id === row.account)?.iban : "" }}
|
|
</td>
|
|
<td class="p-4 whitespace-nowrap">{{ $dayjs(row.valueDate).format("DD.MM.YY") }}</td>
|
|
<td class="p-4 font-semibold">
|
|
<span :class="row.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-rose-600 dark:text-rose-400'">
|
|
{{ displayCurrency(row.amount) }}
|
|
</span>
|
|
</td>
|
|
<td class="p-4 text-gray-400 italic text-xs">
|
|
{{ Number(calculateOpenSum(row)) !== 0 ? displayCurrency(calculateOpenSum(row)) : '-' }}
|
|
</td>
|
|
<td class="p-4 truncate max-w-[180px] font-medium">
|
|
{{ row.amount < 0 ? row.credName : row.debName }}
|
|
</td>
|
|
<td class="p-4 text-gray-500 truncate max-w-[350px] text-xs">
|
|
{{ row.text }}
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<tr v-if="filteredRows.length === 0">
|
|
<td colspan="6" class="p-32 text-center text-gray-400">
|
|
<div class="flex flex-col items-center">
|
|
<UIcon name="i-heroicons-magnifying-glass-circle" class="w-12 h-12 mb-3 opacity-20"/>
|
|
<p class="font-medium">Keine Buchungen gefunden</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<PageLeaveGuard :when="isSyncing"/>
|
|
</template> |