Course: Fix breadcrumb in Vue tools, show tool name and folder hierarchy - refs BT#20950

Author: christianbeeznest

assets/vue/components/Breadcrumb.vue

@@ -25,12 +25,13 @@
 </template>
 
 <script setup>
-import { ref, watchEffect } from "vue"
+import { computed, ref, watchEffect } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useI18n } from "vue-i18n"
 import Breadcrumb from "primevue/breadcrumb"
 import { useCidReqStore } from "../store/cidReq"
 import { storeToRefs } from "pinia"
+import { useStore } from "vuex"
 
 const legacyItems = ref(window.breadcrumb)
 
@@ -41,6 +42,9 @@ const { t } = useI18n()
 
 const { course, session } = storeToRefs(cidReqStore)
 
+const store = useStore()
+const resourceNode = computed(() => store.getters["resourcenode/getResourceNode"])
+
 const specialRouteNames = [
   "MyCourses",
   "MySessions",
@@ -62,6 +66,7 @@ watchEffect(() => {
 
   itemList.value = []
 
+  // Admin routes
   if (route.fullPath.startsWith("/admin")) {
     const parts = route.path.split("/").filter(Boolean)
     parts.forEach((part, index) => {
@@ -77,24 +82,28 @@ watchEffect(() => {
     })
   }
 
+  // Pages
   if (route.name && route.name.includes("Page")) {
     itemList.value.push({
       label: t("Pages"),
       to: "/resources/pages",
     })
   }
 
+  // Messages
   if (route.name && route.name.includes("Message")) {
     itemList.value.push({
       label: t("Messages"),
-      //disabled: route.path === path || lastItem.path === route.path,
       to: "/resources/messages",
     })
   }
 
+  // Home and special
   if (specialRouteNames.includes(route.name)) {
     return
   }
+
+  // My Courses or My Sessions
   if (course.value) {
     if (session.value) {
       itemList.value.push({
@@ -109,6 +118,7 @@ watchEffect(() => {
     }
   }
 
+  // Legacy breadcrumbs
   if (legacyItems.value.length > 0) {
     const mainUrl = window.location.href
     const mainPath = mainUrl.indexOf("main/")
@@ -140,5 +150,64 @@ watchEffect(() => {
       })
     }
   }
+
+  const mainToolName = route.matched?.[0]?.name
+  if (mainToolName && mainToolName !== "documents") {
+    const formatToolName = (name) => {
+      return name
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/_/g, " ")
+        .replace(/\b\w/g, (c) => c.toUpperCase())
+    }
+
+    itemList.value.push({
+      label: formatToolName(mainToolName),
+      route: { name: mainToolName, params: route.params, query: route.query },
+    })
+  }
+  if (mainToolName === "documents" && resourceNode.value) {
+    const folderTrail = []
+
+    let current = resourceNode.value
+    while (current?.parent && current.parent.title !== "courses") {
+      folderTrail.unshift({
+        label: current.title,
+        nodeId: current.id,
+      })
+      current = current.parent
+    }
+
+    if (folderTrail.length === 0) {
+      itemList.value.push({
+        label: t("Documents"),
+        route: {
+          name: "DocumentsList",
+          params: route.params,
+          query: route.query,
+        },
+      })
+    } else {
+      const first = folderTrail.shift()
+      itemList.value.push({
+        label: t("Documents"),
+        route: {
+          name: "DocumentsList",
+          params: { node: first.nodeId },
+          query: route.query,
+        },
+      })
+
+      folderTrail.forEach((folder) => {
+        itemList.value.push({
+          label: folder.label,
+          route: {
+            name: "DocumentsList",
+            params: { node: folder.nodeId },
+            query: route.query,
+          },
+        })
+      })
+    }
+  }
 })
 </script>

public/main/course_description/index.php

@@ -32,7 +32,6 @@
 }
 
 // interbreadcrumb
-$interbreadcrumb[] = ['url' => 'index.php?'.api_get_cidreq(), 'name' => get_lang('Description')];
 if (1 == $description_type) {
     $interbreadcrumb[] = ['url' => '#', 'name' => get_lang('Description')];
 }

public/main/course_progress/index.php

@@ -179,11 +179,6 @@ function update_done_thematic_advance(selected_value) {
     $action = 'thematic_details';
 }
 
-$interbreadcrumb[] = [
-    'url' => $currentUrl,
-    'name' => get_lang('Thematic control'),
-];
-
 $actionLeft = '';
 // instance thematic object for using like library here
 $thematicManager = new Thematic();