95 lines
No EOL
4 KiB
Vue
95 lines
No EOL
4 KiB
Vue
<template>
|
|
<AsyncLoader :loaded="isTicketsLoaded">
|
|
<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',
|
|
...(getEventSlug==='all'?['event']:[])]"
|
|
:items="getEventTickets.map(formatTicket)"
|
|
:keyName="'id'"
|
|
v-if="layout === 'table'"
|
|
>
|
|
<template v-slot:actions="{item}">
|
|
<div class="btn-group">
|
|
<router-link :to="{name: 'ticket', params: {id: item.id}}" class="btn btn-primary"
|
|
title="view">
|
|
<font-awesome-icon icon="eye"/>
|
|
View
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
<CollapsableCards v-if="layout === 'tasks'" :items="getEventTickets"
|
|
:columns="['id', 'name', 'last_activity', 'assigned_to',
|
|
...(getEventSlug==='all'?['event']:[])]"
|
|
:keyName="'state'" :sections="['pending_new', 'pending_open','pending_shipping',
|
|
'pending_physical_confirmation','pending_return','pending_postponed','pending_suspected_spam'].map(stateInfo)">
|
|
<template #section_header="{index, section, count}">
|
|
{{ section.text }} <span class="badge badge-light ml-1">{{ count }}</span>
|
|
</template>
|
|
<template #section_body="{item}">
|
|
<tr>
|
|
<td>{{ item.id }}</td>
|
|
<td>{{ item.name }}</td>
|
|
<td>{{ item.last_activity }}</td>
|
|
<td>{{ item.assigned_to }}</td>
|
|
<td v-if="getEventSlug==='all'">{{ item.event }}</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<router-link :to="{name: 'ticket', params: {id: item.id}}" class="btn btn-primary"
|
|
title="view">
|
|
<font-awesome-icon icon="eye"/>
|
|
View
|
|
</router-link>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</CollapsableCards>
|
|
</div>
|
|
</AsyncLoader>
|
|
</template>
|
|
|
|
<script>
|
|
import Cards from '@/components/Cards';
|
|
import {mapActions, mapGetters, mapState} from 'vuex';
|
|
import Table from '@/components/Table';
|
|
import CollapsableCards from "@/components/CollapsableCards.vue";
|
|
import AsyncLoader from "@/components/AsyncLoader.vue";
|
|
import router from "@/router";
|
|
|
|
export default {
|
|
name: 'Tickets',
|
|
components: {AsyncLoader, Table, Cards, CollapsableCards},
|
|
computed: {
|
|
...mapGetters(['getEventTickets', 'isTicketsLoaded', 'stateInfo', 'getEventSlug', 'layout']),
|
|
},
|
|
methods: {
|
|
...mapActions(['loadTickets', 'fetchTicketStates', 'scheduleAfterInit']),
|
|
gotoDetail(ticket) {
|
|
router.push({name: 'ticket', params: {id: ticket.id}});
|
|
},
|
|
formatTicket(ticket) {
|
|
return {
|
|
id: ticket.id,
|
|
name: ticket.name,
|
|
state: this.stateInfo(ticket.state).text,
|
|
stateColor: this.stateInfo(ticket.state).color,
|
|
last_activity: ticket.last_activity,
|
|
assigned_to: ticket.assigned_to,
|
|
event: ticket.event
|
|
};
|
|
}
|
|
},
|
|
mounted() {
|
|
this.scheduleAfterInit(() => [this.fetchTicketStates(), this.loadTickets()]);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |