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'
import axios from '@nextcloud/axios'

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,

			tickets: [],
		}
	},
	watch: {
		$route: 'fetchTickets',
	},
	created() {
		this.fetchTickets()
	},
	methods: {
		fetchTickets() {
			axios.get(
				'api/v1/tickets',
				{ headers: { Accept: 'application/json' } }
			).then((response) => {
				if (Array.isArray(response.data)) {
					if (response.data.length !== 0) {
						this.tickets.push(response.data)
					} else {
						console.warn('Empty ticket list :(')
					}
				} else {
					console.error('API did not return array: ', response)
				}
			}).catch(console.error)
		},
		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>