Add first TicketList revision

src/App.vue

@@ -1,9 +1,13 @@
 <template>
 	<div id="content" class="app-upschooling">
-		<AppNavigation>
+		<AppNavigation />
-		</AppNavigation>
 		<AppContent>
-			<Ticket />
+			<div v-if="currentTicket">
+				<Ticket />
+			</div>
+			<div v-else>
+				<TicketList :tickets="mytickets" />
+			</div>
 		</AppContent>
 	</div>
 </template>
@@ -11,17 +15,58 @@
 <script>
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-
+import TicketList from './components/TicketList'
-import '@nextcloud/dialogs/styles/toast.scss'
 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>

src/components/TicketList.vue

@@ -0,0 +1,95 @@
+<template>
+	<table
+		id="ticketlist"
+		class="list-container has-controls">
+		<thead>
+			<tr>
+				<th id="headerName" class="column-name">
+					<div id="headerName-container">
+						<a class="name sort columntitle" data-sort="name">
+							<span>Titel (#Ticket-Nummer)</span>
+							<span class="sort-indicator icon-triangle-n" />
+						</a>
+					</div>
+				</th>
+				<th id="headerStatus" class="column-status">
+					<a class="status sort columntitle" data-sort="status">
+						<span>Status</span>
+						<span class="sort-indicator hidden icon-triangle-s" />
+					</a>
+				</th>
+				<th id="headerDate" class="column-mtime">
+					<a id="modified" class="columntitle" data-sort="mtime">
+						<span>Geändert</span>
+						<span class="sort-indicator hidden icon-triangle-s" />
+					</a>
+				</th>
+			</tr>
+		</thead>
+		<tbody id="tickettbody">
+			<tr v-for="item in tickets" :key="item.id">
+				<td class="filename ui-draggable ui-draggable-handle">
+					<a class="name" :href="'#ticket-' + item.id">
+						<span class="nametext">
+							<span class="innernametext">{{ item.title }}</span>
+							<span class="ticket-number"> (<span class="icon icon-ticket" />#{{ item.id }})</span>
+						</span>
+					</a>
+				</td>
+				<td class="status">
+					{{ item.status }}
+				</td>
+				<td class="date">
+					<span
+						class="modified live-relative-timestamp"
+						title=""
+						data-timestamp="1628157115000"
+						style="color:rgb(81,81,81)"
+						data-original-title="5. August 2021 11:51">
+						vor 16 Tagen <!-- ToDo -->
+					</span>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<script>
+export default {
+	name: 'TicketList',
+	props: {
+		tickets: {
+			type: Array,
+			default() {
+				return []
+			},
+		},
+	},
+}
+</script>
+
+<style scoped>
+	#ticketlist {
+		margin-top: 4rem;
+	}
+
+	table {
+		width: 100%;
+	}
+
+	td {
+		border-bottom: solid #000 1px;
+	}
+
+	tr:nth-child(2n) {
+		background: #f0f0f0;
+	}
+
+	a .ticket-number {
+		opacity: 0.5;
+	}
+
+	a:hover .ticket-number, a:focus .ticket-number, a:active .ticket-number {
+		opacity: 1;
+	}
+</style>

src/main.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <skjnldsv@protonmail.com>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as