c3lf-system-3/web/src/views/Ticket.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 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";

export default {
    name: 'Ticket',
    components: {Timeline},
    computed: {
        ...mapState(['tickets', 'state_options']),
        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', 'updateTicketPartial', 'fetchTicketStates']),
        handleMail(mail) {
            this.sendMail({
                id: this.ticket.id,
                message: mail
            })
        },
        changeTicketStatus(ticket) {
            this.updateTicketPartial({
                id: ticket.id,
                state: ticket.state
            })
        }
    },
    created() {
        this.fetchTicketStates()
        this.loadTickets()
    }
};
</script>

<style scoped>

</style>