58 lines
1.9 KiB
Vue
58 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div class="container-fluid px-xl-5 mt-3">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-8 offset-xl-2">
|
||
|
|
<div class="card bg-dark text-light mb-2" id="filters">
|
||
|
|
<div class="card-header">
|
||
|
|
<h3>Ticket #{{ ticket.id }} - {{ ticket.name }}</h3>
|
||
|
|
</div>
|
||
|
|
<Timeline :timeline="ticket.timeline" @sendMail="handleMail"/>
|
||
|
|
<div class="card-footer d-flex justify-content-between">
|
||
|
|
<router-link :to="{name: 'tickets'}" class="btn btn-secondary mr-2">Back</router-link>
|
||
|
|
<button class="btn btn-danger" @click="deleteItem({type: 'tickets', id: ticket.id})">
|
||
|
|
<font-awesome-icon icon="trash"/>
|
||
|
|
Delete
|
||
|
|
</button>
|
||
|
|
<button class="btn btn-success" @click="markItemReturned({type: 'tickets', id: ticket.id})">Mark
|
||
|
|
as returned
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {mapActions, mapState} from 'vuex';
|
||
|
|
import Timeline from "@/components/Timeline.vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Ticket',
|
||
|
|
components: {Timeline},
|
||
|
|
computed: {
|
||
|
|
...mapState(['tickets']),
|
||
|
|
ticket() {
|
||
|
|
const id = parseInt(this.$route.params.id)
|
||
|
|
const ret = this.tickets.find(ticket => ticket.id === id);
|
||
|
|
return ret ? ret : {};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions(['deleteItem', 'markItemReturned', 'loadTickets', 'sendMail']),
|
||
|
|
handleMail(mail) {
|
||
|
|
this.sendMail({
|
||
|
|
id: this.ticket.id,
|
||
|
|
message: mail
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.loadTickets()
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|