3. Zwischenstand

frontend/pages/accounts/index.vue

@@ -198,7 +198,7 @@ setupPage()
       :columns="normalizeTableColumns(columns)"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      :on-select="(i) => router.push(`/accounts/show/${i.id}`)"
+      :on-select="(row) => router.push(`/accounts/show/${row.original.id}`)"
       :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
   >
     <template #allocations-cell="{row}">

frontend/pages/accounts/show/[id].vue

@@ -1,62 +1,44 @@
 <script setup>
 
-import dayjs from "dayjs";
-
 const route = useRoute()
 const router = useRouter()
 
 const itemInfo = ref(null)
 const statementallocations = ref([])
 const incominginvoices = ref([])
+const currentAccountId = computed(() => String(route.params.id))
+const sameAccount = (value) => String(value ?? "") === currentAccountId.value
 
 const setup = async () => {
   itemInfo.value = (await useEntities("accounts").selectSpecial("*")).find(i => i.id === Number(route.params.id))
-  statementallocations.value = (await useEntities("statementallocations").select("*, bs_id(*)")).filter(i => i.account === Number(route.params.id))
-  incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)")).filter(i => i.accounts.find(x => x.account === Number(route.params.id)))
+  statementallocations.value = (await useEntities("statementallocations").select("*, bankstatement(*)"))
+      .filter((allocation) => sameAccount(allocation.account?.id || allocation.account))
+  incominginvoices.value = (await useEntities("incominginvoices").select("*, vendor(*)"))
+      .filter((invoice) => (invoice.accounts || []).some((account) => sameAccount(account.account?.id || account.account)))
 }
 
 setup()
 
-const selectAllocation = (allocation) => {
-  if(allocation.type === "statementallocation") {
-    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
-  } else if(allocation.type === "incominginvoice") {
-    router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
-  }
-}
-
 const renderedAllocations = computed(() => {
+  const statementRows = statementallocations.value.map((allocation) => ({
+    ...allocation,
+    type: "statementallocation",
+    amount: Number(allocation.amount || 0)
+  }))
 
-  let tempstatementallocations = statementallocations.value.map(i => {
-    return {
-      ...i,
-      type: "statementallocation",
-      date: i.bs_id.date,
-      partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
-    }
+  const incomingInvoiceRows = incominginvoices.value.flatMap((invoice) => {
+    return (invoice.accounts || [])
+        .filter((account) => sameAccount(account.account?.id || account.account))
+        .map((account, index) => ({
+          id: `${invoice.id}-${index}`,
+          incominginvoiceid: invoice.id,
+          type: "incominginvoice",
+          amount: Number(account.amountGross || account.amountNet || 0),
+          expense: invoice.expense
+        }))
   })
 
-
-  let incominginvoicesallocations = []
-
-  incominginvoices.value.forEach(i => {
-
-    incominginvoicesallocations.push(...i.accounts.filter(x => x.account == route.params.id).map(x => {
-      return {
-        ...x,
-        incominginvoiceid: i.id,
-        type: "incominginvoice",
-        amount: x.amountGross ? x.amountGross : x.amountNet,
-        date: i.date,
-        partner: i.vendor.name,
-        description: i.description,
-        color: i.expense ? "red" : "green",
-        expense: i.expense
-      }
-    }))
-  })
-
-  return [...tempstatementallocations, ... incominginvoicesallocations]
+  return [...statementRows, ...incomingInvoiceRows]
 })
 
 const saldo = computed(() => {
@@ -135,25 +117,12 @@ const saldo = computed(() => {
           </div>
         </UCard>
         <UCard class="mt-5" v-if="item.label === 'Buchungen'">
-          <UTable
-              v-if="statementallocations"
-            :data="renderedAllocations"
-              :columns="normalizeTableColumns([{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}])"
-              :on-select="(i) => selectAllocation(i)"
-              :empty="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
-          >
-            <template #amount-cell="{row}">
-              <span class="text-right text-rose-600" v-if="row.original.amount < 0 || row.original.color === 'red'">{{useCurrency(row.original.amount)}}</span>
-              <span class="text-right text-primary-500" v-else-if="row.original.amount > 0 || row.original.color === 'green'">{{useCurrency(row.original.amount)}}</span>
-              <span v-else>{{useCurrency(row.original.amount)}}</span>
-            </template>
-            <template #date-cell="{row}">
-              {{row.original.date ? dayjs(row.original.date).format('DD.MM.YYYY') : ''}}
-            </template>
-            <template #description-cell="{row}">
-              {{row.original.description ? row.original.description : ''}}
-            </template>
-          </UTable>
+          <EntityShowSubOwnAccountsStatements
+              v-if="itemInfo"
+              :item="itemInfo"
+              top-level-type="accounts"
+              platform="desktop"
+          />
         </UCard>
       </template>
     </UTabs>