Move expense options into advanced booking

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

@@ -39,26 +39,8 @@ const ownaccounts = ref([])
 
 const loading = ref(true)
 
-const setup = async () => {
-  loading.value = true
-  if (route.params.id) {
-    itemInfo.value = await useEntities("bankstatements").selectSingle(route.params.id, "*, statementallocations(*, cd_id(*), ii_id(*))", undefined, undefined, true)
-
-    console.log(itemInfo.value)
-  }
-  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")
-
-  createddocuments.value = (await useEntities("createddocuments").select("*, statementallocations(*), customer(id,name)"))
+const rebuildDocumentLists = () => {
   const documents = createddocuments.value.filter(i => i.type === "invoices" || i.type === "advanceInvoices")
-  incominginvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(id,name)")).filter(i => i.state === "Gebucht")
-
-  accounts.value = (await useEntities("accounts").selectSpecial("*", "number", true))
-  ownaccounts.value = (await useEntities("ownaccounts").select())
-  customers.value = (await useEntities("customers").select())
-  vendors.value = (await useEntities("vendors").select())
 
   openDocuments.value = documents.filter(i => useSum().isOpenCreatedDocument(i, createddocuments.value))
   openDocuments.value = openDocuments.value.map(i => {
@@ -72,8 +54,38 @@ const setup = async () => {
 
   allocatedDocuments.value = documents.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
   allocatedIncomingInvoices.value = incominginvoices.value.filter(i => i.statementallocations.find(x => x.bankstatement === itemInfo.value.id))
+  openIncomingInvoices.value = incominginvoices.value.filter(i =>
+      !i.archived && i.statementallocations.reduce((n, {amount}) => n + amount, 0).toFixed(2) !== getInvoiceSum(i, false)
+  )
+}
 
-  openIncomingInvoices.value = (await useEntities("incominginvoices").select("*, statementallocations(*), vendor(*)")).filter(i => !i.archived && i.statementallocations.reduce((n, {amount}) => n + amount, 0).toFixed(2) !== getInvoiceSum(i, false))
+const setup = async () => {
+  loading.value = true
+  const [statement, documentItems, invoiceItems, accountItems, ownAccountItems, customerItems, vendorItems] = await Promise.all([
+    route.params.id
+        ? useEntities("bankstatements").selectSingle(route.params.id, "*, statementallocations(*, cd_id(*), ii_id(*))")
+        : 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()
+  ])
+
+  itemInfo.value = statement
+  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")
+
+  createddocuments.value = documentItems
+  incominginvoices.value = invoiceItems.filter(i => i.state === "Gebucht")
+  accounts.value = accountItems
+  ownaccounts.value = ownAccountItems
+  customers.value = customerItems
+  vendors.value = vendorItems
+  rebuildDocumentLists()
 
   if (itemInfo.value?.id) {
     statementSuggestions.value = await useFunctions().useBankingStatementSuggestions(itemInfo.value.id)
@@ -189,7 +201,17 @@ const saveAllocation = async (allocation) => {
   })
 
   if (res) {
-    await setup()
+    itemInfo.value.statementallocations.push(res)
+    if (res.createddocument) {
+      const document = createddocuments.value.find(item => item.id === res.createddocument)
+      document?.statementallocations.push(res)
+    }
+    if (res.incominginvoice) {
+      const invoice = incominginvoices.value.find(item => item.id === res.incominginvoice)
+      invoice?.statementallocations.push(res)
+    }
+    rebuildDocumentLists()
+    manualAllocationSum.value = calculateOpenSum.value
     accountToSave.value = null
     vendorAccountToSave.value = null
     customerAccountToSave.value = null
@@ -209,7 +231,15 @@ const removeAllocation = async (allocationId) => {
   await useNuxtApp().$api(`/api/banking/statements/${allocationId}`, {
     method: "DELETE"
   })
-  await setup()
+  itemInfo.value.statementallocations = itemInfo.value.statementallocations.filter(item => item.id !== allocationId)
+  createddocuments.value.forEach(document => {
+    document.statementallocations = document.statementallocations.filter(item => item.id !== allocationId)
+  })
+  incominginvoices.value.forEach(invoice => {
+    invoice.statementallocations = invoice.statementallocations.filter(item => item.id !== allocationId)
+  })
+  rebuildDocumentLists()
+  manualAllocationSum.value = calculateOpenSum.value
 }
 
 const searchString = ref(tempStore.searchStrings["bankstatementsedit"] || '')
@@ -669,13 +699,12 @@ setup()
                       <span class="font-mono text-xs text-gray-500 mr-2">{{ option.number }}</span> {{ option.label }}
                     </template>
                   </USelectMenu>
-                  <UTooltip text="Manuell Buchen">
                   <UButton
-                        icon="i-heroicons-plus"
+                      icon="i-heroicons-check"
+                      label="Buchen"
                       :disabled="!accountToSave"
                       @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, account: accountToSave, description: allocationDescription })"
                   />
-                  </UTooltip>
                 </div>
               </UFormField>
             </div>
@@ -688,7 +717,9 @@ setup()
             </div>
           </div>
 
-          <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-3">
+          <div v-if="showMoreWithoutRecipe"
+               class="mt-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
               <UFormField label="Aufwandsart" size="sm">
                 <USelectMenu
                     v-model="allocationBookingMode"
@@ -738,8 +769,7 @@ setup()
             />
           </div>
 
-          <div v-if="showMoreWithoutRecipe"
-               class="mt-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 grid grid-cols-1 md:grid-cols-3 gap-3">
+            <div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
               <USelectMenu :items="ownaccounts" value-key="id" label-key="name" v-model="ownAccountToSave"
                          :search-input="{ placeholder: 'Eigenes Konto' }" :filter-fields="['number','name']" placeholder="Eigenes Konto">
               <template #default>
@@ -763,6 +793,7 @@ setup()
                          @click="saveAllocation({bankstatement: itemInfo.id, amount: manualAllocationSum, ownaccount: ownAccountToSave ? ownAccountToSave : null, customer: customerAccountToSave ? customerAccountToSave : null, vendor: vendorAccountToSave ? vendorAccountToSave : null, description: allocationDescription })"/>
               </div>
             </div>
+          </div>
 
           <div v-if="allocationDescription" class="mt-2">
             <UInput v-model="allocationDescription" placeholder="Beschreibung für Buchung..." icon="i-heroicons-pencil"