FEDEO/pages/email/index.vue

<script setup>

const supabase = useSupabaseClient()
const dataStore = useDataStore()
const profileStore = useProfileStore()


const selectedTab = ref(0)
const selectedMail = ref(null)
const selectedMailboxPath = ref("INBOX")
const emails = ref([])
const accountData = ref(null)
const availableAccounts = ref(null)
const selectedAccount = ref(null)
const setupPage = async () => {
  availableAccounts.value = (await supabase.from("emailAccounts").select("*").contains("profiles",[profileStore.activeProfile.id])).data
  console.log(availableAccounts.value)

  if(availableAccounts.value.length > 0) {
    selectedAccount.value = availableAccounts.value[0].id
    accountData.value = await useSupabaseSelectSingle("emailAccounts", selectedAccount.value)
    emails.value = await useSupabaseSelect("emailMessages", "*", "date", false)
  }
}

const filteredMails = computed(() => {

  let temp = emails.value.filter(i => i.mailboxPath.toLowerCase() === selectedMailboxPath.value.toLowerCase())


  if(selectedTab.value === 0){
    return temp
  } else {
    return temp.filter(i => !i.seen)
  }


  return emails.value
})

const isMailPanelOpen = computed({
  get() {
    return !!selectedMail.value
  },
  set(value) {
    if (!value) {
      selectedMail.value = null
    }
  }
})

const changeSeen = async (seen) => {
  const {data,error} = await supabase.functions.invoke('emailcontrol',{
    body: {
      method: seen ? "makeSeen" : "makeUnseen",
      emailId: selectedMail.value.id
    }
  })

  if(data) {
    setupPage()
  }
}



setupPage()
</script>

<template>
<!--  <UDashboardNavbar title="E-Mails">

  </UDashboardNavbar>
  <UDashboardToolbar>

  </UDashboardToolbar>-->
  <UDashboardPage
    v-if="selectedAccount"
  >
    <UDashboardPanel
        id="inbox"
        :width="400"
        :resizable="{ min: 300, max: 500 }"

    >
      <UDashboardNavbar>
        <template #left>
          <USelectMenu
              v-if="accountData"
              class="w-40"
            :options="accountData.mailboxes"
            option-attribute="name"
            value-attribute="path"
            v-model="selectedMailboxPath"
          />
        </template>
        <template #right>
          <UButton
            icon="i-heroicons-arrow-path"
            variant="ghost"
            color="gray"
            @click="setupPage"
          />

          <UTabs
              v-model="selectedTab"
              :items="[{label: 'All'}, {label: 'Ungelesen'}]"
              :ui="{ wrapper: '', list: { height: 'h-9', tab: { height: 'h-7', size: 'text-[13px]' } } }"
          />
        </template>
      </UDashboardNavbar>

      <!-- ~/components/inbox/InboxList.vue -->
      <InboxList
          v-model="selectedMail"
          :mails="filteredMails"
          @emailSelected=" !selectedMail.seen ? changeSeen(true): ''"
      />
    </UDashboardPanel>
    <UDashboardPanel
        v-model="isMailPanelOpen"
        collapsible
        grow
        side="right"
    >
      <template v-if="selectedMail">
        <UDashboardNavbar>
          <template #toggle>
            <UDashboardNavbarToggle icon="i-heroicons-x-mark" />

            <UDivider
                orientation="vertical"
                class="mx-1.5 lg:hidden"
            />
          </template>

          <template #left>
            <UTooltip text="Ungelesen">
              <UButton
                  icon="i-heroicons-eye-slash"
                  color="gray"
                  variant="ghost"
                  @click="changeSeen(false)"
              />
            </UTooltip>
<!--            <UTooltip text="Archive">
              <UButton
                  icon="i-heroicons-archive-box"
                  color="gray"
                  variant="ghost"
              />
            </UTooltip>

            <UTooltip text="Move to junk">
              <UButton
                  icon="i-heroicons-archive-box-x-mark"
                  color="gray"
                  variant="ghost"
              />
            </UTooltip>

            <UDivider
                orientation="vertical"
                class="mx-1.5"
            />

            <UPopover :popper="{ placement: 'bottom-start' }">
              <template #default="{ open }">
                <UTooltip
                    text="Snooze"
                    :prevent="open"
                >
                  <UButton
                      icon="i-heroicons-clock"
                      color="gray"
                      variant="ghost"
                      :class="[open && 'bg-gray-50 dark:bg-gray-800']"
                  />
                </UTooltip>
              </template>

              <template #panel="{ close }">
                <DatePicker @close="close" />
              </template>
            </UPopover>-->
          </template>

          <template #right>
            <UTooltip text="Reply">
              <UButton
                  icon="i-heroicons-arrow-uturn-left"
                  color="gray"
                  variant="ghost"
              />
            </UTooltip>

            <UTooltip text="Forward">
              <UButton
                  icon="i-heroicons-arrow-uturn-right"
                  color="gray"
                  variant="ghost"
              />
            </UTooltip>

<!--            <UDivider
                orientation="vertical"
                class="mx-1.5"
            />

            <UDropdown :items="dropdownItems">
              <UButton
                  icon="i-heroicons-ellipsis-vertical"
                  color="gray"
                  variant="ghost"
              />
            </UDropdown>-->
          </template>
        </UDashboardNavbar>

        <!-- ~/components/inbox/InboxMail.vue -->
        <InboxMail :mail="selectedMail" />
      </template>
      <div
          v-else
          class="flex-1 hidden lg:flex items-center justify-center"
      >
        <UIcon
            name="i-heroicons-inbox"
            class="w-32 h-32 text-gray-400 dark:text-gray-500"
        />
      </div>
    </UDashboardPanel>
  </UDashboardPage>
  <div
      v-else
      class="flex-1  flex-col hidden lg:flex items-center justify-center"
  >
    <UIcon
        name="i-heroicons-inbox"
        class="w-32 h-32 text-gray-400 dark:text-gray-500"
    />
    <span class="font-bold text-2xl">Kein E-Mail Account verfügbar</span>

  </div>

<!--  <UInput
    placeholder="Empfänger"
    variant="ghost"
    class="m-2"
  />
  <UInput
    placeholder="Betreff"
    variant="ghost"
    class="m-2"
  />
  <UInput
    placeholder="CC"
    variant="ghost"
    class="m-2"
  />
  <UInput
    placeholder="BCC"
    variant="ghost"
    class="m-2"
  />

  <UDivider
    class="my-5"
  />





  <Tiptap/>-->
</template>

<style scoped>

</style>