Ausgangsbeleg-Toolbar aufräumen #110

Gruppiert Verknüpfungen in ein Dropdown und lädt Bankbuchungen für Ausgangsbelege gezielt mit Bankstatement-Relation nach, damit das Bankbuchungsdatum korrekt angezeigt wird.

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

@@ -24,15 +24,27 @@ const portalReleaseLoading = ref(false)
 const bankBookingModalOpen = ref(false)
 const portalEligibleTypes = ["invoices", "advanceInvoices", "cancellationInvoices"]
 
+const loadStatementAllocations = async () => {
+  if (!itemInfo.value?.id) return
+
+  const statementAllocations = await useEntities("statementallocations").select("*, bankstatement(*)")
+  itemInfo.value.statementallocations = statementAllocations.filter((allocation) => {
+    const createdDocumentId = allocation.createddocument?.id || allocation.createddocument
+
+    return String(createdDocumentId) === String(itemInfo.value.id)
+  })
+}
+
 const setupPage = async () => {
   if(route.params) {
-    if(route.params.id) itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,"*,files(*),linkedDocument(*), statementallocations(*, bs_id(*))")
+    if(route.params.id) {
+      itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,"*,files(*),linkedDocument(*)")
+      await loadStatementAllocations()
+    }
 
     if(itemInfo.value.type === "invoices"){
       const createddocuments = await useEntities("createddocuments").select()
-      console.log(createddocuments)
       links.value = createddocuments.filter(i => i.createddocument?.id === itemInfo.value.id)
-      console.log(links.value)
     }
 
     linkedDocument.value = await useFiles().selectDocument(itemInfo.value.files[0].id)
@@ -61,6 +73,85 @@ const bankBookingDateLabel = computed(() => {
 
   return bankBookingDates.value.map(formatDate).join(", ")
 })
+const linkedDocumentLabel = (document) => {
+  const documentType = dataStore.documentTypesForCreation[document.type]?.labelSingle || "Dokument"
+
+  return `${documentType} - ${document.documentNumber || document.title || document.id}`
+}
+const linkedItems = computed(() => {
+  const items = []
+
+  if(itemInfo.value.project) {
+    items.push({
+      label: "Projekt",
+      icon: "i-heroicons-link",
+      onSelect: () => router.push(`/standardEntity/projects/show/${itemInfo.value.project?.id}`)
+    })
+  }
+
+  if(itemInfo.value.customer) {
+    items.push({
+      label: "Kunde",
+      icon: "i-heroicons-link",
+      onSelect: () => router.push(`/standardEntity/customers/show/${itemInfo.value.customer?.id}`)
+    })
+  }
+
+  if(itemInfo.value.plant) {
+    items.push({
+      label: "Objekt",
+      icon: "i-heroicons-link",
+      onSelect: () => router.push(`/standardEntity/plants/show/${itemInfo.value.plant?.id}`)
+    })
+  }
+
+  if(itemInfo.value.contract) {
+    items.push({
+      label: "Vertrag",
+      icon: "i-heroicons-link",
+      onSelect: () => router.push(`/standardEntity/contracts/show/${itemInfo.value.contract?.id}`)
+    })
+  }
+
+  if(itemInfo.value.contact) {
+    items.push({
+      label: "Ansprechpartner",
+      icon: "i-heroicons-link",
+      onSelect: () => router.push(`/standardEntity/contacts/show/${itemInfo.value.contact?.id}`)
+    })
+  }
+
+  if(itemInfo.value.createddocument) {
+    items.push({
+      label: linkedDocumentLabel(itemInfo.value.createddocument),
+      icon: "i-heroicons-document-duplicate",
+      onSelect: () => router.push(`/createDocument/show/${itemInfo.value.createddocument.id}`)
+    })
+  }
+
+  ;(itemInfo.value.createddocuments || []).forEach((document) => {
+    items.push({
+      label: linkedDocumentLabel(document),
+      icon: "i-heroicons-document-duplicate",
+      onSelect: () => router.push(`/createDocument/show/${document.id}`)
+    })
+  })
+
+  if(itemInfo.value.statementallocations?.length > 0) {
+    items.push({
+      label: "Bankbuchungen öffnen",
+      icon: "i-heroicons-building-library",
+      onSelect: openBankstatements
+    })
+    items.push({
+      label: "Bankdetails anzeigen",
+      icon: "i-heroicons-calendar-days",
+      onSelect: () => { bankBookingModalOpen.value = true }
+    })
+  }
+
+  return [items]
+})
 
 const openEmail = () => {
   if(["invoices","advanceInvoices"].includes(itemInfo.value.type)){
@@ -164,71 +255,19 @@ const togglePortalRelease = async () => {
         </UButton>
       </UTooltip>
 
-      <UButton
-          v-if="itemInfo.project"
-          @click="router.push(`/standardEntity/projects/show/${itemInfo.project?.id}`)"
-          icon="i-heroicons-link"
-          variant="outline"
+      <UDropdownMenu
+          v-if="linkedItems[0].length > 0"
+          :items="linkedItems"
+          :content="{ align: 'start' }"
       >
-        Projekt
-      </UButton>
-      <UButton
-          v-if="itemInfo.customer"
-          @click="router.push(`/standardEntity/customers/show/${itemInfo.customer?.id}`)"
-          icon="i-heroicons-link"
-          variant="outline"
-      >
-        Kunde
-      </UButton>
-      <UButton
-          v-if="itemInfo.plant"
-          @click="router.push(`/standardEntity/plants/show/${itemInfo.plant?.id}`)"
-          icon="i-heroicons-link"
-          variant="outline"
-      >
-        Objekt
-      </UButton>
-      <UButton
-          v-if="itemInfo.contract"
-          @click="router.push(`/standardEntity/contracts/show/${itemInfo.contract?.id}`)"
-          icon="i-heroicons-link"
-          variant="outline"
-      >
-        Vertrag
-      </UButton>
-      <UButton
-          v-if="itemInfo.contact"
-          @click="router.push(`/standardEntity/contacts/show/${itemInfo.contact?.id}`)"
-          icon="i-heroicons-link"
-          variant="outline"
-      >
-        Ansprechpartner
-      </UButton>
-      <UButton
-          v-if="itemInfo.createddocument"
-          @click="router.push(`/createDocument/show/${itemInfo.createddocument.id}`)"
-          icon="i-heroicons-link"
-          variant="outline"
-      >
-        {{dataStore.documentTypesForCreation[itemInfo.createddocument.type].labelSingle}} - {{itemInfo.createddocument.documentNumber}}
-      </UButton>
-      <UButton
-          v-for="item in itemInfo.createddocuments"
-          v-if="itemInfo.createddocuments"
-          @click="router.push(`/createDocument/show/${item.id}`)"
-          icon="i-heroicons-link"
-          variant="outline"
-      >
-        {{dataStore.documentTypesForCreation[item.type].labelSingle}} - {{item.documentNumber}}
-      </UButton>
-      <UButton
-          v-if="itemInfo.statementallocations?.length > 0"
-          @click="openBankstatements"
-          icon="i-heroicons-link"
-          variant="outline"
-      >
-        Bankbuchungen
-      </UButton>
+        <UButton
+            icon="i-heroicons-link"
+            variant="outline"
+            trailing-icon="i-heroicons-chevron-down-20-solid"
+        >
+          Verknüpfungen
+        </UButton>
+      </UDropdownMenu>
       <UBadge
           v-if="itemInfo.statementallocations?.length > 0"
           color="primary"
@@ -237,14 +276,6 @@ const togglePortalRelease = async () => {
       >
         Bankbuchungsdatum: {{ bankBookingDateLabel }}
       </UBadge>
-      <UButton
-          v-if="itemInfo.statementallocations?.length > 0"
-          icon="i-heroicons-calendar-days"
-          variant="outline"
-          @click="bankBookingModalOpen = true"
-      >
-        Bankdetails
-      </UButton>
 
     </template>
   </UDashboardToolbar>