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> <template>
<div id="content" class="app-upschooling"> <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> <AppContent>
<div v-if="currentTicket"> <div v-if="currentTicket">
<Ticket :ticket="currentTicket" @save-ticket="saveTicket" @show-ticket-list="deselectTicket" /> <Ticket :ticket="currentTicket" @save-ticket="saveTicket" @show-ticket-list="deselectTicket" />
</div> </div>
<div v-else> <div v-else>
<TicketList :tickets="tickets" @open-ticket="openTicket" /> <TicketList :tickets="tickets" @open-ticket="openTicket" @new-ticket="newTicket" />
</div> </div>
</AppContent> </AppContent>
</div> </div>
@ -14,7 +20,9 @@
<script> <script>
import AppContent from '@nextcloud/vue/dist/Components/AppContent' 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 TicketList from './components/TicketList'
import Ticket from './Ticket' import Ticket from './Ticket'
import '@nextcloud/dialogs/styles/toast.scss' import '@nextcloud/dialogs/styles/toast.scss'
@ -27,6 +35,8 @@ export default {
TicketList, TicketList,
AppContent, AppContent,
AppNavigation, AppNavigation,
AppNavigationItem,
AppNavigationCaption
}, },
data() { data() {
@ -99,6 +109,9 @@ export default {
deselectTicket() { deselectTicket() {
this.currentTicket = null this.currentTicket = null
}, },
newTicket(){
//TODO generate new empty ticket
}
}, },
} }
</script> </script>

View File

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