Nextcloud-App/src/Ticket.vue

<template>
	<div class="single-ticket">
		<div class="header-bar">
			<button @click="back">
				{{ t('upschooling', 'Ticket Schließen') }}
			</button>
			<button @click="save">
				{{ t('upschooling', 'Speichern') }}
			</button>
		</div>
		<h2>Ticket "ding"</h2>
		<KeyValueTable :data-rows="{Id: ticket.ticketId, Name: ticket.title, Status: ticket.status, Geaendert: toLocaleDate(ticket.lastModified)}" />
		<br>
		<label for="description">{{ t('upschooling', 'Beschreibung') }}</label>
		<textarea id="description" v-model.trim.lazy="description" rows="15" />
		<br>
		<button @click="save">
			{{ t('upschooling', 'Speichern') }}
		</button>
		<hr>
		<div class="placeholder" />
	</div>
</template>

<script>
import KeyValueTable from './components/KeyValueTable'
export default {
	name: 'Ticket',
	components: { KeyValueTable },
	props: {
		ticket: {
			type: Object,
			default() {
				return {}
			},
		},
	},
	data() {
		return {
			description: this.ticket.description,
		}
	},
	methods: {
		toLocaleDate(timestamp) {
			const date = new Date(timestamp)
			return date.toLocaleString()
		},

		save() {
			this.$emit('save-ticket', this.ticket.ticketId, {}) // TODO: give it only the changed data
		},

		back() {
			this.$emit('show-ticket-list')
		},
	},
}
</script>

<style scoped>
textarea {
	width: 100%;
	margin: 0;
	resize: vertical;
}

.placeholder {
	height: 400px;
	width: 100%;
	background: #f0f0f0;
}

.header-bar {
	display: flex;
	width: 100%;
	flex-direction: row-reverse;
}
</style>