initial commit - LeDiscord plateforme des copains
This commit is contained in:
EvanChal
510
frontend/src/views/EventDetail.vue
Normal file
510
frontend/src/views/EventDetail.vue
Normal file
@@ -0,0 +1,510 @@
|
||||
<template>
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="text-center py-12">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
|
||||
<p class="mt-4 text-gray-600">Chargement de l'événement...</p>
|
||||
</div>
|
||||
|
||||
<!-- Event not found -->
|
||||
<div v-else-if="!event" class="text-center py-12">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-4">Événement non trouvé</h1>
|
||||
<p class="text-gray-600 mb-6">L'événement que vous recherchez n'existe pas ou a été supprimé.</p>
|
||||
<router-link to="/events" class="btn-primary">
|
||||
Retour aux événements
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Event details -->
|
||||
<div v-else>
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<router-link to="/events" class="text-primary-600 hover:text-primary-700 flex items-center">
|
||||
<ArrowLeft class="w-4 h-4 mr-2" />
|
||||
Retour aux événements
|
||||
</router-link>
|
||||
|
||||
<div v-if="canEdit" class="flex space-x-2">
|
||||
<button
|
||||
@click="showEditModal = true"
|
||||
class="btn-secondary"
|
||||
>
|
||||
<Edit class="w-4 h-4 mr-2" />
|
||||
Modifier
|
||||
</button>
|
||||
<button
|
||||
@click="deleteEvent"
|
||||
class="btn-secondary text-accent-600 hover:text-accent-700 hover:border-accent-300"
|
||||
>
|
||||
<Trash2 class="w-4 h-4 mr-2" />
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-6">
|
||||
<!-- Cover Image -->
|
||||
<div class="w-64 h-48 bg-gradient-to-br from-primary-400 to-primary-600 rounded-xl flex items-center justify-center">
|
||||
<Calendar v-if="!event.cover_image" class="w-16 h-16 text-white" />
|
||||
<img
|
||||
v-else
|
||||
:src="getMediaUrl(event.cover_image)"
|
||||
:alt="event.title"
|
||||
class="w-full h-full object-cover rounded-xl"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Event Info -->
|
||||
<div class="flex-1">
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-4">{{ event.title }}</h1>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center text-gray-600">
|
||||
<Clock class="w-5 h-5 mr-3" />
|
||||
<span>{{ formatDate(event.date) }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="event.end_date" class="flex items-center text-gray-600">
|
||||
<Clock class="w-5 h-5 mr-3" />
|
||||
<span>Fin : {{ formatDate(event.end_date) }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="event.location" class="flex items-center text-gray-600">
|
||||
<MapPin class="w-5 h-5 mr-3" />
|
||||
<span>{{ event.location }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center text-gray-600">
|
||||
<User class="w-5 h-5 mr-3" />
|
||||
<span>Organisé par {{ event.creator_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Participation Stats -->
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h3 class="font-semibold text-gray-900 mb-3">Participation</h3>
|
||||
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-success-600">{{ event.present_count || 0 }}</div>
|
||||
<div class="text-gray-600">Présents</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-warning-600">{{ event.maybe_count || 0 }}</div>
|
||||
<div class="text-gray-600">Peut-être</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-accent-600">{{ event.absent_count || 0 }}</div>
|
||||
<div class="text-gray-600">Absents</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-secondary-600">{{ event.pending_count || 0 }}</div>
|
||||
<div class="text-gray-600">En attente</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div v-if="event.description" class="card p-6 mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Description</h2>
|
||||
<p class="text-gray-700 whitespace-pre-wrap">{{ event.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Map Section -->
|
||||
<div v-if="event.latitude && event.longitude" class="card p-6 mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Localisation</h2>
|
||||
<div class="bg-gray-100 rounded-lg p-6 h-48 flex items-center justify-center">
|
||||
<div class="text-center text-gray-600">
|
||||
<MapPin class="w-12 h-12 mx-auto mb-2 text-primary-600" />
|
||||
<p class="text-sm">Carte interactive</p>
|
||||
<p class="text-xs mt-1">{{ event.latitude }}, {{ event.longitude }}</p>
|
||||
<a
|
||||
:href="`https://www.openstreetmap.org/?mlat=${event.latitude}&mlon=${event.longitude}&zoom=15`"
|
||||
target="_blank"
|
||||
class="text-primary-600 hover:underline text-sm mt-2 inline-block"
|
||||
>
|
||||
Voir sur OpenStreetMap
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- My Participation -->
|
||||
<div class="card p-6 mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Ma participation</h2>
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
@click="updateParticipation('present')"
|
||||
class="flex-1 py-3 px-4 rounded-lg text-sm font-medium transition-colors"
|
||||
:class="getParticipationClass('present')"
|
||||
>
|
||||
✓ Présent
|
||||
</button>
|
||||
<button
|
||||
@click="updateParticipation('maybe')"
|
||||
class="flex-1 py-3 px-4 rounded-lg text-sm font-medium transition-colors"
|
||||
:class="getParticipationClass('maybe')"
|
||||
>
|
||||
? Peut-être
|
||||
</button>
|
||||
<button
|
||||
@click="updateParticipation('absent')"
|
||||
class="flex-1 py-3 px-4 rounded-lg text-sm font-medium transition-colors"
|
||||
:class="getParticipationClass('absent')"
|
||||
>
|
||||
✗ Absent
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Participants -->
|
||||
<div class="card p-6 mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Participants</h2>
|
||||
|
||||
<div v-if="event.participations.length === 0" class="text-center py-8 text-gray-500">
|
||||
Aucun participant pour le moment
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-for="participation in event.participations"
|
||||
:key="participation.user_id"
|
||||
class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
||||
>
|
||||
<div class="flex items-center space-x-3">
|
||||
<img
|
||||
v-if="participation.avatar_url"
|
||||
:src="getMediaUrl(participation.avatar_url)"
|
||||
:alt="participation.full_name"
|
||||
class="w-10 h-10 rounded-full object-cover"
|
||||
>
|
||||
<div v-else class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center">
|
||||
<User class="w-5 h-5 text-primary-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium text-gray-900">{{ participation.full_name }}</p>
|
||||
<p class="text-sm text-gray-600">@{{ participation.username }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<span
|
||||
class="px-3 py-1 rounded-full text-xs font-medium"
|
||||
:class="getStatusClass(participation.status)"
|
||||
>
|
||||
{{ getStatusText(participation.status) }}
|
||||
</span>
|
||||
<span v-if="participation.response_date" class="text-xs text-gray-500">
|
||||
{{ formatRelativeDate(participation.response_date) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Albums -->
|
||||
<div class="card p-6 mb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-semibold text-gray-900">Albums liés</h2>
|
||||
<router-link
|
||||
:to="`/albums?event_id=${event.id}`"
|
||||
class="text-primary-600 hover:text-primary-700 text-sm"
|
||||
>
|
||||
Voir tous les albums →
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div v-if="relatedAlbums.length === 0" class="text-center py-8 text-gray-500">
|
||||
Aucun album lié à cet événement
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<router-link
|
||||
v-for="album in relatedAlbums"
|
||||
:key="album.id"
|
||||
:to="`/albums/${album.id}`"
|
||||
class="block hover:shadow-lg transition-all duration-300 rounded-xl overflow-hidden bg-white border border-gray-200 hover:border-primary-300 hover:scale-105 transform"
|
||||
>
|
||||
<div class="aspect-[4/3] bg-gray-100 relative overflow-hidden">
|
||||
<img
|
||||
v-if="album.cover_image"
|
||||
:src="getMediaUrl(album.cover_image)"
|
||||
:alt="album.title"
|
||||
class="w-full h-full object-cover hover:scale-110 transition-transform duration-300"
|
||||
>
|
||||
<div v-else class="w-full h-full flex items-center justify-center">
|
||||
<Image class="w-16 h-16 text-gray-400" />
|
||||
</div>
|
||||
|
||||
<!-- Media Count Badge -->
|
||||
<div class="absolute top-3 right-3 bg-black bg-opacity-80 text-white text-sm px-3 py-1.5 rounded-full font-medium">
|
||||
{{ album.media_count }} média{{ album.media_count > 1 ? 's' : '' }}
|
||||
</div>
|
||||
|
||||
<!-- Hover Overlay -->
|
||||
<div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition-all duration-300 flex items-center justify-center">
|
||||
<div class="opacity-0 hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="bg-white bg-opacity-90 text-gray-900 px-4 py-2 rounded-full font-medium">
|
||||
Voir l'album →
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-gray-900 text-lg mb-2 line-clamp-2">{{ album.title }}</h3>
|
||||
<div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
|
||||
<User class="w-4 h-4" />
|
||||
<span>{{ album.creator_name }}</span>
|
||||
</div>
|
||||
<p v-if="album.description" class="text-sm text-gray-500 line-clamp-2">{{ album.description }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Event 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="showEditModal"
|
||||
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-md w-full p-6">
|
||||
<h2 class="text-xl font-semibold mb-4">Modifier l'événement</h2>
|
||||
|
||||
<form @submit.prevent="updateEvent" class="space-y-4">
|
||||
<div>
|
||||
<label class="label">Titre</label>
|
||||
<input
|
||||
v-model="editForm.title"
|
||||
type="text"
|
||||
required
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">Description</label>
|
||||
<textarea
|
||||
v-model="editForm.description"
|
||||
rows="3"
|
||||
class="input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">Date et heure</label>
|
||||
<input
|
||||
v-model="editForm.date"
|
||||
type="datetime-local"
|
||||
required
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">Lieu</label>
|
||||
<input
|
||||
v-model="editForm.location"
|
||||
type="text"
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
@click="showEditModal = false"
|
||||
class="flex-1 btn-secondary"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="updating"
|
||||
class="flex-1 btn-primary"
|
||||
>
|
||||
{{ updating ? 'Mise à jour...' : 'Mettre à jour' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useToast } from 'vue-toastification'
|
||||
import axios from '@/utils/axios'
|
||||
import { getMediaUrl } from '@/utils/axios'
|
||||
import { format, formatDistanceToNow } from 'date-fns'
|
||||
import { fr } from 'date-fns/locale'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Calendar,
|
||||
Clock,
|
||||
MapPin,
|
||||
User,
|
||||
Edit,
|
||||
Trash2,
|
||||
Image
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const toast = useToast()
|
||||
|
||||
const event = ref(null)
|
||||
const relatedAlbums = ref([])
|
||||
const loading = ref(true)
|
||||
const updating = ref(false)
|
||||
const showEditModal = ref(false)
|
||||
|
||||
const editForm = ref({
|
||||
title: '',
|
||||
description: '',
|
||||
date: '',
|
||||
location: ''
|
||||
})
|
||||
|
||||
const canEdit = computed(() =>
|
||||
event.value && (event.value.creator_id === authStore.user?.id || authStore.user?.is_admin)
|
||||
)
|
||||
|
||||
function formatDate(date) {
|
||||
return format(new Date(date), 'EEEE d MMMM yyyy à HH:mm', { locale: fr })
|
||||
}
|
||||
|
||||
function formatRelativeDate(date) {
|
||||
return formatDistanceToNow(new Date(date), { addSuffix: true, locale: fr })
|
||||
}
|
||||
|
||||
function getParticipationClass(status) {
|
||||
const participation = event.value?.participations.find(p => p.user_id === authStore.user?.id)
|
||||
const isSelected = participation?.status === status
|
||||
|
||||
if (status === 'present') {
|
||||
return isSelected
|
||||
? 'bg-success-100 text-success-700 border-success-300'
|
||||
: 'bg-white text-gray-700 border-gray-300 hover:bg-success-50'
|
||||
} else if (status === 'maybe') {
|
||||
return isSelected
|
||||
? 'bg-warning-100 text-warning-700 border-warning-300'
|
||||
: 'bg-white text-gray-700 border-gray-300 hover:bg-warning-50'
|
||||
} else {
|
||||
return isSelected
|
||||
? 'bg-accent-100 text-accent-700 border-accent-300'
|
||||
: 'bg-white text-gray-700 border-gray-300 hover:bg-accent-50'
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
switch (status) {
|
||||
case 'present':
|
||||
return 'bg-success-100 text-success-700'
|
||||
case 'maybe':
|
||||
return 'bg-warning-100 text-warning-700'
|
||||
case 'absent':
|
||||
return 'bg-accent-100 text-accent-700'
|
||||
default:
|
||||
return 'bg-secondary-100 text-secondary-700'
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusText(status) {
|
||||
switch (status) {
|
||||
case 'present':
|
||||
return 'Présent'
|
||||
case 'maybe':
|
||||
return 'Peut-être'
|
||||
case 'absent':
|
||||
return 'Absent'
|
||||
default:
|
||||
return 'En attente'
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchEvent() {
|
||||
try {
|
||||
const response = await axios.get(`/api/events/${route.params.id}`)
|
||||
event.value = response.data
|
||||
|
||||
// Fetch related albums
|
||||
const albumsResponse = await axios.get(`/api/albums?event_id=${event.value.id}`)
|
||||
relatedAlbums.value = albumsResponse.data
|
||||
|
||||
// Initialize edit form
|
||||
editForm.value = {
|
||||
title: event.value.title,
|
||||
description: event.value.description || '',
|
||||
date: format(new Date(event.value.date), "yyyy-MM-dd'T'HH:mm", { locale: fr }),
|
||||
location: event.value.location || ''
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Erreur lors du chargement de l\'événement')
|
||||
console.error('Error fetching event:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function updateParticipation(status) {
|
||||
try {
|
||||
const response = await axios.put(`/api/events/${event.value.id}/participation`, { status })
|
||||
event.value = response.data
|
||||
toast.success('Participation mise à jour')
|
||||
} catch (error) {
|
||||
toast.error('Erreur lors de la mise à jour')
|
||||
}
|
||||
}
|
||||
|
||||
async function updateEvent() {
|
||||
updating.value = true
|
||||
try {
|
||||
const response = await axios.put(`/api/events/${event.value.id}`, {
|
||||
...editForm.value,
|
||||
date: new Date(editForm.value.date).toISOString()
|
||||
})
|
||||
event.value = response.data
|
||||
showEditModal.value = false
|
||||
toast.success('Événement mis à jour')
|
||||
} catch (error) {
|
||||
toast.error('Erreur lors de la mise à jour')
|
||||
}
|
||||
updating.value = false
|
||||
}
|
||||
|
||||
async function deleteEvent() {
|
||||
if (!confirm('Êtes-vous sûr de vouloir supprimer cet événement ?')) return
|
||||
|
||||
try {
|
||||
await axios.delete(`/api/events/${event.value.id}`)
|
||||
toast.success('Événement supprimé')
|
||||
router.push('/events')
|
||||
} catch (error) {
|
||||
toast.error('Erreur lors de la suppression')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchEvent()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user