110 lines
3.2 KiB
Vue
110 lines
3.2 KiB
Vue
<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> |