Added Frontend
This commit is contained in:
146
frontend/pages/support/[id].vue
Normal file
146
frontend/pages/support/[id].vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<script setup>
|
||||
|
||||
import {useFunctions} from "~/composables/useFunctions.js";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
const profileStore = useProfileStore()
|
||||
const toast = useToast()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const itemInfo = ref({})
|
||||
const loaded = ref(false)
|
||||
|
||||
const setup = async () => {
|
||||
itemInfo.value = await useEntities("tickets").selectSingle(useRoute().params.id,"*, ticketmessages(*), created_by(*)")
|
||||
loaded.value = true
|
||||
}
|
||||
|
||||
setup()
|
||||
|
||||
const messageContent = ref("")
|
||||
|
||||
const addMessage = async () => {
|
||||
const res = await useEntities("ticketmessages").create({
|
||||
auth_user: auth.user.user_id,
|
||||
content: messageContent.value,
|
||||
ticket: itemInfo.value.id,
|
||||
internal: false,
|
||||
type: "Nachricht"
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
</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 #center>
|
||||
{{itemInfo.title}}
|
||||
</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-for="item in itemInfo.ticketmessages.filter(i => !i.internal)"
|
||||
:title="`${item.type}`"
|
||||
class="mb-3"
|
||||
:color="item.profile.tenant === 5 ? 'primary' : 'white'"
|
||||
variant="outline"
|
||||
>
|
||||
<template #description>
|
||||
<p>{{item.content}}</p>
|
||||
<p class="mt-1 text-gray-600 dark:text-gray-400">{{dayjs(item.created_at).format("DD.MM.YYYY HH:mm")}}</p>
|
||||
</template>
|
||||
</UAlert>
|
||||
|
||||
<InputGroup>
|
||||
<UTextarea
|
||||
class="w-full mr-2"
|
||||
placeholder="Neue Nachricht senden"
|
||||
v-model="messageContent"
|
||||
/>
|
||||
<UButton
|
||||
@click="addMessage"
|
||||
>
|
||||
Senden
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
|
||||
</UDashboardPanelContent>
|
||||
<UProgress animation="carousel" v-else class="w-3/4 mx-auto"/>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
62
frontend/pages/support/create.vue
Normal file
62
frontend/pages/support/create.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<script setup>
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const itemInfo = ref({})
|
||||
const auth = useAuthStore()
|
||||
|
||||
|
||||
const createTicket = async () => {
|
||||
|
||||
const ticketRes = await useEntities("tickets").create({
|
||||
title: itemInfo.value.title,
|
||||
})
|
||||
|
||||
console.log(ticketRes)
|
||||
|
||||
const ticketMsgRes = await useEntities("ticketmessages").create({
|
||||
ticket: ticketRes.id,
|
||||
created_by: auth.user.user_id,
|
||||
content: itemInfo.value.content,
|
||||
internal: false
|
||||
})
|
||||
|
||||
await router.push(`/support/${ticketRes.id}`)
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar title="Neues Ticket erstellen">
|
||||
<template #right>
|
||||
<UButton
|
||||
@click="createTicket"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UForm class="w-2/3 mx-auto mt-5">
|
||||
<UFormGroup
|
||||
label="Titel:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.title"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Nachricht:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.content"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
110
frontend/pages/support/index.vue
Normal file
110
frontend/pages/support/index.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
const profileStore = useProfileStore()
|
||||
const router = useRouter()
|
||||
|
||||
const tickets = ref([])
|
||||
const tenants = ref([])
|
||||
|
||||
const showClosedTickets = ref(false)
|
||||
const selectedTenant = ref(null)
|
||||
|
||||
const setup = async () => {
|
||||
/*if(profileStore.currentTenant === 5) {
|
||||
tickets.value = (await supabase.from("tickets").select("*,created_by(*), ticketmessages(*), tenant(*)").order("created_at", {ascending: false})).data
|
||||
} else {
|
||||
tickets.value = (await supabase.from("tickets").select("*,created_by(*), ticketmessages(*)").eq("tenant",profileStore.currentTenant).order("created_at", {ascending: false})).data
|
||||
}
|
||||
|
||||
if(profileStore.currentTenant === 5) {
|
||||
tenants.value = (await supabase.from("tenants").select().order("id")).data
|
||||
}*/
|
||||
tickets.value = await useEntities("tickets").select("*,created_by(*), ticketmessages(*)", "created_at", false)
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
setup()
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
let items = tickets.value
|
||||
|
||||
if(!showClosedTickets.value) {
|
||||
items = items.filter(i => i.status !== "Geschlossen")
|
||||
}
|
||||
|
||||
if(selectedTenant.value) {
|
||||
console.log(selectedTenant.value)
|
||||
console.log(items)
|
||||
console.log(items.filter(i => i.tenant.id === selectedTenant.value))
|
||||
items = items.filter(i => i.tenant.id === selectedTenant.value)
|
||||
}
|
||||
|
||||
return items
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar
|
||||
title="Support Tickets"
|
||||
:badge="filteredRows.length"
|
||||
>
|
||||
<template #right>
|
||||
<UButton
|
||||
@click="router.push('/support/create')"
|
||||
>
|
||||
+ Ticket
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
<UCheckbox
|
||||
label="Geschlossene Tickets anzeigen"
|
||||
v-model="showClosedTickets"
|
||||
/>
|
||||
<USelectMenu
|
||||
v-if="profileStore.currentTenant === 5"
|
||||
:ui-menu="{ width: 'min-w-max' }"
|
||||
:options="tenants"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
v-model="selectedTenant"
|
||||
>
|
||||
<template #label>
|
||||
{{selectedTenant ? tenants.find(i => i.id === selectedTenant).name : "Nicht nach Tenant filtern"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
</UDashboardToolbar>
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Tickets anzuzeigen` }"
|
||||
@select="(i) => router.push(`/support/${i.id}`)"
|
||||
:columns="[{key:'created_at',label:'Datum'}, ...profileStore.currentTenant === 5 ? [{key:'tenant',label:'Tenant'}] : [],{key:'status',label:'Status'},{key:'title',label:'Titel'},{key:'created_by',label:'Ersteller'},{key:'ticketmessages',label:'Nachrichten'}]"
|
||||
>
|
||||
<template #tenant-data="{ row }">
|
||||
{{row.tenant.name}}
|
||||
</template>
|
||||
<template #status-data="{ row }">
|
||||
<span v-if="row.status === 'Offen'" class="text-yellow-500">Offen</span>
|
||||
<span v-else-if="row.status === 'Geschlossen'" class="text-primary">Geschlossen</span>
|
||||
</template>
|
||||
<template #created_by-data="{ row }">
|
||||
{{row.created_by.fullName}}
|
||||
</template>
|
||||
<template #created_at-data="{ row }">
|
||||
{{dayjs(row.created_at).format('DD.MM.YYYY HH:mm')}}
|
||||
</template>
|
||||
<template #ticketmessages-data="{ row }">
|
||||
{{row.ticketmessages.length}}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user