93 lines
2.0 KiB
Vue
93 lines
2.0 KiB
Vue
<script setup>
|
|
|
|
import {useFunctions} from "~/composables/useFunctions.js";
|
|
import dayjs from "dayjs";
|
|
|
|
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 />
|
|
</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>
|