Use events to open/close tickets

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() {
+		tickets() {
-			return this.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
 		},
 	},
 }

src/Ticket.vue

@@ -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>

src/components/TicketList.vue

@@ -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>