Use events to open/close tickets

This commit is contained in:
Ben 2021-09-18 14:50:21 +02:00
parent ec89f04144
commit 5ccdcec520
Signed by: ben
GPG key ID: 0F54A7ED232D3319
3 changed files with 50 additions and 20 deletions

View file

@ -3,10 +3,10 @@
<AppNavigation />
<AppContent>
<div v-if="currentTicket">
<Ticket />
<Ticket :ticket="currentTicket" @save-ticket="saveTicket" @show-ticket-list="deselectTicket" />
</div>
<div v-else>
<TicketList :tickets="mytickets" />
<TicketList :tickets="tickets" @open-ticket="openTicket" />
</div>
</AppContent>
</div>
@ -29,7 +29,14 @@ export default {
},
data() {
return {
tickets: [
/**
* Return the currently selected ticket object or null, if none is selected.
*
* @type {object|null|undefined}
*/
currentTicket: undefined,
testTickets: [
{
id: 1234,
status: 'Offen',
@ -49,22 +56,26 @@ export default {
}
},
computed: {
/**
* Return the currently selected ticket object or null, if none is selected.
*
* @return {object|null}
*/
currentTicket() {
return null
},
/**
* Returns the list of ticket objects the current account has access to.
*
* @return {Array}
*/
mytickets() {
return this.tickets
tickets() {
// TODO: ask API (dont forget permission check in API)
return this.testTickets
},
},
methods: {
saveTicket(ticketId, data) {
// TODO send to API (dont forget permission check in API)
console.debug('upschooling', 'saveTicket', ticketId, data)
},
openTicket(ticketId) {
this.currentTicket = this.tickets.find((obj) => obj.id === ticketId)
},
deselectTicket() {
this.currentTicket = null
},
},
}

View file

@ -1,15 +1,15 @@
<template>
<div class="single-ticket">
<div class="header-bar">
<button>
<button @click="back">
{{ t('upschooling', 'Ticket Schließen') }}
</button>
<button>
<button @click="save">
{{ t('upschooling', 'Speichern') }}
</button>
</div>
<h2>Ticket "ding"</h2>
<KeyValueTable :data-rows="{Name: 'Bernd', Status: 'Offen', Ablaufdatum: 'gestern'}" />
<KeyValueTable :data-rows="{Name: ticket.title, Status: ticket.status, Ablaufdatum: '<<gestern>>'}" />
<br>
<label for="description">{{ t('upschooling', 'Beschreibung') }}</label>
<textarea id="description" v-model.trim.lazy="description" rows="15" />
@ -27,13 +27,27 @@ import KeyValueTable from './components/KeyValueTable'
export default {
name: 'Ticket',
components: { KeyValueTable },
props: {
ticket: {
type: Object,
default() {
return {}
},
},
},
data() {
return {
description: '',
description: this.ticket.description,
}
},
methods: {
save() {},
save() {
this.$emit('save-ticket', this.ticket.id, {}) // TODO: give it only the changed data
},
back() {
this.$emit('show-ticket-list')
},
},
}
</script>

View file

@ -29,7 +29,7 @@
<tbody id="tickettbody">
<tr v-for="item in tickets" :key="item.id">
<td class="filename ui-draggable ui-draggable-handle">
<a class="name" :href="'#ticket-' + item.id">
<a class="name" :href="'#ticket-' + item.id" @click="openTicket(item.id)">
<span class="nametext">
<span class="innernametext">{{ item.title }}</span>
<span class="ticket-number"> (<span class="icon icon-ticket" />#{{ item.id }})</span>
@ -65,6 +65,11 @@ export default {
},
},
},
methods: {
openTicket(ticketId) {
this.$emit('open-ticket', ticketId)
},
},
}
</script>