KI-AGENT: Mail-Editor übersichtlicher gestalten

frontend/pages/email/new.vue

@@ -18,12 +18,17 @@ const emailAccounts = ref([])
 const preloadedContent = ref("")
 const loadedDocuments = ref([])
 const loaded = ref(false)
+const sending = ref(false)
 const noAccountsPresent = ref(false)
 const sourceMessage = ref(null)
 const recipientOptions = ref([])
 const selectedRecipient = ref(null)
 const loadingRecipients = ref(false)
 const preferredCustomerId = ref(null)
+const showCc = ref(Boolean(route.query.cc))
+const showBcc = ref(Boolean(route.query.bcc))
+const attachmentInput = ref(null)
+const selectedAttachmentFiles = ref([])
 const composeMode = computed(() => {
   const mode = String(route.query.mode || "")
   return ["reply", "replyAll", "forward"].includes(mode) ? mode : "new"
@@ -33,6 +38,20 @@ const pageTitle = computed(() => ({
   replyAll: "Allen antworten",
   forward: "E-Mail weiterleiten",
 }[composeMode.value] || "Neue E-Mail"))
+const canSend = computed(() => Boolean(
+    String(emailData.value.to || "").trim()
+    && String(emailData.value.subject || "").trim()
+    && emailData.value.account
+))
+const attachmentCount = computed(() =>
+    selectedAttachmentFiles.value.length
+    + loadedDocuments.value.length
+    + (composeMode.value === "forward" ? sourceMessage.value?.attachments?.length || 0 : 0)
+)
+const attachmentLabel = computed(() => attachmentCount.value === 1
+    ? "1 Anhang"
+    : `${attachmentCount.value} Anhänge`
+)
 
 const escapeHtml = (value = "") => String(value)
     .replace(/&/g, "&")
@@ -339,15 +358,33 @@ const contentChanged = (content) => {
   emailData.value.text = content.text
 }
 
-const selectedAttachments = ref([])
-const renderAttachments = () => {
-  selectedAttachments.value = Array.from(document.getElementById("inputAttachments").files).map(i => {
-    return {
-      filename: i.name,
-      type: i.type
-    }})
+const fileKey = file => `${file.name}:${file.size}:${file.lastModified}`
+
+const addAttachments = (files) => {
+  const attachments = [...selectedAttachmentFiles.value]
+  const existingKeys = new Set(attachments.map(fileKey))
+
+  Array.from(files || []).forEach(file => {
+    if (!existingKeys.has(fileKey(file))) {
+      attachments.push(file)
+      existingKeys.add(fileKey(file))
+    }
+  })
+
+  selectedAttachmentFiles.value = attachments
+  if (attachmentInput.value) attachmentInput.value.value = ""
 }
 
+const renderAttachments = event => addAttachments(event.target.files)
+const dropAttachments = event => addAttachments(event.dataTransfer?.files)
+const removeAttachment = index => selectedAttachmentFiles.value.splice(index, 1)
+const removeLoadedDocument = index => loadedDocuments.value.splice(index, 1)
+
+const formatFileSize = (bytes = 0) => {
+  if (!bytes) return "0 KB"
+  if (bytes < 1024 * 1024) return `${Math.ceil(bytes / 1024)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1).replace(".", ",")} MB`
+}
 
 
 
@@ -367,20 +404,18 @@ function blobToBase64(blob) {
 }
 
 const sendEmail = async () => {
-  loaded.value = false
+  if (!canSend.value || sending.value) return
+  sending.value = true
 
-  let body  = {
+  try {
+    const body = {
       ...emailData.value,
       attachments: [],
       sourceMessageId: sourceMessage.value?.id,
       composeMode: composeMode.value === "new" ? undefined : composeMode.value,
     }
 
-
-
-
-
-  for await (const file of Array.from(document.getElementById("inputAttachments").files)) {
+    for await (const file of selectedAttachmentFiles.value) {
       body.attachments.push({
         filename: file.name,
         content: await toBase64(file),
@@ -391,12 +426,10 @@ const sendEmail = async () => {
     }
 
     for await (const doc of loadedDocuments.value) {
-
-
       const res = await useFiles().downloadFile(doc.id, null, true)
 
       body.attachments.push({
-      filename: doc.path.split("/")[doc.path.split("/").length -1],
+        filename: doc.path.split("/").pop(),
         content: await blobToBase64(res),
         contentType: res.type,
         encoding: "base64",
@@ -404,10 +437,9 @@ const sendEmail = async () => {
       })
     }
 
-  try {
     const res = await useNuxtApp().$api("/api/email/send",{
       method: "POST",
-      body: body,
+      body,
     })
 
     if(!res.success) {
@@ -423,7 +455,7 @@ const sendEmail = async () => {
       color: "error",
     })
   } finally {
-    loaded.value = true
+    sending.value = false
   }
 
 }
@@ -432,54 +464,116 @@ const sendEmail = async () => {
 </script>
 
 <template>
-
-  <div v-if="noAccountsPresent" class="mx-auto mt-5 flex flex-col justify-center">
-    <span class="font-bold text-2xl">Keine E-Mail Konten vorhanden</span>
+  <div v-if="noAccountsPresent" class="flex min-h-[70vh] items-center justify-center p-6">
+    <div class="max-w-md rounded-xl border border-(--ui-border) bg-(--ui-bg) p-8 text-center shadow-sm">
+      <div class="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary">
+        <UIcon name="i-heroicons-envelope" class="size-6" />
+      </div>
+      <h1 class="text-xl font-semibold">Noch kein E-Mail-Konto eingerichtet</h1>
+      <p class="mt-2 text-sm text-dimmed">
+        Richte zuerst ein Konto ein, um E-Mails direkt aus FEDEO zu versenden.
+      </p>
       <UButton
-      @click="router.push(`/settings/emailaccounts`)"
-      class="mx-auto mt-5"
+          icon="i-heroicons-plus"
+          class="mt-5"
+          @click="router.push('/settings/emailaccounts')"
       >
-      + E-Mail Konto
+        E-Mail-Konto einrichten
       </UButton>
     </div>
+  </div>
   <div v-else>
-    <UProgress animation="carousel" v-if="!loaded" class="mt-5 w-2/3 mx-auto"/>
+    <UProgress v-if="!loaded" animation="carousel" class="mx-auto mt-5 w-2/3" />
 
     <div v-else>
-      <UDashboardNavbar
-          :title="pageTitle"
-      >
+      <UDashboardNavbar :title="pageTitle">
+        <template #leading>
+          <UButton
+              icon="i-heroicons-arrow-left"
+              color="neutral"
+              variant="ghost"
+              aria-label="Zurück zum Postfach"
+              @click="router.push('/email')"
+          />
+        </template>
         <template #right>
           <UButton
+              color="neutral"
+              variant="ghost"
+              @click="router.push('/email')"
+          >
+            Verwerfen
+          </UButton>
+          <UButton
+              icon="i-heroicons-paper-airplane"
               @click="sendEmail"
-              :disabled="!emailData.to || !emailData.subject"
+              :disabled="!canSend"
+              :loading="sending"
           >
             Senden
           </UButton>
         </template>
-
       </UDashboardNavbar>
 
+      <main class="compose-scroll overflow-y-auto bg-(--ui-bg-muted)/40">
+        <div class="mx-auto flex w-full max-w-5xl flex-col gap-4 px-4 py-5 sm:px-6">
+          <div v-if="composeMode !== 'new'" class="flex items-center gap-2 text-sm text-dimmed">
+            <UBadge color="primary" variant="subtle">
+              {{ composeMode === 'forward' ? 'Weiterleitung' : composeMode === 'replyAll' ? 'Antwort an alle' : 'Antwort' }}
+            </UBadge>
+            <span class="truncate">{{ sourceMessage?.subject || 'Ursprüngliche E-Mail' }}</span>
+          </div>
 
+          <UCard>
+            <template #header>
+              <div class="flex items-center gap-3">
+                <div class="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                  <UIcon name="i-heroicons-user-group" class="size-5" />
+                </div>
+                <div>
+                  <h2 class="font-semibold">Absender und Empfänger</h2>
+                  <p class="text-xs text-dimmed">Versandkonto und Adressaten festlegen</p>
+                </div>
+              </div>
+            </template>
 
-
-      <div class="scrollContainer mt-3">
-        <div class="flex-col flex w-full">
-          <UFormField
-              label="Absender"
-          >
+            <div class="space-y-5">
+              <UFormField label="Absender" required>
                 <USelectMenu
+                    v-model="emailData.account"
                     :items="emailAccounts"
                     label-key="displayName"
                     value-key="id"
-                v-model="emailData.account"
+                    class="w-full"
                 />
               </UFormField>
-          <USeparator class="my-3"/>
-          <UFormField
-              label="Empfänger"
+
+              <div>
+                <div class="mb-1.5 flex items-center justify-between gap-3">
+                  <label class="text-sm font-medium">Empfänger <span class="text-error">*</span></label>
+                  <div class="flex items-center gap-1">
+                    <UButton
+                        v-if="!showCc"
+                        size="xs"
+                        color="neutral"
+                        variant="ghost"
+                        @click="showCc = true"
                     >
-            <div class="grid gap-2 md:grid-cols-[minmax(260px,0.9fr)_minmax(320px,1.1fr)]">
+                      CC
+                    </UButton>
+                    <UButton
+                        v-if="!showBcc"
+                        size="xs"
+                        color="neutral"
+                        variant="ghost"
+                        @click="showBcc = true"
+                    >
+                      BCC
+                    </UButton>
+                  </div>
+                </div>
+
+                <div class="grid gap-2 lg:grid-cols-[minmax(280px,0.9fr)_minmax(320px,1.1fr)]">
                   <USelectMenu
                       v-model="selectedRecipient"
                       :items="recipientOptions"
@@ -487,141 +581,222 @@ const sendEmail = async () => {
                       label-key="label"
                       :loading="loadingRecipients"
                       :search-input="{ placeholder: 'Kunde, Ansprechpartner oder E-Mail suchen' }"
-                  placeholder="Aus Kunden und Ansprechpartnern wählen"
+                      placeholder="Adresse aus FEDEO wählen"
+                      icon="i-heroicons-address-book"
                       class="w-full"
                       @update:model-value="selectRecipient"
                   />
                   <UInput
-                  class="w-full"
                       v-model="emailData.to"
+                      icon="i-heroicons-envelope"
                       placeholder="E-Mail-Adresse oder mehrere Adressen"
+                      class="w-full"
                       @update:model-value="selectedRecipient = null"
                   />
                 </div>
-            <p class="mt-1 text-xs text-dimmed">
-              Passende Adressen zum vorausgefüllten Kunden werden zuerst angezeigt. Freie Eingaben bleiben möglich.
+                <p class="mt-1.5 text-xs text-dimmed">
+                  Passende Adressen zum vorausgefüllten Kunden stehen oben. Mehrere Adressen mit Komma trennen.
                 </p>
-          </UFormField>
-          <UFormField
-              label="Kopie"
-          >
+              </div>
+
+              <UFormField v-if="showCc" label="Kopie (CC)">
+                <div class="flex gap-2">
                   <UInput
-                class="w-full my-1"
                       v-model="emailData.cc"
+                      icon="i-heroicons-envelope"
+                      placeholder="E-Mail-Adressen für eine Kopie"
+                      class="w-full"
                   />
+                  <UButton
+                      icon="i-heroicons-x-mark"
+                      color="neutral"
+                      variant="ghost"
+                      aria-label="CC ausblenden"
+                      @click="emailData.cc = null; showCc = false"
+                  />
+                </div>
               </UFormField>
-          <UFormField
-              label="Blindkopie"
-          >
+
+              <UFormField v-if="showBcc" label="Blindkopie (BCC)">
+                <div class="flex gap-2">
                   <UInput
-                class="w-full my-1"
-                placeholder=""
                       v-model="emailData.bcc"
+                      icon="i-heroicons-envelope"
+                      placeholder="Verborgene Empfänger"
+                      class="w-full"
                   />
+                  <UButton
+                      icon="i-heroicons-x-mark"
+                      color="neutral"
+                      variant="ghost"
+                      aria-label="BCC ausblenden"
+                      @click="emailData.bcc = null; showBcc = false"
+                  />
+                </div>
               </UFormField>
-          <UFormField
-              label="Betreff"
-          >
+
+              <UFormField label="Betreff" required>
                 <UInput
-                class="w-full my-1"
                     v-model="emailData.subject"
+                    icon="i-heroicons-pencil-square"
+                    placeholder="Worum geht es in dieser E-Mail?"
+                    class="w-full"
                 />
               </UFormField>
             </div>
-        <USeparator class="my-3"/>
-        <div id="parentAttachments" class="flex flex-col justify-center mt-3">
-          <span class="font-medium mb-2 text-xl">Anhänge</span>
-          <!--        <UIcon
-                      name="i-heroicons-paper-clip"
-                      class="mx-auto w-10 h-10"
-                  />
-                  <span class="text-center text-2xl">Anhänge hochladen</span>-->
-          <UInput
-              id="inputAttachments"
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <div class="flex flex-wrap items-center justify-between gap-3">
+                <div class="flex items-center gap-3">
+                  <div class="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                    <UIcon name="i-heroicons-paper-clip" class="size-5" />
+                  </div>
+                  <div>
+                    <div class="flex items-center gap-2">
+                      <h2 class="font-semibold">Anhänge</h2>
+                      <UBadge v-if="attachmentCount" color="neutral" variant="subtle">{{ attachmentCount }}</UBadge>
+                    </div>
+                    <p class="text-xs text-dimmed">Dateien und FEDEO-Dokumente mitsenden</p>
+                  </div>
+                </div>
+                <UButton
+                    icon="i-heroicons-plus"
+                    color="neutral"
+                    variant="soft"
+                    @click="attachmentInput?.click()"
+                >
+                  Dateien auswählen
+                </UButton>
+              </div>
+            </template>
+
+            <input
+                ref="attachmentInput"
                 type="file"
                 multiple
+                class="hidden"
                 @change="renderAttachments"
-          />
-          <ul class="mx-5 mt-3">
-            <li
-                class="list-disc"
-                v-for="file in selectedAttachments"
-            > Datei - {{file.filename}}</li>
-            <li
-                class="list-disc"
-                v-for="doc in loadedDocuments"
             >
-              <span v-if="doc.createddocument">Dokument - {{doc.createddocument.documentNumber}}</span>
-            </li>
-            <li
-                v-if="composeMode === 'forward' && sourceMessage?.attachments?.length"
-                class="list-disc"
-            >
-              {{ sourceMessage.attachments.length }} Originalanhang/Originalanhänge werden übernommen
-            </li>
-          </ul>
 
+            <div
+                class="rounded-lg border border-dashed border-(--ui-border-accented) px-4 py-5 transition-colors hover:border-primary/60 hover:bg-primary/5"
+                @dragover.prevent
+                @drop.prevent="dropAttachments"
+            >
+              <div v-if="!attachmentCount" class="text-center">
+                <UIcon name="i-heroicons-arrow-up-tray" class="mx-auto size-7 text-dimmed" />
+                <p class="mt-2 text-sm font-medium">Dateien hier ablegen</p>
+                <p class="text-xs text-dimmed">oder über „Dateien auswählen“ hinzufügen</p>
               </div>
 
+              <div v-else class="space-y-2">
+                <div
+                    v-for="(file, index) in selectedAttachmentFiles"
+                    :key="fileKey(file)"
+                    class="flex items-center gap-3 rounded-md border border-(--ui-border) bg-(--ui-bg) px-3 py-2"
+                >
+                  <UIcon name="i-heroicons-document" class="size-5 shrink-0 text-primary" />
+                  <div class="min-w-0 flex-1">
+                    <p class="truncate text-sm font-medium">{{ file.name }}</p>
+                    <p class="text-xs text-dimmed">{{ formatFileSize(file.size) }}</p>
+                  </div>
+                  <UButton
+                      icon="i-heroicons-x-mark"
+                      size="xs"
+                      color="neutral"
+                      variant="ghost"
+                      :aria-label="`${file.name} entfernen`"
+                      @click="removeAttachment(index)"
+                  />
+                </div>
+
+                <div
+                    v-for="(doc, index) in loadedDocuments"
+                    :key="`document-${doc.id}`"
+                    class="flex items-center gap-3 rounded-md border border-(--ui-border) bg-(--ui-bg) px-3 py-2"
+                >
+                  <UIcon name="i-heroicons-document-text" class="size-5 shrink-0 text-primary" />
+                  <div class="min-w-0 flex-1">
+                    <p class="truncate text-sm font-medium">
+                      {{ doc.createddocument?.title || doc.path?.split('/').pop() || 'FEDEO-Dokument' }}
+                    </p>
+                    <p class="text-xs text-dimmed">
+                      {{ doc.createddocument?.documentNumber ? `Dokument ${doc.createddocument.documentNumber}` : 'FEDEO-Dokument' }}
+                    </p>
+                  </div>
+                  <UBadge color="primary" variant="subtle">Verknüpft</UBadge>
+                  <UButton
+                      icon="i-heroicons-x-mark"
+                      size="xs"
+                      color="neutral"
+                      variant="ghost"
+                      aria-label="FEDEO-Dokument entfernen"
+                      @click="removeLoadedDocument(index)"
+                  />
+                </div>
+
+                <div
+                    v-if="composeMode === 'forward' && sourceMessage?.attachments?.length"
+                    class="flex items-center gap-3 rounded-md border border-(--ui-border) bg-(--ui-bg) px-3 py-2"
+                >
+                  <UIcon name="i-heroicons-arrow-uturn-right" class="size-5 shrink-0 text-primary" />
+                  <p class="flex-1 text-sm">
+                    {{ sourceMessage.attachments.length }} Originalanhang/Originalanhänge werden übernommen
+                  </p>
+                  <UBadge color="neutral" variant="subtle">Original</UBadge>
+                </div>
+              </div>
+            </div>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <div class="flex items-center gap-3">
+                <div class="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                  <UIcon name="i-heroicons-pencil" class="size-5" />
+                </div>
+                <div>
+                  <h2 class="font-semibold">Nachricht</h2>
+                  <p class="text-xs text-dimmed">Text der E-Mail bearbeiten</p>
+                </div>
+              </div>
+            </template>
+
             <EmailTiptapEditor
-            class="mt-3"
                 @updateContent="contentChanged"
                 :preloadedContent="preloadedContent"
             />
+          </UCard>
+
+          <div class="sticky bottom-0 z-10 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-(--ui-border) bg-(--ui-bg)/95 px-4 py-3 shadow-lg backdrop-blur">
+            <div class="flex items-center gap-2 text-sm text-dimmed">
+              <UIcon name="i-heroicons-paper-clip" class="size-4" />
+              <span>{{ attachmentCount ? attachmentLabel : 'Keine Anhänge' }}</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <UButton color="neutral" variant="ghost" @click="router.push('/email')">
+                Verwerfen
+              </UButton>
+              <UButton
+                  icon="i-heroicons-paper-airplane"
+                  :disabled="!canSend"
+                  :loading="sending"
+                  @click="sendEmail"
+              >
+                E-Mail senden
+              </UButton>
             </div>
           </div>
         </div>
-
-
-
-
+      </main>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-
-#parentAttachments {
-  border: 1px dashed #69c350;
-  border-radius: 10px;
-  padding: 1em;
+.compose-scroll {
+  height: calc(100vh - 64px);
 }
-
-
-#inputAttachments {
-  /*
-  display: none;
-  */
-  display: inline-block;
-  cursor: pointer;
-  opacity: 100;/*
-  width: 100%;
-  height: 5%;
-  position: relative;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;*/
-}
-
-#inputAttachments::file-selector-button {
-  background-color: white;
-  border: 1px solid #69c350;
-  border-radius: 5px;
-  padding: 5px 10px 5px 10px;
-}
-
-.fileListItem {
-  border: 1px solid #69c350;
-  border-radius: 5px;
-  padding: .5rem;
-}
-
-.scrollContainer {
-  overflow-y: scroll;
-  padding-left: 1em;
-  padding-right: 1em;
-  height: 90vh;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
 </style>