c3lf-system-3/web/src/views/Tickets.vue

<template>
    <div class="container-fluid px-xl-5 mt-3">
        <div class="row">
            <div class="col-xl-8 offset-xl-2">
                <Table
                    :columns="['id', 'name', 'state', 'last_activity', 'assigned_to']"
                    :items="tickets"
                    :keyName="'id'"
                >
                    <template #actions="{ item }">
                        <div class="btn-group">
                            <a class="btn btn-primary" :href="'/ticket/' + item.id" title="view"
                               @click.prevent="gotoDetail(item)">
                                <font-awesome-icon icon="eye"/>
                                View
                            </a>
                        </div>
                    </template>
                </Table>
            </div>
        </div>
    </div>
</template>

<script>
import Table from '@/components/Table';
import Cards from '@/components/Cards';
import Modal from '@/components/Modal';
import EditItem from '@/components/EditItem';
import {mapActions, mapState} from 'vuex';
import Lightbox from '../components/Lightbox';

export default {
    name: 'Tickets',
    components: {Lightbox, Table, Cards, Modal, EditItem},
    computed: mapState(['tickets']),
    methods: {
        gotoDetail(ticket) {
            this.$router.push({name: 'ticket', params: {id: ticket.id}});
        }
    },
    created() {
        this.$store.dispatch('loadTickets');
    }
};
</script>

<style scoped>

</style>