From de315813bbc994d88d569e83b231d9f1c6871191 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Tue, 7 Jul 2026 12:10:59 +0200
Subject: [PATCH] =?UTF-8?q?refactor(Breadcrumbs):=20am=C3=A9liorer=20l'aff?=
 =?UTF-8?q?ichage=20sur=20la=20page=20edit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Breadcrumbs.vue | 31 ++++++++++++++++++++++++++-----
 src/router.js                  |  2 +-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/Breadcrumbs.vue b/src/components/Breadcrumbs.vue
index 7183d2c..4f2bb98 100644
--- a/src/components/Breadcrumbs.vue
+++ b/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)
   }
 
diff --git a/src/router.js b/src/router.js
index af1ac10..cdb1f24 100644
--- a/src/router.js
+++ b/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' }] } },
 ]