Add first TicketList revision

This commit is contained in:
Ben 2021-08-22 18:01:29 +02:00
parent abfd450699
commit 58d8695880
Signed by: ben
GPG key ID: 0F54A7ED232D3319
3 changed files with 146 additions and 6 deletions

View file

@ -1,9 +1,13 @@
<template>
<div id="content" class="app-upschooling">
<AppNavigation>
</AppNavigation>
<AppNavigation />
<AppContent>
<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>

View file

@ -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>

View file

@ -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