Nextcloud-App/src/Ticket.vue

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

<script>
import KeyValueTable from './components/KeyValueTable'
export default {
	name: 'Ticket',
	components: { KeyValueTable },
	data() {
		return {
			description: '',
		}
	},
	methods: {
		save() {},
	},
}
</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>