refactor(Breadcrumbs): améliorer l'affichage sur la page edit

src/components/Breadcrumbs.vue

@@ -14,19 +14,40 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import { useEventsStore } from '../stores/events.js'
 
 const route = useRoute()
-const possibleParams = [':id']
+const eventsStore = useEventsStore()
+const eventLabel = ref('')
 
 const breadcrumbs = computed(() => {
   return route.meta.breadcrumbs ?? null
 })
 
+// Watch for route changes to get event data
+watch(() => route.params.id, (id) => {
+  if (!id) {
+    eventLabel.value = ''
+    return
+  }
+
+  // Get event label (or uuid) from store
+  const event = eventsStore.getEventById(id)
+  if (event) {
+    eventLabel.value = event.properties.label
+  } else {
+    eventLabel.value = id
+  }
+}, { immediate: true })
+
 const getItemTitle = (item) => {
-  if (possibleParams.includes(item.title)) {
-    return route.params[item.title.substring(1)]
+  if (item.title === ':id' && eventLabel.value) {
+    // Truncate to first 13 chars + ellipsis if needed
+    return eventLabel.value.length > 13
+      ? eventLabel.value.substring(0, 13) + '…'
+      : eventLabel.value
   }
 
   return item.title
@@ -37,7 +58,7 @@ const getItemTo = (item) => {
     return item.to
   }
 
-  if (possibleParams.some(param => item.to.includes(param))) {
+  if (item.to.includes(':id')) {
     return item.to.replace(':id', route.params.id)
   }
 

src/router.js

@@ -5,7 +5,7 @@ const routes = [
   { path: '/events', name: 'events', component: () => import('./views/EventList.vue'), meta: { title: 'Toutes  les séances', icon: 'mdi-calendar', breadcrumbs: [{ title: 'Toutes les séances', to: '/events' }] } },
   { path: '/events/create', name: 'event-create', component: () => import('./views/EventCreate.vue'), meta: { title: 'Ajouter une séance', icon: 'mdi-plus', breadcrumbs: [{ title: 'Liste', to: '/events' }, { title: 'Ajouter une séance' }] } },
   { path: '/events/:id', name: 'event-details', component: () => import('./views/EventDetail.vue'), meta: { title: "Détails de la séance", icon: 'mdi-calendar', breadcrumbs: [{ title: 'Liste', to: '/events' }, { title: "Détails de la séance" }] } },
-  { path: '/events/:id/edit', name: 'event-edit', component: () => import('./views/EventEdit.vue'), meta: { title: "Modifier la séance", icon: 'mdi-pencil', breadcrumbs: [{ title: 'Liste', to: '/events' }, { title: ':id', to: '/events/:id' }, { title: "Modifier la séance" }] } },
+  { path: '/events/:id/edit', name: 'event-edit', component: () => import('./views/EventEdit.vue'), meta: { title: "Modifier la séance", icon: 'mdi-pencil', breadcrumbs: [{ title: 'Liste', to: '/events' }, { title: ':id', to: '/events/:id' }, { title: "Modifier" }] } },
   { path: '/about', name: 'about', component: () => import('./views/About.vue'), meta: { title: 'À propos', icon: 'mdi-information', breadcrumbs: [{ title: 'À propos', to: '/about' }] } },
   { path: '/stats', name: 'stats', component: () => import('./views/Stats.vue'), meta: { title: 'Statistiques', icon: 'mdi-chart-bar', breadcrumbs: [{ title: 'Statistiques', to: '/stats' }] } },
 ]