2024-01-07 20:32:42 +00:00
|
|
|
<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'"
|
|
|
|
>
|
2023-12-28 22:32:30 +00:00
|
|
|
<template #actions="{ item }">
|
|
|
|
<div class="btn-group">
|
2024-01-06 17:59:44 +00:00
|
|
|
<a class="btn btn-primary" :href="'/'+ getEventSlug + '/ticket/' + item.id" title="view"
|
2023-12-28 22:32:30 +00:00
|
|
|
@click.prevent="gotoDetail(item)">
|
|
|
|
<font-awesome-icon icon="eye"/>
|
|
|
|
View
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</template>
|
2024-01-07 20:32:42 +00:00
|
|
|
</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';
|
2024-01-06 17:59:44 +00:00
|
|
|
import {mapActions, mapGetters, mapState} from 'vuex';
|
2024-01-07 20:32:42 +00:00
|
|
|
import Lightbox from '../components/Lightbox';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Tickets',
|
|
|
|
components: {Lightbox, Table, Cards, Modal, EditItem},
|
2024-01-06 17:59:44 +00:00
|
|
|
computed: {
|
|
|
|
...mapState(['tickets']),
|
|
|
|
...mapGetters(['getEventSlug'])
|
|
|
|
},
|
2024-01-07 20:32:42 +00:00
|
|
|
methods: {
|
2024-01-06 17:59:44 +00:00
|
|
|
...mapActions(['loadTickets', 'fetchTicketStates']),
|
2024-01-07 20:32:42 +00:00
|
|
|
gotoDetail(ticket) {
|
|
|
|
this.$router.push({name: 'ticket', params: {id: ticket.id}});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
2024-01-06 17:59:44 +00:00
|
|
|
this.fetchTicketStates();
|
|
|
|
this.loadTickets();
|
2024-01-07 20:32:42 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
</style>
|