Manuelle Buchungen um volle Beschreibungsbreite und einklappbare Kontenlisten ergänzen

frontend/pages/accounting/manual-bookings.vue

@@ -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>