527 lines
17 KiB
Vue
527 lines
17 KiB
Vue
<template>
|
|
<div class="max-w-6xl mx-auto px-4 py-8">
|
|
<!-- Header -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">Mes tickets</h1>
|
|
<p class="text-lg text-gray-600">Suivez vos demandes et signalements</p>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
|
<div class="bg-white rounded-lg shadow p-4 text-center">
|
|
<div class="text-2xl font-bold text-blue-600">{{ ticketStats.open }}</div>
|
|
<div class="text-sm text-gray-600">Ouverts</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow p-4 text-center">
|
|
<div class="text-2xl font-bold text-yellow-600">{{ ticketStats.in_progress }}</div>
|
|
<div class="text-sm text-gray-600">En cours</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow p-4 text-center">
|
|
<div class="text-2xl font-bold text-green-600">{{ ticketStats.closed }}</div>
|
|
<div class="text-sm text-gray-600">Fermés</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow p-4 text-center">
|
|
<div class="text-2xl font-bold text-gray-600">{{ ticketStats.total }}</div>
|
|
<div class="text-sm text-gray-600">Total</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="flex flex-wrap gap-2 justify-center mb-6">
|
|
<button
|
|
@click="selectedStatus = null"
|
|
:class="[
|
|
'px-4 py-2 rounded-full text-sm font-medium transition-colors',
|
|
selectedStatus === null
|
|
? 'bg-primary-600 text-white'
|
|
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
|
]"
|
|
>
|
|
Tous
|
|
</button>
|
|
<button
|
|
v-for="status in availableStatuses"
|
|
:key="status"
|
|
@click="selectedStatus = status"
|
|
:class="[
|
|
'px-4 py-2 rounded-full text-sm font-medium transition-colors',
|
|
selectedStatus === status
|
|
? 'bg-primary-600 text-white'
|
|
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
|
]"
|
|
>
|
|
{{ getStatusLabel(status) }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="text-center py-12">
|
|
<LoadingLogo size="large" text="Chargement de vos tickets..." />
|
|
</div>
|
|
|
|
<!-- No Tickets -->
|
|
<div v-else-if="filteredTickets.length === 0" class="text-center py-12">
|
|
<div class="text-gray-400 mb-4">
|
|
<svg class="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Aucun ticket</h3>
|
|
<p class="text-gray-600">
|
|
{{ selectedStatus ? `Aucun ticket avec le statut "${getStatusLabel(selectedStatus)}"` : 'Vous n\'avez pas encore créé de ticket' }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tickets List -->
|
|
<div v-else class="space-y-4">
|
|
<div
|
|
v-for="ticket in filteredTickets"
|
|
:key="ticket.id"
|
|
class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow"
|
|
>
|
|
<!-- Header -->
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<span
|
|
:class="[
|
|
'px-3 py-1 rounded-full text-xs font-medium',
|
|
getTypeBadgeClass(ticket.ticket_type)
|
|
]"
|
|
>
|
|
{{ getTypeLabel(ticket.ticket_type) }}
|
|
</span>
|
|
<span
|
|
:class="[
|
|
'px-3 py-1 rounded-full text-xs font-medium',
|
|
getStatusBadgeClass(ticket.status)
|
|
]"
|
|
>
|
|
{{ getStatusLabel(ticket.status) }}
|
|
</span>
|
|
<span
|
|
:class="[
|
|
'px-3 py-1 rounded-full text-xs font-medium',
|
|
getPriorityBadgeClass(ticket.priority)
|
|
]"
|
|
>
|
|
{{ getPriorityLabel(ticket.priority) }}
|
|
</span>
|
|
<span class="text-sm text-gray-500">
|
|
{{ formatDate(ticket.created_at) }}
|
|
</span>
|
|
</div>
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-2">{{ ticket.title }}</h2>
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<button
|
|
@click="editTicket(ticket)"
|
|
class="text-blue-600 hover:text-blue-800 text-sm font-medium"
|
|
>
|
|
Modifier
|
|
</button>
|
|
<button
|
|
@click="deleteTicket(ticket.id)"
|
|
class="text-red-600 hover:text-red-800 text-sm font-medium"
|
|
>
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="prose prose-gray max-w-none mb-4">
|
|
<div class="whitespace-pre-wrap text-gray-700 leading-relaxed">{{ ticket.description }}</div>
|
|
</div>
|
|
|
|
<!-- Screenshot -->
|
|
<div v-if="ticket.screenshot_path" class="mb-4">
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">Screenshot :</h4>
|
|
<img
|
|
:src="getMediaUrl(ticket.screenshot_path)"
|
|
:alt="ticket.title"
|
|
class="max-w-md rounded-lg border border-gray-200 cursor-pointer hover:opacity-90 transition-opacity"
|
|
@click="viewScreenshot(ticket.screenshot_path)"
|
|
>
|
|
</div>
|
|
|
|
<!-- Admin Notes -->
|
|
<div v-if="ticket.admin_notes" class="mb-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
|
|
<h4 class="text-sm font-medium text-blue-800 mb-2">Réponse de l'équipe :</h4>
|
|
<div class="text-sm text-blue-700 whitespace-pre-wrap">{{ ticket.admin_notes }}</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-sm text-gray-500">
|
|
<span>Mis à jour le {{ formatDate(ticket.updated_at) }}</span>
|
|
<span v-if="ticket.assigned_admin_name" class="text-blue-600">
|
|
Assigné à {{ ticket.assigned_admin_name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ticket Modal -->
|
|
<transition
|
|
enter-active-class="transition ease-out duration-200"
|
|
enter-from-class="opacity-0"
|
|
enter-to-class="opacity-100"
|
|
leave-active-class="transition ease-in duration-150"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<div
|
|
v-if="showTicketModal"
|
|
class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
|
|
>
|
|
<div class="bg-white rounded-xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl font-semibold">
|
|
{{ editingTicket ? 'Modifier le ticket' : 'Nouveau ticket' }}
|
|
</h2>
|
|
<button
|
|
@click="showTicketModal = false"
|
|
class="text-gray-400 hover:text-gray-600"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form @submit.prevent="saveTicket" class="space-y-6">
|
|
<!-- Title -->
|
|
<div>
|
|
<label class="label">Titre *</label>
|
|
<input
|
|
v-model="ticketForm.title"
|
|
type="text"
|
|
class="input"
|
|
required
|
|
maxlength="200"
|
|
placeholder="Titre de votre ticket"
|
|
>
|
|
</div>
|
|
|
|
<!-- Type -->
|
|
<div>
|
|
<label class="label">Type</label>
|
|
<select v-model="ticketForm.ticket_type" class="input">
|
|
<option value="bug">🐛 Bug</option>
|
|
<option value="feature_request">💡 Demande de fonctionnalité</option>
|
|
<option value="improvement">✨ Amélioration</option>
|
|
<option value="support">❓ Support</option>
|
|
<option value="other">📝 Autre</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Priority -->
|
|
<div>
|
|
<label class="label">Priorité</label>
|
|
<select v-model="ticketForm.priority" class="input">
|
|
<option value="low">🟢 Faible</option>
|
|
<option value="medium">🟡 Moyenne</option>
|
|
<option value="high">🟠 Élevée</option>
|
|
<option value="urgent">🔴 Urgente</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div>
|
|
<label class="label">Description *</label>
|
|
<textarea
|
|
v-model="ticketForm.description"
|
|
class="input resize-none"
|
|
rows="6"
|
|
required
|
|
placeholder="Décrivez votre problème ou votre demande en détail..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Screenshot -->
|
|
<div>
|
|
<label class="label">Screenshot (optionnel)</label>
|
|
<input
|
|
ref="screenshotInput"
|
|
type="file"
|
|
accept="image/*"
|
|
class="input"
|
|
@change="handleScreenshotChange"
|
|
>
|
|
<div class="mt-1 text-sm text-gray-600">
|
|
Formats acceptés : JPG, PNG, GIF, WebP (max 5MB)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex gap-3 pt-4">
|
|
<button
|
|
type="button"
|
|
@click="showTicketModal = false"
|
|
class="flex-1 btn-secondary"
|
|
>
|
|
Annuler
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="flex-1 btn-primary"
|
|
:disabled="savingTicket"
|
|
>
|
|
<Save class="w-4 h-4 mr-2" />
|
|
{{ savingTicket ? 'Sauvegarde...' : 'Sauvegarder' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<!-- Screenshot Viewer Modal -->
|
|
<transition
|
|
enter-active-class="transition ease-out duration-200"
|
|
enter-from-class="opacity-0"
|
|
enter-to-class="opacity-100"
|
|
leave-active-class="transition ease-in duration-150"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<div
|
|
v-if="showScreenshotModal"
|
|
class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4"
|
|
@click="showScreenshotModal = false"
|
|
>
|
|
<div class="max-w-4xl max-h-[90vh] overflow-auto">
|
|
<img
|
|
:src="selectedScreenshot"
|
|
alt="Screenshot"
|
|
class="max-w-full h-auto rounded-lg"
|
|
@click.stop
|
|
>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useToast } from 'vue-toastification'
|
|
import { formatDistanceToNow } from 'date-fns'
|
|
import { fr } from 'date-fns/locale'
|
|
import { Save } from 'lucide-vue-next'
|
|
import axios from '@/utils/axios'
|
|
import { getMediaUrl } from '@/utils/axios'
|
|
import LoadingLogo from '@/components/LoadingLogo.vue'
|
|
|
|
const toast = useToast()
|
|
|
|
// State
|
|
const tickets = ref([])
|
|
const loading = ref(true)
|
|
const selectedStatus = ref(null)
|
|
const showTicketModal = ref(false)
|
|
const editingTicket = ref(null)
|
|
const savingTicket = ref(false)
|
|
const showScreenshotModal = ref(false)
|
|
const selectedScreenshot = ref('')
|
|
const screenshotInput = ref(null)
|
|
|
|
const ticketForm = ref({
|
|
title: '',
|
|
description: '',
|
|
ticket_type: 'other',
|
|
priority: 'medium'
|
|
})
|
|
|
|
// Computed
|
|
const availableStatuses = computed(() => {
|
|
const statuses = [...new Set(tickets.value.map(ticket => ticket.status))]
|
|
return statuses.sort()
|
|
})
|
|
|
|
const filteredTickets = computed(() => {
|
|
if (!selectedStatus.value) {
|
|
return tickets.value
|
|
}
|
|
return tickets.value.filter(ticket => ticket.status === selectedStatus.value)
|
|
})
|
|
|
|
const ticketStats = computed(() => {
|
|
const stats = {
|
|
open: tickets.value.filter(t => t.status === 'open').length,
|
|
in_progress: tickets.value.filter(t => t.status === 'in_progress').length,
|
|
closed: tickets.value.filter(t => t.status === 'closed').length,
|
|
total: tickets.value.length
|
|
}
|
|
return stats
|
|
})
|
|
|
|
// Methods
|
|
function getTypeLabel(type) {
|
|
const labels = {
|
|
'bug': 'Bug',
|
|
'feature_request': 'Fonctionnalité',
|
|
'improvement': 'Amélioration',
|
|
'support': 'Support',
|
|
'other': 'Autre'
|
|
}
|
|
return labels[type] || type
|
|
}
|
|
|
|
function getStatusLabel(status) {
|
|
const labels = {
|
|
'open': 'Ouvert',
|
|
'in_progress': 'En cours',
|
|
'closed': 'Fermé'
|
|
}
|
|
return labels[status] || status
|
|
}
|
|
|
|
function getPriorityLabel(priority) {
|
|
const labels = {
|
|
'low': 'Faible',
|
|
'medium': 'Moyenne',
|
|
'high': 'Élevée',
|
|
'urgent': 'Urgente'
|
|
}
|
|
return labels[priority] || priority
|
|
}
|
|
|
|
function getTypeBadgeClass(type) {
|
|
const classes = {
|
|
'bug': 'bg-red-100 text-red-800',
|
|
'feature_request': 'bg-blue-100 text-blue-800',
|
|
'improvement': 'bg-green-100 text-green-800',
|
|
'support': 'bg-yellow-100 text-yellow-800',
|
|
'other': 'bg-gray-100 text-gray-800'
|
|
}
|
|
return classes[type] || 'bg-gray-100 text-gray-800'
|
|
}
|
|
|
|
function getStatusBadgeClass(status) {
|
|
const classes = {
|
|
'open': 'bg-blue-100 text-blue-800',
|
|
'in_progress': 'bg-yellow-100 text-yellow-800',
|
|
|
|
'closed': 'bg-gray-100 text-gray-800'
|
|
}
|
|
return classes[status] || 'bg-gray-100 text-gray-800'
|
|
}
|
|
|
|
function getPriorityBadgeClass(priority) {
|
|
const classes = {
|
|
'low': 'bg-green-100 text-green-800',
|
|
'medium': 'bg-yellow-100 text-yellow-800',
|
|
'high': 'bg-orange-100 text-orange-800',
|
|
'urgent': 'bg-red-100 text-red-800'
|
|
}
|
|
return classes[priority] || 'bg-gray-100 text-gray-800'
|
|
}
|
|
|
|
function formatDate(date) {
|
|
return formatDistanceToNow(new Date(date), { addSuffix: true, locale: fr })
|
|
}
|
|
|
|
function resetTicketForm() {
|
|
ticketForm.value = {
|
|
title: '',
|
|
description: '',
|
|
ticket_type: 'other',
|
|
priority: 'medium'
|
|
}
|
|
editingTicket.value = null
|
|
if (screenshotInput.value) {
|
|
screenshotInput.value.value = ''
|
|
}
|
|
}
|
|
|
|
function editTicket(ticket) {
|
|
editingTicket.value = ticket
|
|
ticketForm.value = {
|
|
title: ticket.title,
|
|
description: ticket.description,
|
|
ticket_type: ticket.ticket_type,
|
|
priority: ticket.priority
|
|
}
|
|
showTicketModal.value = true
|
|
}
|
|
|
|
function handleScreenshotChange(event) {
|
|
const file = event.target.files[0]
|
|
if (file && file.size > 5 * 1024 * 1024) {
|
|
toast.error('Le fichier est trop volumineux (max 5MB)')
|
|
event.target.value = ''
|
|
}
|
|
}
|
|
|
|
function viewScreenshot(screenshotPath) {
|
|
selectedScreenshot.value = getMediaUrl(screenshotPath)
|
|
showScreenshotModal.value = true
|
|
}
|
|
|
|
async function saveTicket() {
|
|
savingTicket.value = true
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('title', ticketForm.value.title)
|
|
formData.append('description', ticketForm.value.description)
|
|
formData.append('ticket_type', ticketForm.value.ticket_type)
|
|
formData.append('priority', ticketForm.value.priority)
|
|
|
|
if (screenshotInput.value && screenshotInput.value.files[0]) {
|
|
formData.append('screenshot', screenshotInput.value.files[0])
|
|
}
|
|
|
|
if (editingTicket.value) {
|
|
// Update existing ticket
|
|
await axios.put(`/api/tickets/${editingTicket.value.id}`, ticketForm.value)
|
|
toast.success('Ticket mis à jour')
|
|
} else {
|
|
// Create new ticket
|
|
await axios.post('/api/tickets/', formData)
|
|
toast.success('Ticket créé avec succès')
|
|
}
|
|
|
|
await fetchTickets()
|
|
showTicketModal.value = false
|
|
resetTicketForm()
|
|
} catch (error) {
|
|
toast.error('Erreur lors de la sauvegarde')
|
|
console.error('Error saving ticket:', error)
|
|
} finally {
|
|
savingTicket.value = false
|
|
}
|
|
}
|
|
|
|
async function deleteTicket(ticketId) {
|
|
if (!confirm('Êtes-vous sûr de vouloir supprimer ce ticket ? Cette action est irréversible.')) return
|
|
|
|
try {
|
|
await axios.delete(`/api/tickets/${ticketId}`)
|
|
await fetchTickets()
|
|
toast.success('Ticket supprimé')
|
|
} catch (error) {
|
|
toast.error('Erreur lors de la suppression')
|
|
console.error('Error deleting ticket:', error)
|
|
}
|
|
}
|
|
|
|
async function fetchTickets() {
|
|
try {
|
|
loading.value = true
|
|
const response = await axios.get('/api/tickets/')
|
|
tickets.value = response.data
|
|
} catch (error) {
|
|
console.error('Error fetching tickets:', error)
|
|
toast.error('Erreur lors du chargement des tickets')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
fetchTickets()
|
|
})
|
|
</script>
|