add ticket views

web/src/views/Ticket.vue

@@ -0,0 +1,58 @@
+<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>

web/src/views/Tickets.vue

@@ -0,0 +1,49 @@
+<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'"
+                    v-slot="{ 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>
+                </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>