Course: Improve hierarchy and navigation consistency across tools - refs BT#20950

Author: christianbeeznest

assets/vue/components/Breadcrumb.vue

@@ -129,9 +129,10 @@ function watchResourceNodeLoader() {
       const currentRouteName = route.name || ""
       const isAssignmentRoute = currentRouteName.startsWith("Assignment")
       const isAttendanceRoute = currentRouteName.startsWith("Attendance")
+      const isDocumentRoute = currentRouteName.startsWith("Documents")
       const nodeId = route.params.node || route.query.node
 
-      if ((isAssignmentRoute || isAttendanceRoute) && nodeId) {
+      if ((isAssignmentRoute || isAttendanceRoute || isDocumentRoute) && nodeId) {
         try {
           store.commit("resourcenode/setResourceNode", null)
           const resourceApiId = nodeId.startsWith("/api/") ? nodeId : `/api/resource_nodes/${nodeId}`
@@ -172,6 +173,19 @@ function addDocumentBreadcrumb() {
       route: { name: "DocumentsList", params: { node: folder.nodeId }, query: route.query },
     })
   })
+
+  const currentMatched = route.matched.find((r) => r.name === route.name)
+  const label = currentMatched.meta?.breadcrumb
+  if (label !== "") {
+    const finalLabel = label || formatToolName(currentMatched.name)
+    const alreadyShown = itemList.value.some((item) => item.label === finalLabel)
+    if (!alreadyShown) {
+      itemList.value.push({
+        label: t(finalLabel),
+        route: { name: currentMatched.name, params: route.params, query: route.query },
+      })
+    }
+  }
 }
 
 // Watch route changes to dynamically rebuild the breadcrumb trail

assets/vue/components/attendance/AttendanceForm.vue

@@ -199,9 +199,9 @@ const submitForm = async () => {
     } else {
       const created = await attendanceService.createAttendance(postData)
       router.push({
-        name: "AddCalendarEvent",
+        name: "AttendanceAddCalendarEvent",
         params: {
-          node: parentResourceNodeId.value,
+          node: getNodeId(created.resourceNode),
           id: created.id,
         },
         query: {
@@ -215,4 +215,10 @@ const submitForm = async () => {
     console.error("Error submitting attendance:", error)
   }
 }
+
+function getNodeId(resourceNode) {
+  if (!resourceNode || !resourceNode["@id"]) return 0
+  const parts = resourceNode["@id"].split("/")
+  return parseInt(parts[parts.length - 1])
+}
 </script>

assets/vue/router/attendance.js

@@ -16,24 +16,28 @@ export default {
       component: () => import("../views/attendance/AttendanceCreate.vue"),
     },
     {
-      name: "EditAttendance",
+      name: "AttendanceEditAttendance",
       path: "edit/:id",
       component: () => import("../views/attendance/AttendanceEdit.vue"),
+      meta: { breadcrumb: "Edit attendance" },
     },
     {
       name: "AttendanceSheetList",
       path: ":id?/sheet-list",
       component: () => import("../views/attendance/AttendanceSheetList.vue"),
+      meta: { breadcrumb: "Sheet list" },
     },
     {
       name: "AttendanceCalendarList",
       path: ":id?/calendar",
       component: () => import("../views/attendance/AttendanceCalendarList.vue"),
+      meta: { breadcrumb: "Calendar" },
     },
     {
-      name: "AddCalendarEvent",
+      name: "AttendanceAddCalendarEvent",
       path: ":id?/calendar/create",
       component: () => import("../views/attendance/AttendanceCalendarAdd.vue"),
+      meta: { breadcrumb: "Add calendar" },
     },
     {
       name: "ExportToPdf",

assets/vue/router/documents.js

@@ -9,11 +9,13 @@ export default {
       name: "DocumentsList",
       path: "",
       component: () => import("../views/documents/DocumentsList.vue"),
+      meta: { breadcrumb: "" },
     },
     {
       name: "DocumentsCreate",
       path: "new",
       component: () => import("../views/documents/Create.vue"),
+      meta: { breadcrumb: "Create file" },
     },
     {
       name: "DocumentsCreateFile",

assets/vue/views/attendance/AttendanceCalendarList.vue

@@ -228,8 +228,8 @@ const redirectToAttendanceSheet = () => {
 
 const redirectToAddCalendarEvent = () => {
   router.push({
-    name: "AddCalendarEvent",
-    params: { id: route.params.id },
+    name: "AttendanceAddCalendarEvent",
+    params: { node: route.params.node, id: route.params.id },
     query: { cid: route.query.cid, sid: route.query.sid, gid: route.query.gid },
   })
 }

assets/vue/views/attendance/AttendanceList.vue

@@ -64,8 +64,8 @@ const redirectToCreateAttendance = () => {
 
 const redirectToEditAttendance = (attendance) => {
   router.push({
-    name: "EditAttendance",
-    params: { id: attendance.id },
+    name: "AttendanceEditAttendance",
+    params: { node: getNodeId(attendance.resourceNode), id: attendance.id },
     query: { cid, sid, gid },
   })
 }
@@ -136,5 +136,11 @@ const fetchAttendances = async ({ page = 1, rows = 10 } = {}) => {
   }
 }
 
+function getNodeId(resourceNode) {
+  if (!resourceNode || !resourceNode["@id"]) return 0
+  const parts = resourceNode["@id"].split("/")
+  return parseInt(parts[parts.length - 1])
+}
+
 onMounted(fetchAttendances)
 </script>

assets/vue/views/attendance/AttendanceSheetList.vue

@@ -567,7 +567,7 @@ const qrImageUrl = ref("")
 const redirectToCalendarList = () => {
   router.push({
     name: "AttendanceCalendarList",
-    params: { id: route.params.id },
+    params: { node: route.params.node, id: route.params.id },
     query: { sid, cid, gid },
   })
 }