178 lines
6.2 KiB
Vue
178 lines
6.2 KiB
Vue
<template>
|
|
<div class="max-w-4xl mx-auto px-4 py-8">
|
|
<!-- Header -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">Informations</h1>
|
|
<p class="text-lg text-gray-600">Restez informés des dernières nouvelles de LeDiscord</p>
|
|
</div>
|
|
|
|
<!-- Category Filter -->
|
|
<div class="flex flex-wrap gap-2 justify-center mb-8">
|
|
<button
|
|
@click="selectedCategory = null"
|
|
:class="[
|
|
'px-4 py-2 rounded-full text-sm font-medium transition-colors',
|
|
selectedCategory === null
|
|
? 'bg-primary-600 text-white'
|
|
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
|
]"
|
|
>
|
|
Toutes
|
|
</button>
|
|
<button
|
|
v-for="category in availableCategories"
|
|
:key="category"
|
|
@click="selectedCategory = category"
|
|
:class="[
|
|
'px-4 py-2 rounded-full text-sm font-medium transition-colors',
|
|
selectedCategory === category
|
|
? 'bg-primary-600 text-white'
|
|
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
|
]"
|
|
>
|
|
{{ getCategoryLabel(category) }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="text-center py-12">
|
|
<LoadingLogo size="large" text="Chargement des informations..." />
|
|
</div>
|
|
|
|
<!-- No Information -->
|
|
<div v-else-if="filteredInformations.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">Aucune information</h3>
|
|
<p class="text-gray-600">
|
|
{{ selectedCategory ? `Aucune information dans la catégorie "${getCategoryLabel(selectedCategory)}"` : 'Aucune information disponible pour le moment' }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Information List -->
|
|
<div v-else class="space-y-6">
|
|
<div
|
|
v-for="info in filteredInformations"
|
|
:key="info.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',
|
|
getCategoryBadgeClass(info.category)
|
|
]"
|
|
>
|
|
{{ getCategoryLabel(info.category) }}
|
|
</span>
|
|
<span class="text-sm text-gray-500">
|
|
{{ formatDate(info.created_at) }}
|
|
</span>
|
|
</div>
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-2">{{ info.title }}</h2>
|
|
</div>
|
|
<div v-if="info.priority > 0" class="flex items-center gap-1 text-amber-600">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
</svg>
|
|
<span class="text-sm font-medium">Important</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="prose prose-gray max-w-none">
|
|
<div class="whitespace-pre-wrap text-gray-700 leading-relaxed">{{ info.content }}</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(info.updated_at) }}</span>
|
|
<span v-if="!info.is_published" class="text-amber-600 font-medium">Brouillon</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 axios from '@/utils/axios'
|
|
import LoadingLogo from '@/components/LoadingLogo.vue'
|
|
|
|
const toast = useToast()
|
|
|
|
// State
|
|
const informations = ref([])
|
|
const loading = ref(true)
|
|
const selectedCategory = ref(null)
|
|
|
|
// Computed
|
|
const availableCategories = computed(() => {
|
|
const categories = [...new Set(informations.value.map(info => info.category))]
|
|
return categories.sort()
|
|
})
|
|
|
|
const filteredInformations = computed(() => {
|
|
if (!selectedCategory.value) {
|
|
return informations.value
|
|
}
|
|
return informations.value.filter(info => info.category === selectedCategory.value)
|
|
})
|
|
|
|
// Methods
|
|
function getCategoryLabel(category) {
|
|
const labels = {
|
|
'general': 'Général',
|
|
'release': 'Nouvelle version',
|
|
'upcoming': 'À venir',
|
|
'maintenance': 'Maintenance',
|
|
'feature': 'Nouvelle fonctionnalité',
|
|
'bugfix': 'Correction de bug'
|
|
}
|
|
return labels[category] || category
|
|
}
|
|
|
|
function getCategoryBadgeClass(category) {
|
|
const classes = {
|
|
'general': 'bg-gray-100 text-gray-800',
|
|
'release': 'bg-green-100 text-green-800',
|
|
'upcoming': 'bg-blue-100 text-blue-800',
|
|
'maintenance': 'bg-yellow-100 text-yellow-800',
|
|
'feature': 'bg-purple-100 text-purple-800',
|
|
'bugfix': 'bg-red-100 text-red-800'
|
|
}
|
|
return classes[category] || 'bg-gray-100 text-gray-800'
|
|
}
|
|
|
|
function formatDate(date) {
|
|
return formatDistanceToNow(new Date(date), { addSuffix: true, locale: fr })
|
|
}
|
|
|
|
async function fetchInformations() {
|
|
try {
|
|
loading.value = true
|
|
const response = await axios.get('/api/information/public')
|
|
informations.value = response.data
|
|
} catch (error) {
|
|
console.error('Error fetching informations:', error)
|
|
toast.error('Erreur lors du chargement des informations')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
fetchInformations()
|
|
})
|
|
</script>
|