KI-AGENT: Mailantworten und Entitätsverknüpfungen ergänzen

frontend/components/email/EmailEntityLinks.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+type EntityLink = {
+  id: string
+  entityType: string
+  entityId: number
+  entityName: string
+  entityTypeLabel: string
+}
+
+const props = defineProps<{
+  messageId: string
+  entityLinks?: EntityLink[]
+}>()
+
+const emit = defineEmits<{
+  updated: [links: EntityLink[]]
+}>()
+
+const toast = useToast()
+const links = ref<EntityLink[]>([])
+const selectedEntityType = ref("customers")
+const selectedEntityId = ref<number | null>(null)
+const entityOptions = ref<Array<{ label: string; value: number }>>([])
+const loadingOptions = ref(false)
+const saving = ref(false)
+
+const entityTypes = [
+  { label: "Kunde", value: "customers" },
+  { label: "Lieferant", value: "vendors" },
+  { label: "Projekt", value: "projects" },
+  { label: "Objekt", value: "plants" },
+]
+
+watch(() => props.entityLinks, (value) => {
+  links.value = [...(value || [])]
+}, { immediate: true, deep: true })
+
+async function loadEntityOptions() {
+  loadingOptions.value = true
+  selectedEntityId.value = null
+
+  try {
+    const rows = await useEntities(selectedEntityType.value).select("*")
+    entityOptions.value = rows.map((row: any) => {
+      const number = row.customerNumber || row.vendorNumber || row.projectNumber
+      return {
+        label: number ? `${number} · ${row.name}` : row.name,
+        value: Number(row.id),
+      }
+    })
+  } catch (err: any) {
+    entityOptions.value = []
+    toast.add({
+      title: "Entitäten konnten nicht geladen werden",
+      description: err?.data?.error || err?.message,
+      color: "error",
+    })
+  } finally {
+    loadingOptions.value = false
+  }
+}
+
+async function addLink() {
+  if (!selectedEntityId.value) return
+
+  saving.value = true
+  try {
+    const response = await useNuxtApp().$api(`/api/email/messages/${props.messageId}/entity-links`, {
+      method: "POST",
+      body: {
+        entityType: selectedEntityType.value,
+        entityId: selectedEntityId.value,
+      },
+    })
+    links.value = response.entityLinks || []
+    emit("updated", links.value)
+    selectedEntityId.value = null
+    toast.add({ title: "E-Mail verknüpft", color: "success" })
+  } catch (err: any) {
+    toast.add({
+      title: "Verknüpfen fehlgeschlagen",
+      description: err?.data?.error || err?.message,
+      color: "error",
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+async function removeLink(link: EntityLink) {
+  saving.value = true
+  try {
+    const response = await useNuxtApp().$api(
+      `/api/email/messages/${props.messageId}/entity-links/${link.entityType}/${link.entityId}`,
+      { method: "DELETE" },
+    )
+    links.value = response.entityLinks || []
+    emit("updated", links.value)
+    toast.add({ title: "Verknüpfung entfernt", color: "success" })
+  } catch (err: any) {
+    toast.add({
+      title: "Entfernen fehlgeschlagen",
+      description: err?.data?.error || err?.message,
+      color: "error",
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+watch(selectedEntityType, loadEntityOptions, { immediate: true })
+</script>
+
+<template>
+  <div class="mt-4 rounded-lg border border-(--ui-border) bg-(--ui-bg-muted) p-3">
+    <div class="flex flex-wrap items-center gap-2">
+      <span class="text-sm font-medium">Verknüpft mit</span>
+      <UBadge
+        v-for="link in links"
+        :key="link.id"
+        color="primary"
+        variant="soft"
+        class="gap-1"
+      >
+        {{ link.entityTypeLabel }}: {{ link.entityName }}
+        <button
+          type="button"
+          class="ml-1 rounded hover:text-error"
+          :disabled="saving"
+          :aria-label="`Verknüpfung mit ${link.entityName} entfernen`"
+          @click="removeLink(link)"
+        >
+          <UIcon name="i-heroicons-x-mark" class="size-3.5" />
+        </button>
+      </UBadge>
+      <span v-if="!links.length" class="text-sm text-dimmed">Noch keine Zuordnung</span>
+    </div>
+
+    <div class="mt-3 flex flex-wrap items-center gap-2">
+      <USelectMenu
+        v-model="selectedEntityType"
+        :items="entityTypes"
+        value-key="value"
+        label-key="label"
+        size="sm"
+        class="w-36"
+      />
+      <USelectMenu
+        v-model="selectedEntityId"
+        :items="entityOptions"
+        value-key="value"
+        label-key="label"
+        size="sm"
+        class="min-w-64 flex-1"
+        placeholder="Entität auswählen"
+        :loading="loadingOptions"
+      />
+      <UButton
+        icon="i-heroicons-link"
+        size="sm"
+        :loading="saving"
+        :disabled="!selectedEntityId"
+        @click="addLink"
+      >
+        Verknüpfen
+      </UButton>
+    </div>
+  </div>
+</template>