Added Frontend

frontend/pages/support/index.vue

@@ -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>