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

Manuelle Buchungen um volle Beschreibungsbreite und einklappbare Kontenlisten ergänzen

Browse Source
This commit is contained in:
florianfederspiel
2026-04-23 17:33:35 +02:00
parent 0284ea8726
commit 7799cbce80
1 changed files with 47 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/pages/accounting/manual-bookings.vue
View File

@@ -12,6 +12,8 @@ const ownaccounts = ref([])
const bookings = ref([])
const debitSearch = ref("")
const creditSearch = ref("")
const expandedDebitGroups = ref([])
const expandedCreditGroups = ref([])
const DATEV_TAX_KEY_ITEMS = [
{ value: "", label: "Ohne Steuerschlüssel" },
@@ -99,6 +101,28 @@ const groupedCreditEntries = computed(() =>
})).filter((group) => group.entries.length > 0)
)
const isGroupExpanded = (side, groupKey) => {
const source = side === "debit" ? expandedDebitGroups.value : expandedCreditGroups.value
return source.includes(groupKey)
}
const toggleGroupExpanded = (side, groupKey) => {
const source = side === "debit" ? expandedDebitGroups.value : expandedCreditGroups.value
if (source.includes(groupKey)) {
if (side === "debit") expandedDebitGroups.value = source.filter((item) => item !== groupKey)
else expandedCreditGroups.value = source.filter((item) => item !== groupKey)
return
}
if (side === "debit") expandedDebitGroups.value = [...source, groupKey]
else expandedCreditGroups.value = [...source, groupKey]
}
const visibleEntries = (side, group) => {
if (group.entries.length <= 5 || isGroupExpanded(side, group.key)) return group.entries
return group.entries.slice(0, 5)
}
const allEntries = computed(() => entryGroups.value.flatMap((group) => group.entries))
const selectedDebit = computed(() => allEntries.value.find((item) => item.key === form.debit))
const selectedCredit = computed(() => allEntries.value.find((item) => item.key === form.credit))
@@ -176,6 +200,8 @@ const resetForm = () => {
form.description = ""
debitSearch.value = ""
creditSearch.value = ""
expandedDebitGroups.value = []
expandedCreditGroups.value = []
}
const saveBooking = async () => {
@@ -263,7 +289,7 @@ onMounted(loadData)
<div class="text-xs font-semibold uppercase tracking-wide text-emerald-800 dark:text-emerald-300">{{ group.label }}</div>
<div class="grid gap-2">
<button
v-for="entry in group.entries"
v-for="entry in visibleEntries('debit', group)"
:key="entry.key"
type="button"
class="rounded-lg border px-3 py-2 text-left transition"
@@ -278,6 +304,14 @@ onMounted(loadData)
</div>
</button>
</div>
<UButton
v-if="group.entries.length > 5"
size="xs"
color="neutral"
variant="ghost"
:label="isGroupExpanded('debit', group.key) ? 'Weniger anzeigen' : `${group.entries.length - 5} weitere anzeigen`"
@click="toggleGroupExpanded('debit', group.key)"
/>
</div>
</div>
</div>
@@ -296,7 +330,7 @@ onMounted(loadData)
<div class="text-xs font-semibold uppercase tracking-wide text-sky-800 dark:text-sky-300">{{ group.label }}</div>
<div class="grid gap-2">
<button
v-for="entry in group.entries"
v-for="entry in visibleEntries('credit', group)"
:key="entry.key"
type="button"
class="rounded-lg border px-3 py-2 text-left transition"
@@ -311,12 +345,20 @@ onMounted(loadData)
</div>
</button>
</div>
<UButton
v-if="group.entries.length > 5"
size="xs"
color="neutral"
variant="ghost"
:label="isGroupExpanded('credit', group.key) ? 'Weniger anzeigen' : `${group.entries.length - 5} weitere anzeigen`"
@click="toggleGroupExpanded('credit', group.key)"
/>
</div>
</div>
</div>
</div>
<div class="mt-6 grid gap-4 lg:grid-cols-[1fr_auto] lg:items-end">
<div class="mt-6 grid gap-4">
<div class="space-y-4">
<UAlert
v-if="selectedDebit && selectedCredit"
@@ -332,11 +374,11 @@ onMounted(loadData)
</UFormField>
</div>
<div class="flex flex-col items-stretch gap-2">
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<UBadge v-if="selectedTaxKey?.value" color="warning" variant="subtle">
Steuerschlüssel: {{ selectedTaxKey.label }}
</UBadge>
<UButton color="primary" :loading="saving" @click="saveBooking">
<UButton color="primary" :loading="saving" @click="saveBooking" class="sm:ml-auto">
Manuelle Buchung erstellen
</UButton>
</div>