Use events to open/close tickets
This commit is contained in:
parent
ec89f04144
commit
5ccdcec520
39
src/App.vue
39
src/App.vue
|
@ -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
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue