From 8a2d0f9fa3606295eaf7b0903227df8e93e27247 Mon Sep 17 00:00:00 2001
From: Finn <finn@hering.sh>
Date: Sat, 21 Aug 2021 19:32:36 +0200
Subject: [PATCH 1/5] Add Ticket and a HeaderlessKeyValueTable

---
 src/Ticket.vue                             | 23 +++++++++++++++
 src/components/HeaderlessKeyValueTable.vue | 34 ++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 src/Ticket.vue
 create mode 100644 src/components/HeaderlessKeyValueTable.vue

diff --git a/src/Ticket.vue b/src/Ticket.vue
new file mode 100644
index 0000000..cf55961
--- /dev/null
+++ b/src/Ticket.vue
@@ -0,0 +1,23 @@
+<template>
+	<div class="single-ticket">
+		<h2>Ticket "ding"</h2>
+		<HeaderlessKeyValueTable :data-rows="{Name: 'Bernd', Status: 'Offen', Ablaufdatum: 'gestern'}" />
+		<br>
+		<label for="descripton">Beschreibung</label>
+		<textarea id="descripton" v-model="description" />
+	</div>
+</template>
+
+<script>
+import HeaderlessKeyValueTable from './components/HeaderlessKeyValueTable'
+export default {
+	name: 'Ticket',
+	components: { HeaderlessKeyValueTable },
+}
+</script>
+
+<style scoped>
+textarea {
+	width: 100%;
+}
+</style>
diff --git a/src/components/HeaderlessKeyValueTable.vue b/src/components/HeaderlessKeyValueTable.vue
new file mode 100644
index 0000000..3a7d888
--- /dev/null
+++ b/src/components/HeaderlessKeyValueTable.vue
@@ -0,0 +1,34 @@
+<template>
+	<table>
+		<tr v-for="(value, key, i) in dataRows" :key="i">
+			<td>{{ key }}</td>
+			<td>{{ value }}</td>
+		</tr>
+	</table>
+</template>
+
+<script>
+export default {
+	name: 'HeaderlessKeyValueTable',
+	props: {
+		dataRows: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+}
+</script>
+
+<style scoped>
+	table {
+		width: 100%;
+	}
+
+	td {
+		border-bottom: solid #000 1px;
+	}
+
+	tr:nth-child(2n) {
+		background: #f0f0f0;
+	}
+</style>

From 742168215f6a703aaf970aef703d53a4859b49bb Mon Sep 17 00:00:00 2001
From: Finn <finn@hering.sh>
Date: Sat, 21 Aug 2021 19:38:46 +0200
Subject: [PATCH 2/5] Add save button

---
 src/Ticket.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Ticket.vue b/src/Ticket.vue
index cf55961..7617172 100644
--- a/src/Ticket.vue
+++ b/src/Ticket.vue
@@ -5,6 +5,9 @@
 		<br>
 		<label for="descripton">Beschreibung</label>
 		<textarea id="descripton" v-model="description" />
+		<br>
+		<button>Speichern</button>
+		<hr>
 	</div>
 </template>
 

From 92a41e48655b08d0d9cd70e99c52e9ff87417343 Mon Sep 17 00:00:00 2001
From: Finn <finn@hering.sh>
Date: Sat, 21 Aug 2021 19:58:03 +0200
Subject: [PATCH 3/5] Add save event listener to save button

---
 src/Ticket.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/Ticket.vue b/src/Ticket.vue
index 7617172..4c7c9d5 100644
--- a/src/Ticket.vue
+++ b/src/Ticket.vue
@@ -3,10 +3,12 @@
 		<h2>Ticket "ding"</h2>
 		<HeaderlessKeyValueTable :data-rows="{Name: 'Bernd', Status: 'Offen', Ablaufdatum: 'gestern'}" />
 		<br>
-		<label for="descripton">Beschreibung</label>
-		<textarea id="descripton" v-model="description" />
+		<label for="description">Beschreibung</label>
+		<textarea id="description" v-model.trim.lazy="description" />
 		<br>
-		<button>Speichern</button>
+		<button @click="save">
+			Speichern
+		</button>
 		<hr>
 	</div>
 </template>
@@ -16,6 +18,14 @@ import HeaderlessKeyValueTable from './components/HeaderlessKeyValueTable'
 export default {
 	name: 'Ticket',
 	components: { HeaderlessKeyValueTable },
+	data() {
+		return {
+			description: '',
+		}
+	},
+	methods: {
+		save() {},
+	},
 }
 </script>
 

From abfd450699fcf07a3cbbaf1a7e1a741f1ae1af3b Mon Sep 17 00:00:00 2001
From: Finn <finn@hering.sh>
Date: Sat, 21 Aug 2021 20:04:05 +0200
Subject: [PATCH 4/5] Remove crap

---
 src/App.vue | 195 +---------------------------------------------------
 1 file changed, 3 insertions(+), 192 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index dab9b22..3611918 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,215 +1,26 @@
 <template>
 	<div id="content" class="app-upschooling">
 		<AppNavigation>
-			<AppNavigationNew v-if="!loading"
-				:text="t('upschooling', 'New note')"
-				:disabled="false"
-				button-id="new-upschooling-button"
-				button-class="icon-add"
-				@click="newNote" />
-			<ul>
-				<AppNavigationItem v-for="note in notes"
-					:key="note.id"
-					:title="note.title ? note.title : t('upschooling', 'New note')"
-					:class="{active: currentNoteId === note.id}"
-					@click="openNote(note)">
-					<template slot="actions">
-						<ActionButton v-if="note.id === -1"
-							icon="icon-close"
-							@click="cancelNewNote(note)">
-							{{ t('upschooling', 'Cancel note creation') }}
-						</ActionButton>
-						<ActionButton v-else
-							icon="icon-delete"
-							@click="deleteNote(note)">
-							{{ t('upschooling', 'Delete note') }}
-						</ActionButton>
-					</template>
-				</AppNavigationItem>
-			</ul>
 		</AppNavigation>
 		<AppContent>
-			<div v-if="currentNote">
-				<input ref="title"
-					v-model="currentNote.title"
-					type="text"
-					:disabled="updating">
-				<textarea ref="content" v-model="currentNote.content" :disabled="updating" />
-				<input type="button"
-					class="primary"
-					:value="t('upschooling', 'Save')"
-					:disabled="updating || !savePossible"
-					@click="saveNote">
-			</div>
-			<div v-else id="emptycontent">
-				<div class="icon-file" />
-				<h2>{{ t('upschooling', 'Create a note to get started') }}</h2>
-			</div>
+			<Ticket />
 		</AppContent>
 	</div>
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
-import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
 
 import '@nextcloud/dialogs/styles/toast.scss'
-import { generateUrl } from '@nextcloud/router'
-import { showError, showSuccess } from '@nextcloud/dialogs'
-import axios from '@nextcloud/axios'
+import Ticket from './Ticket'
 
 export default {
 	name: 'App',
 	components: {
-		ActionButton,
+		Ticket,
 		AppContent,
 		AppNavigation,
-		AppNavigationItem,
-		AppNavigationNew,
-	},
-	data() {
-		return {
-			notes: [],
-			currentNoteId: null,
-			updating: false,
-			loading: true,
-		}
-	},
-	computed: {
-		/**
-		 * Return the currently selected note object
-		 * @returns {Object|null}
-		 */
-		currentNote() {
-			if (this.currentNoteId === null) {
-				return null
-			}
-			return this.notes.find((note) => note.id === this.currentNoteId)
-		},
-
-		/**
-		 * Returns true if a note is selected and its title is not empty
-		 * @returns {Boolean}
-		 */
-		savePossible() {
-			return this.currentNote && this.currentNote.title !== ''
-		},
-	},
-	/**
-	 * Fetch list of notes when the component is loaded
-	 */
-	async mounted() {
-		try {
-			const response = await axios.get(generateUrl('/apps/upschooling/notes'))
-			this.notes = response.data
-		} catch (e) {
-			console.error(e)
-			showError(t('upschooling', 'Could not fetch notes'))
-		}
-		this.loading = false
-	},
-
-	methods: {
-		/**
-		 * Create a new note and focus the note content field automatically
-		 * @param {Object} note Note object
-		 */
-		openNote(note) {
-			if (this.updating) {
-				return
-			}
-			this.currentNoteId = note.id
-			this.$nextTick(() => {
-				this.$refs.content.focus()
-			})
-		},
-		/**
-		 * Action tiggered when clicking the save button
-		 * create a new note or save
-		 */
-		saveNote() {
-			if (this.currentNoteId === -1) {
-				this.createNote(this.currentNote)
-			} else {
-				this.updateNote(this.currentNote)
-			}
-		},
-		/**
-		 * Create a new note and focus the note content field automatically
-		 * The note is not yet saved, therefore an id of -1 is used until it
-		 * has been persisted in the backend
-		 */
-		newNote() {
-			if (this.currentNoteId !== -1) {
-				this.currentNoteId = -1
-				this.notes.push({
-					id: -1,
-					title: '',
-					content: '',
-				})
-				this.$nextTick(() => {
-					this.$refs.title.focus()
-				})
-			}
-		},
-		/**
-		 * Abort creating a new note
-		 */
-		cancelNewNote() {
-			this.notes.splice(this.notes.findIndex((note) => note.id === -1), 1)
-			this.currentNoteId = null
-		},
-		/**
-		 * Create a new note by sending the information to the server
-		 * @param {Object} note Note object
-		 */
-		async createNote(note) {
-			this.updating = true
-			try {
-				const response = await axios.post(generateUrl('/apps/upschooling/notes'), note)
-				const index = this.notes.findIndex((match) => match.id === this.currentNoteId)
-				this.$set(this.notes, index, response.data)
-				this.currentNoteId = response.data.id
-			} catch (e) {
-				console.error(e)
-				showError(t('upschooling', 'Could not create the note'))
-			}
-			this.updating = false
-		},
-		/**
-		 * Update an existing note on the server
-		 * @param {Object} note Note object
-		 */
-		async updateNote(note) {
-			this.updating = true
-			try {
-				await axios.put(generateUrl(`/apps/upschooling/notes/${note.id}`), note)
-			} catch (e) {
-				console.error(e)
-				showError(t('upschooling', 'Could not update the note'))
-			}
-			this.updating = false
-		},
-		/**
-		 * Delete a note, remove it from the frontend and show a hint
-		 * @param {Object} note Note object
-		 */
-		async deleteNote(note) {
-			try {
-				await axios.delete(generateUrl(`/apps/upschooling/notes/${note.id}`))
-				this.notes.splice(this.notes.indexOf(note), 1)
-				if (this.currentNoteId === note.id) {
-					this.currentNoteId = null
-				}
-				showSuccess(t('upschooling', 'Note deleted'))
-			} catch (e) {
-				console.error(e)
-				showError(t('upschooling', 'Could not delete the note'))
-			}
-		},
 	},
 }
 </script>

From 58d8695880eb72465a0746a2a7ef4ecedf858fe1 Mon Sep 17 00:00:00 2001
From: Benedikt Ziemons <ben@rs485.network>
Date: Sun, 22 Aug 2021 18:01:29 +0200
Subject: [PATCH 5/5] Add first TicketList revision

---
 src/App.vue                   | 55 ++++++++++++++++++--
 src/components/TicketList.vue | 95 +++++++++++++++++++++++++++++++++++
 src/main.js                   |  2 +-
 3 files changed, 146 insertions(+), 6 deletions(-)
 create mode 100644 src/components/TicketList.vue

diff --git a/src/App.vue b/src/App.vue
index 3611918..e477ec0 100644
--- a/src/App.vue
+++ b/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 '@nextcloud/dialogs/styles/toast.scss'
+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>
diff --git a/src/components/TicketList.vue b/src/components/TicketList.vue
new file mode 100644
index 0000000..3318c7d
--- /dev/null
+++ b/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>
diff --git a/src/main.js b/src/main.js
index 99d454e..ea9937a 100644
--- a/src/main.js
+++ b/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