Admin: Add breadcrumb to colors configuration page - refs #5715

assets/vue/components/Breadcrumb.vue

@@ -26,7 +26,7 @@
 
 <script setup>
 import { ref, watchEffect } from "vue"
-import { useRoute } from "vue-router"
+import { useRoute, useRouter } from "vue-router"
 import { useI18n } from "vue-i18n"
 import Breadcrumb from "primevue/breadcrumb"
 import { useCidReqStore } from "../store/cidReq"
@@ -37,6 +37,7 @@ const legacyItems = ref(window.breadcrumb)
 
 const cidReqStore = useCidReqStore()
 const route = useRoute()
+const router = useRouter()
 const { t } = useI18n()
 
 const { course, session } = storeToRefs(cidReqStore)
@@ -62,6 +63,21 @@ watchEffect(() => {
 
   itemList.value = []
 
+  if (route.fullPath.startsWith("/admin")) {
+    const parts = route.path.split("/").filter(Boolean)
+    parts.forEach((part, index) => {
+      const path = `/${parts.slice(0, index + 1).join("/")}`
+      const matchedRoute = router.getRoutes().find(r => r.path === path)
+      if (matchedRoute) {
+        const label = matchedRoute.meta?.breadcrumb || t(part.charAt(0).toUpperCase() + part.slice(1))
+        itemList.value.push({
+          label: t(label),
+          route: { path },
+        })
+      }
+    })
+  }
+
   if (route.name && route.name.includes("Page")) {
     itemList.value.push({
       label: t("Pages"),

assets/vue/router/admin.js

@@ -1,19 +1,19 @@
 export default {
     path: '/admin',
     name: 'admin',
-    meta: { requiresAuth: true },
+    meta: { requiresAuth: true, showBreadcrumb: true },
     component: () => import('../components/admin/AdminLayout.vue'),
     children: [
         {
             path: '',
             name: 'AdminIndex',
-            meta: { requiresAdmin: true, requiresSessionAdmin: true },
+            meta: { requiresAdmin: true, requiresSessionAdmin: true, showBreadcrumb: false },
             component: () => import('../views/admin/AdminIndex.vue'),
         },
       {
         name: 'AdminConfigurationColors',
         path: 'configuration/colors',
-        meta: { requiresAdmin: true, requiresSessionAdmin: true },
+        meta: { requiresAdmin: true, requiresSessionAdmin: true, showBreadcrumb: true },
         component: () => import('../views/admin/AdminConfigureColors.vue'),
       }
     ],