99 lines
No EOL
3.9 KiB
Vue
99 lines
No EOL
3.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" @addComment="handleComment"/>
|
|
<div class="card-footer d-flex justify-content-between">
|
|
<button class="btn btn-secondary mr-2" @click="$router.go(-1)">Back</button>
|
|
<!--button class="btn btn-danger" @click="deleteItem({type: 'tickets', id: ticket.id})">
|
|
<font-awesome-icon icon="trash"/>
|
|
Delete
|
|
</button-->
|
|
<ClipboardButton :payload="shippingEmail" class="btn btn-primary">
|
|
<font-awesome-icon icon="clipboard"/>
|
|
Copy DHL contact to clipboard
|
|
</ClipboardButton>
|
|
<div class="btn-group">
|
|
<select class="form-control" v-model="ticket.assigned_to">
|
|
<option v-for="user in users" :value="user.username">{{ user.username }}</option>
|
|
</select>
|
|
<button class="form-control btn btn-success" @click="assigTicket(ticket)">
|
|
Assign Ticket
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<select class="form-control" v-model="ticket.state">
|
|
<option v-for="status in state_options" :value="status.value">{{ status.text }}</option>
|
|
</select>
|
|
<button class="form-control btn btn-success" @click="changeTicketStatus(ticket)">
|
|
Change Status
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapActions, mapState} from 'vuex';
|
|
import Timeline from "@/components/Timeline.vue";
|
|
import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
|
|
|
|
export default {
|
|
name: 'Ticket',
|
|
components: {ClipboardButton, Timeline},
|
|
computed: {
|
|
...mapState(['tickets', 'state_options', 'users']),
|
|
ticket() {
|
|
const id = parseInt(this.$route.params.id)
|
|
const ret = this.tickets.find(ticket => ticket.id === id);
|
|
return ret ? ret : {};
|
|
},
|
|
shippingEmail() {
|
|
const domain = document.location.hostname;
|
|
return `ticket+${this.ticket.uuid}@${domain}`;
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['deleteItem', 'markItemReturned', 'sendMail', 'updateTicketPartial', 'postComment']),
|
|
...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit']),
|
|
handleMail(mail) {
|
|
this.sendMail({
|
|
id: this.ticket.id,
|
|
message: mail
|
|
})
|
|
},
|
|
handleComment(comment) {
|
|
this.postComment({
|
|
id: this.ticket.id,
|
|
message: comment
|
|
})
|
|
},
|
|
changeTicketStatus(ticket) {
|
|
this.updateTicketPartial({
|
|
id: ticket.id,
|
|
state: ticket.state
|
|
})
|
|
},
|
|
assigTicket(ticket) {
|
|
this.updateTicketPartial({
|
|
id: ticket.id,
|
|
assigned_to: ticket.assigned_to
|
|
})
|
|
},
|
|
},
|
|
mounted() {
|
|
this.scheduleAfterInit(() => [this.fetchTicketStates(), this.loadTickets(), this.loadUsers()]);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |