Nextcloud-App/src/Ticket.vue

79 lines
1.5 KiB
Vue

<template>
<div class="single-ticket">
<div class="header-bar">
<button @click="back">
{{ t('upschooling', 'Zurück') }}
</button>
<button @click="save">
{{ t('upschooling', 'Speichern') }}
</button>
</div>
<h2>Ticket "ding"</h2>
<KeyValueTable :data-rows="{Id: ticket.ticketId, Name: ticket.title, Status: ticket.status, Geaendert: toLocaleDate(ticket.lastModified)}" />
<br>
<label for="description">{{ t('upschooling', 'Beschreibung') }}</label>
<textarea id="description" v-model.trim.lazy="description" rows="15" />
<br>
<button @click="save">
{{ t('upschooling', 'Speichern') }}
</button>
<hr>
<div class="placeholder" />
</div>
</template>
<script>
import KeyValueTable from './components/KeyValueTable'
export default {
name: 'Ticket',
components: { KeyValueTable },
props: {
ticket: {
type: Object,
default() {
return {}
},
},
},
data() {
return {
description: this.ticket.description,
}
},
methods: {
toLocaleDate(timestamp) {
const date = new Date(timestamp)
return date.toLocaleString()
},
save() {
this.$emit('save-ticket', this.ticket.ticketId, {}) // TODO: give it only the changed data
},
back() {
this.$emit('show-ticket-list')
},
},
}
</script>
<style scoped>
textarea {
width: 100%;
margin: 0;
resize: vertical;
}
.placeholder {
height: 400px;
width: 100%;
background: #f0f0f0;
}
.header-bar {
display: flex;
width: 100%;
flex-direction: row-reverse;
}
</style>