fill sidebar and add button for new ticket

This commit is contained in:
Caluera 2021-12-18 16:49:53 +01:00
parent 8e804a26b0
commit b342f9f74a
2 changed files with 31 additions and 6 deletions

View File

@ -1,12 +1,18 @@
<template>
<div id="content" class="app-upschooling">
<AppNavigation />
<AppNavigation>
<AppNavigationCaption title="Meine Support-Tickets" />
<template>
<AppNavigationItem v-for="item in tickets" :key="item.ticketId" v-bind:title="item.title" @click="openTicket(item.ticketId)" />
<!-- TODO: show only proper tickets -->
</template>
</AppNavigation>
<AppContent>
<div v-if="currentTicket">
<Ticket :ticket="currentTicket" @save-ticket="saveTicket" @show-ticket-list="deselectTicket" />
</div>
<div v-else>
<TicketList :tickets="tickets" @open-ticket="openTicket" />
<TicketList :tickets="tickets" @open-ticket="openTicket" @new-ticket="newTicket" />
</div>
</AppContent>
</div>
@ -14,7 +20,9 @@
<script>
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
import { AppNavigation } from '@nextcloud/vue'
import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
import TicketList from './components/TicketList'
import Ticket from './Ticket'
import '@nextcloud/dialogs/styles/toast.scss'
@ -27,6 +35,8 @@ export default {
TicketList,
AppContent,
AppNavigation,
AppNavigationItem,
AppNavigationCaption
},
data() {
@ -99,6 +109,9 @@ export default {
deselectTicket() {
this.currentTicket = null
},
newTicket(){
//TODO generate new empty ticket
}
},
}
</script>

View File

@ -1,4 +1,10 @@
<template>
<div class="ticketlist">
<div class="header-bar">
<button @click="newTicket">
{{ t('upschooling', 'Neues Ticket') }}
</button>
</div>
<table
id="ticketlist"
class="list-container has-controls">
@ -51,6 +57,7 @@
</tr>
</tbody>
</table>
</div>
</template>
<script>
@ -72,14 +79,14 @@ export default {
openTicket(ticketId) {
this.$emit('open-ticket', ticketId)
},
newTicket() {
this.$emit('new-ticket')
}
},
}
</script>
<style scoped>
#ticketlist {
margin-top: 4rem;
}
table {
width: 100%;
@ -100,4 +107,9 @@ export default {
a:hover .ticket-number, a:focus .ticket-number, a:active .ticket-number {
opacity: 1;
}
.header-bar {
display: flex;
width: 100%;
flex-direction: row-reverse;
}
</style>