Nextcloud-App/src/App.vue

<template>
	<div id="content" class="app-upschooling">
		<AppNavigation>
			<AppNavigationCaption title="Meine Support-Tickets" />
				<template>
					<AppNavigationItem v-for="item in tickets" :key="item.ticketId" v-bind:title="item.title" @click="openTicket(item.ticketId)" /> 
					<!-- TODO: show only proper tickets -->
				</template> 
		</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" @new-ticket="newTicket" />
			</div>
		</AppContent>
	</div>
</template>

<script>
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
import { AppNavigation } from '@nextcloud/vue'
import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
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,
		AppNavigationItem,
		AppNavigationCaption
	},

	data() {
		return {
			/**
			 * Return the currently selected ticket object or null, if none is selected.
			 *
			 * @type {object|null|undefined}
			 */
			currentTicket: undefined,

			ticketsFetched: false,
			tickets: [],
		}
	},
	watch: {
		$route: 'fetchTickets',
	},
	created() {
		this.createExampleContent().finally(() => {
			this.fetchTickets()
		})
	},
	methods: {
		async createExampleContent() {
			// this obviously shouldn't survive version 1.0
			await axios.post(
				'api/v1/tickets',
				{ title: 'Ein Ticket', content: 'Ein Beispiel' },
				{ headers: { 'Content-Type': 'application/json', Accept: 'application/json' } },
			).then((response) => {
				if (this.ticketsFetched === false) {
					this.tickets.push(response.data)
				}
			}).catch(console.error)
			axios.get(
				'api/v1/tickets/1',
				{ headers: { Accept: 'application/json' } },
			).catch(console.error)
			axios.put(
				'api/v1/tickets/1',
				{},
				{ headers: { 'Content-Type': 'application/json', Accept: 'application/json' } }
			).catch(console.error)
		},
		fetchTickets() {
			axios.get(
				'api/v1/tickets',
				{ headers: { Accept: 'application/json' } }
			).then((response) => {
				if (Array.isArray(response.data)) {
					this.ticketsFetched = true
					if (response.data.length !== 0) {
						this.tickets = response.data
						console.debug(this.tickets) // FIXME
					} else {
						console.debug('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.ticketId === ticketId)
		},
		deselectTicket() {
			this.currentTicket = null
		},
		newTicket(){
			//TODO generate new empty ticket
		}
	},
}
</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>