Introduced Help Tickets

pages/support/[id].vue

@@ -0,0 +1,179 @@
+<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()
+      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
+
+  }
+}
+
+</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"
+        disabled
+      >
+        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.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>