initial commit - LeDiscord plateforme des copains

frontend/src/views/Information.vue

@@ -0,0 +1,177 @@
+<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">
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
+      <p class="text-gray-600">Chargement des informations...</p>
+    </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'
+
+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>