Nextcloud-App/src/App.vue

<template>
	<div id="content" class="app-upschooling">
		<AppNavigation />
		<AppContent>
			<div v-if="currentTicket">
				<Ticket />
			</div>
			<div v-else>
				<TicketList :tickets="mytickets" />
			</div>
		</AppContent>
	</div>
</template>

<script>
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
import TicketList from './components/TicketList'
import Ticket from './Ticket'
import '@nextcloud/dialogs/styles/toast.scss'

export default {
	name: 'App',
	components: {
		Ticket,
		TicketList,
		AppContent,
		AppNavigation,
	},
	data() {
		return {
			tickets: [
				{
					id: 1234,
					status: 'Offen',
					title: 'Dies ist ein Ticket-Titel',
				},
				{
					id: 12345,
					status: 'Offen',
					title: 'Dies ist ein anderer Ticket-Titel',
				},
				{
					id: 123456,
					status: 'Behoben',
					title: 'Sowieso behoben',
				},
			],
		}
	},
	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
		},
	},
}
</script>
<style scoped>
	#app-content > div {
		width: 100%;
		height: 100%;
		padding: 20px;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	input[type='text'] {
		width: 100%;
	}

	textarea {
		flex-grow: 1;
		width: 100%;
	}
</style>