Merge branch 'origin/ticketübersicht_frontend'
This commit is contained in:
commit
e3bea945bf
19
src/App.vue
19
src/App.vue
|
@ -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() {
|
||||||
|
@ -100,6 +110,9 @@ export default {
|
||||||
deselectTicket() {
|
deselectTicket() {
|
||||||
this.currentTicket = null
|
this.currentTicket = null
|
||||||
},
|
},
|
||||||
|
newTicket(){
|
||||||
|
//TODO generate new empty ticket
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue