FEDEO/frontend/components/email/EmailEntityLinks.vue

<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>