FEDEO/pages/email/new.vue

<script setup>

const supabase = useSupabaseClient()
const dataStore = useDataStore()
const route = useRoute()
const router = useRouter()
const toast = useToast()

const emailData = ref({
  to:"",
  cc:null,
  bcc: null,
  subject: "",
  html: "",
  text: "",
  account: "",
})

const emailAccounts = ref([])
const preloadedContent = ref("")
const loadedDocuments = ref([])
const loaded = ref(false)
const noAccountsPresent = ref(false)
const setupPage = async () => {
  emailAccounts.value = await useSupabaseSelect("emailAccounts")

  if(emailAccounts.value.length === 0) {
    noAccountsPresent.value = true
  } else {
    emailData.value.account = emailAccounts.value[0].id

    preloadedContent.value = `<p></p><p></p><p></p>${dataStore.activeProfile.emailSignature}`

    //Check Query
    if(route.query.to) emailData.value.to = route.query.to
    if(route.query.cc) emailData.value.cc = route.query.cc
    if(route.query.bcc) emailData.value.bcc = route.query.bcc
    if(route.query.subject) emailData.value.to = route.query.subject


    if(route.query.loadDocuments) {
      //console.log(JSON.parse(route.query.loadDocuments))
      const {data,error} = await supabase.from("documents").select('*, createdDocument(id,documentNumber,title,contact(email))').in('id',JSON.parse(route.query.loadDocuments))

      if(error) console.log(error)
      if(data) loadedDocuments.value = data

      //console.log(loadedDocuments.value)

      if(loadedDocuments.value.length > 0) {
        emailData.value.subject = loadedDocuments.value[0].createdDocument.title
        emailData.value.to = loadedDocuments.value[0].createdDocument.contact ? loadedDocuments.value[0].createdDocument.contact.email : ""

      }

    }

    loaded.value = true
  }




}

setupPage()

const contentChanged = (content) => {
  emailData.value.html = content.html
  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 toBase64 = file => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => resolve(reader.result.split(",")[1]);
  reader.onerror = reject;
});

function blobToBase64(blob) {
  return new Promise((resolve, _) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(",")[1]);
    reader.readAsDataURL(blob);
  });
}

const sendEmail = async () => {
  loaded.value = false

  let body  = {
    ...emailData.value,
    attachments: []
  }





  for await (const file of Array.from(document.getElementById("inputAttachments").files)) {
    body.attachments.push({
      filename: file.name,
      content: await toBase64(file),
      contentType: file.type,
      encoding: "base64",
      contentDisposition: "attachment"
    })
  }

  for await (const doc of loadedDocuments.value) {

    const {data,error} = await supabase.storage.from("files").download(doc.path)

    body.attachments.push({
      filename: doc.path.split("/")[doc.path.split("/").length -1],
      content: await blobToBase64(data),
      contentType: data.type,
      encoding: "base64",
      contentDisposition: "attachment"
    })
  }

  const { data, error } = await supabase.functions.invoke('send_email', {
    body
  })
  if(error) {
    toast.add({title: "Fehler beim Absenden der E-Mail", color: "rose"})

  } else if(data) {
    router.push("/")
    toast.add({title: "E-Mail zum Senden eingereiht"})
  }

  loaded.value = true

}


</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>
    <UButton
      @click="router.push(`/settings/emailAccounts`)"
      class="mx-auto mt-5"
    >
      + E-Mail Konto
    </UButton>
  </div>
  <div v-else>
    <UProgress animation="carousel" v-if="!loaded" class="mt-5 w-2/3 mx-auto"/>

    <div v-else>
      <UDashboardNavbar
          title="Neue E-Mail"
      >
        <template #right>
          <UButton
              @click="sendEmail"
              :disabled="!emailData.to || !emailData.subject"
          >
            Senden
          </UButton>
        </template>

      </UDashboardNavbar>
      <UDashboardToolbar>
        <div class="flex-col flex w-full">
          <UFormGroup
              label="Absender"
          >
            <USelectMenu
                :options="emailAccounts"
                option-attribute="emailAddress"
                value-attribute="id"
                v-model="emailData.account"
            />
          </UFormGroup>
          <UDivider class="my-3"/>
          <UInput
              class="w-full my-1"
              placeholder="Empfänger"
              variant="ghost"
              v-model="emailData.to"
          />
          <UInput
              class="w-full my-1"
              placeholder="Kopie"
              variant="ghost"
              v-model="emailData.cc"
          />
          <UInput
              class="w-full my-1"
              placeholder="Blindkopie"
              variant="ghost"
              v-model="emailData.bcc"
          />
          <UInput
              placeholder="Betreff"
              class="w-full my-1"
              variant="ghost"
              v-model="emailData.subject"
          />
        </div>

      </UDashboardToolbar>

      <UDashboardPanelContent>
        <div id="parentAttachments" class="flex flex-col justify-center">
          <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>-->
          <input
              id="inputAttachments"
              type="file"
              multiple
              @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>
          </ul>

        </div>

        <Tiptap
            @updateContent="contentChanged"
            :preloadedContent="preloadedContent"
        />
      </UDashboardPanelContent>
    </div>
  </div>




</template>

<style scoped>

#parentAttachments {
  border: 1px dashed #69c350;
  border-radius: 10px;
  padding: 1em;
}


#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;
}

</style>