FEDEO/pages/support/[id].vue

<script setup>

import {useFunctions} from "~/composables/useFunctions.js";

const supabase = useSupabaseClient()
const profileStore = useProfileStore()
const toast = useToast()

const itemInfo = ref({})
const loaded = ref(false)

const setup = async () => {
  itemInfo.value = (await supabase.from("tickets").select("*, ticketmessages(*, profile(fullName, tenant, id)), created_by(*)").eq("id",useRoute().params.id).single()).data
  loaded.value = true
}

setup()

const messageContent = ref("")

const addMessage = async () => {
    const {data,error} = await supabase.from("ticketmessages").insert({
      profile: profileStore.activeProfile.id,
      content: messageContent.value,
      ticket: itemInfo.value.id,
      internal: false,
      type: "Nachricht"
    }).select().single()

    if(error) {
      toast.add({title: "Erstellen fehlgeschlagen", color: "rose"})
    } else {
      toast.add({title: "Erstellen erfolgreich"})
      messageContent.value=""
      setup()
      if(profileStore.currentTenant !== 5) {
        await useFunctions().useSendTelegramNotification(`Neue Nachricht im Ticket ${useRoute().params.id} von ${profileStore.activeProfile.fullName}: ${data.content}`)
      }

    }
}

const showAddEntryModal = ref(false)
const addEntryData = ref({})
const addEntry = async () => {
  const {data,error} = await supabase.from("ticketmessages").insert({
    profile: profileStore.activeProfile.id,
    content: addEntryData.value.content,
    ticket: itemInfo.value.id,
    internal: addEntryData.value.internal,
    type: addEntryData.value.type
  }).select().single()

  if(error) {
    toast.add({title: "Erstellen fehlgeschlagen", color: "rose"})
  } else {
    toast.add({title: "Erstellen erfolgreich"})
    addEntryData.value = {}
    setup()
    showAddEntryModal.value = false

  }
}

const closeTicket = async () => {
  const {data, error} = await supabase.from("tickets").update({status: "Geschlossen"}).eq("id",useRoute().params.id).single()

  if(error) {
    console.log(error)
  } else {
    console.log(data)

    addEntryData.value.type = "Notiz"
    addEntryData.value.internal = false
    addEntryData.value.content = `Ticket durch ${profileStore.activeProfile.fullName} geschlossen`

    addEntry()

  }

  setup()
}

</script>

<template>
  <UDashboardNavbar title="Support Ticket">
    <template #badge>
      <UBadge
        variant="outline"
        v-if="itemInfo.status === 'Offen'"
        color="yellow"
      >{{itemInfo.status}}</UBadge>
      <UBadge
        variant="outline"
        v-if="itemInfo.status === 'Geschlossen'"
        color="primary"
      >{{itemInfo.status}}</UBadge>
    </template>
    <template #right>
      <UButton
        v-if="profileStore.currentTenant === 5"
        variant="outline"
        @click="closeTicket"
      >
        Ticket Schließen
      </UButton>
      <UButton
        v-if="profileStore.currentTenant === 5"
        variant="outline"
        @click="showAddEntryModal = true"
      >
        + Eintrag
      </UButton>
      <UModal v-model="showAddEntryModal">
        <UCard>
          <template #header>
            Eintrag hinzufügen
          </template>

          <UFormGroup
            label="Intern:"
          >
            <UToggle
              v-model="addEntryData.internal"
            />
          </UFormGroup>
          <UFormGroup
            label="Typ:"
          >
            <USelectMenu
              v-model="addEntryData.type"
              :options="['Nachricht','Notiz','Anruf','Externe Kommunikation']"
            />
          </UFormGroup>
          <UFormGroup
            label="Inhalt:"
          >
            <UTextarea
              v-model="addEntryData.content"
            />
          </UFormGroup>

          <template #footer>
            <UButton
              @click="addEntry"
            >
              Erstellen
            </UButton>
          </template>
        </UCard>
      </UModal>
    </template>
  </UDashboardNavbar>
  <UDashboardPanelContent v-if="loaded">
    <UAlert
        v-if="profileStore.currentTenant === 5"
        v-for="item in itemInfo.ticketmessages"
        :description="item.content"
        :avatar="{ alt: item.profile.fullName}"
        :title="`${item.type} - ${item.profile.fullName}`"
        class="mb-3"
        :color="item.internal ? 'rose' : item.profile.tenant === 5 ? 'primary' : 'white'"
        variant="outline"
    />
    <UAlert
        v-else
        v-for="item in itemInfo.ticketmessages.filter(i => !i.internal)"
        :description="item.content"
        :avatar="{ alt: item.profile.fullName}"
        :title="`${item.type} - ${item.profile.fullName}`"
        class="mb-3"
        :color="item.profile.tenant === 5 ? 'primary' : 'white'"
        variant="outline"
    />

    <InputGroup>
      <UInput
        class="w-full mr-2"
        placeholder="Neue Nachricht senden"
        v-model="messageContent"
        @keyup.enter="addMessage"
      />
      <UButton
        @click="addMessage"
      >
        Senden
      </UButton>
    </InputGroup>

  </UDashboardPanelContent>
  <UProgress animation="carousel" v-else class="w-3/4 mx-auto"/>



</template>

<style scoped>

</style>