Load bank booking list before suggestions

frontend/pages/banking/index.vue

@@ -27,6 +27,7 @@ const isSyncing = ref(false)
 const cashbookBookingModalOpen = ref(false)
 const savingCashbookBooking = ref(false)
 const loadingDocs = ref(true) // Startet im Ladezustand
+const loadingSuggestions = ref(true)
 const suggestionsModalOpen = ref(false)
 const selectedSuggestionRowId = ref(null)
 
@@ -80,12 +81,10 @@ const setDateRangeFieldToToday = (field) => {
   dateRange.value[field] = $dayjs().format('YYYY-MM-DD')
 }
 
-const setupPage = async () => {
+const loadSuggestionData = async () => {
-  loadingDocs.value = true
+  loadingSuggestions.value = true
   try {
-    const [statements, bankAccountItems, customerItems, vendorItems, entityBankItems, documentItems, invoiceItems] = await Promise.all([
+    const [customerItems, vendorItems, entityBankItems, documentItems, invoiceItems] = await Promise.all([
-      useEntities("bankstatements").select("*, statementallocations(*)", "valueDate", false),
-      useEntities("bankaccounts").select(),
       useEntities("customers").select(),
       useEntities("vendors").select(),
       useEntities("entitybankaccounts").select(),
@@ -93,11 +92,6 @@ const setupPage = async () => {
       useEntities("incominginvoices").select("*, statementallocations(*), vendor(*)")
     ])
 
-    bankstatements.value = statements
-    bankaccounts.value = (bankAccountItems || []).map((account) => ({
-      ...account,
-      displayLabel: getBankAccountLabel(account)
-    }))
     customers.value = customerItems
     vendors.value = vendorItems
     entitybankaccounts.value = entityBankItems
@@ -115,6 +109,28 @@ const setupPage = async () => {
 
     openIncomingInvoices.value = invoiceItems
         .filter(i => i.state === "Gebucht" && !i.archived && i.statementallocations.reduce((n, {amount}) => n + amount, 0).toFixed(2) !== getInvoiceSum(i, false))
+  } catch (err) {
+    console.error("Vorschlagsdaten konnten nicht geladen werden:", err)
+  } finally {
+    loadingSuggestions.value = false
+  }
+}
+
+const setupPage = async () => {
+  loadingDocs.value = true
+  const suggestionDataPromise = loadSuggestionData()
+
+  try {
+    const [statements, bankAccountItems] = await Promise.all([
+      useEntities("bankstatements").select("*, statementallocations(*)", "valueDate", false),
+      useEntities("bankaccounts").select()
+    ])
+
+    bankstatements.value = statements
+    bankaccounts.value = (bankAccountItems || []).map((account) => ({
+      ...account,
+      displayLabel: getBankAccountLabel(account)
+    }))
 
     const availableAccountIds = bankaccounts.value.map((account) => account.id)
     if (!filterAccountInitialized.value) {
@@ -140,6 +156,8 @@ const setupPage = async () => {
   } finally {
     loadingDocs.value = false
   }
+
+  void suggestionDataPromise
 }
 
 // Watcher für Schnellwahlen & Persistenz
@@ -586,6 +604,8 @@ onMounted(() => {
           color="primary"
           variant="soft"
           icon="i-heroicons-sparkles"
+          :loading="loadingSuggestions"
+          :disabled="loadingSuggestions"
           @click="suggestionsModalOpen = true"
       >
         Vorschläge

frontend/pages/banking/statements/[mode]/[[id]].vue

@@ -38,6 +38,7 @@ const accounts = ref([])
 const ownaccounts = ref([])
 
 const loading = ref(true)
+const loadingDocuments = ref(true)
 
 const rebuildDocumentLists = () => {
   const documents = createddocuments.value.filter(i => i.type === "invoices" || i.type === "advanceInvoices")
@@ -61,39 +62,56 @@ const rebuildDocumentLists = () => {
 
 const setup = async () => {
   loading.value = true
-  const [statement, documentItems, invoiceItems, accountItems, ownAccountItems, customerItems, vendorItems] = await Promise.all([
+  loadingDocuments.value = true
-    route.params.id
+
-        ? useEntities("bankstatements").selectSingle(route.params.id, "*, statementallocations(*, cd_id(*), ii_id(*))")
+  const supportingDataPromise = Promise.all([
-        : Promise.resolve(itemInfo.value),
     useEntities("createddocuments").select("*, statementallocations(*), customer(id,name)"),
     useEntities("incominginvoices").select("*, statementallocations(*), vendor(*)"),
-    useEntities("accounts").selectSpecial("*", "number", true),
     useEntities("ownaccounts").select(),
     useEntities("customers").select(),
     useEntities("vendors").select()
   ])
 
+  const [statement, accountItems] = await Promise.all([
+    route.params.id
+        ? useEntities("bankstatements").selectSingle(route.params.id, "*, statementallocations(*, cd_id(*), ii_id(*))")
+        : Promise.resolve(itemInfo.value),
+    useEntities("accounts").selectSpecial("*", "number", true)
+  ])
+
   itemInfo.value = statement
+  accounts.value = accountItems
   if (itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
 
   manualAllocationSum.value = calculateOpenSum.value
   allocationDepreciationStartDate.value = dayjs(itemInfo.value?.date || new Date()).format("YYYY-MM-DD")
+  loading.value = false
+
+  const suggestionsPromise = itemInfo.value?.id
+      ? useFunctions().useBankingStatementSuggestions(itemInfo.value.id)
+      : Promise.resolve({ suggestions: [] })
+
+  try {
+    const [documentItems, invoiceItems, ownAccountItems, customerItems, vendorItems] = await supportingDataPromise
 
     createddocuments.value = documentItems
     incominginvoices.value = invoiceItems.filter(i => i.state === "Gebucht")
-  accounts.value = accountItems
     ownaccounts.value = ownAccountItems
     customers.value = customerItems
     vendors.value = vendorItems
     rebuildDocumentLists()
-
+  } catch (error) {
-  if (itemInfo.value?.id) {
+    console.error("Offene Belege konnten nicht geladen werden:", error)
-    statementSuggestions.value = await useFunctions().useBankingStatementSuggestions(itemInfo.value.id)
+  } finally {
-  } else {
+    loadingDocuments.value = false
-    statementSuggestions.value = { suggestions: [] }
   }
 
-  loading.value = false
+  try {
+    statementSuggestions.value = await suggestionsPromise
+  } catch (error) {
+    console.error("Buchungsvorschläge konnten nicht geladen werden:", error)
+    statementSuggestions.value = { suggestions: [] }
+  }
 }
 
 const displayCurrency = (value, currency = "€") => {
@@ -819,6 +837,11 @@ setup()
 
           <div class="flex-1 overflow-y-auto p-4 space-y-6">
 
+            <div v-if="loadingDocuments" class="flex items-center justify-center gap-2 py-10 text-sm text-gray-500">
+              <UIcon name="i-heroicons-arrow-path" class="h-5 w-5 animate-spin"/>
+              Offene Belege werden geladen …
+            </div>
+
             <div v-if="Number(calculateOpenSum) !== 0 && (topEntitySuggestion || fallbackSuggestedDocuments.length > 0 || fallbackSuggestedIncomingInvoices.length > 0)" class="rounded-xl border border-primary-200 bg-primary-50/70 dark:bg-primary-900/10 dark:border-primary-800 p-4">
               <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                 <div v-if="topEntitySuggestion">
@@ -1035,7 +1058,7 @@ setup()
               </div>
             </div>
 
-            <div v-if="filteredDocuments.length === 0 && filteredIncomingInvoices.length === 0"
+            <div v-if="!loadingDocuments && filteredDocuments.length === 0 && filteredIncomingInvoices.length === 0"
                  class="text-center py-10 text-gray-400">
               <UIcon name="i-heroicons-magnifying-glass" class="w-8 h-8 mx-auto mb-2 opacity-50"/>
               <p>Keine passenden offenen Belege gefunden.</p>