Nextcloud-App/src/App.vue

<template>
	<div id="content" class="app-upschooling">
		<AppNavigation />
		<AppContent>
			<div v-if="currentTicket">
				<Ticket :ticket="currentTicket" @save-ticket="saveTicket" @show-ticket-list="deselectTicket" />
			</div>
			<div v-else>
				<TicketList :tickets="tickets" @open-ticket="openTicket" />
			</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 {
			/**
			 * Return the currently selected ticket object or null, if none is selected.
			 *
			 * @type {object|null|undefined}
			 */
			currentTicket: undefined,

			testTickets: [
				{
					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: {
		/**
		 * Returns the list of ticket objects the current account has access to.
		 *
		 * @return {Array}
		 */
		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
		},
	},
}
</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>