Display: Allow reset breadcrumb from legacy tools

assets/vue/components/Breadcrumb.vue

@@ -28,7 +28,7 @@
         </router-link>
         <a
           v-else
-          :href="item.url"
+          :href="item.url !== '#' ? item.url : undefined"
           v-bind="props.action"
         >
           <span>{{ item.label }}</span>
@@ -46,24 +46,14 @@
 </template>
 
 <script setup>
-import { computed } from "vue"
+import { ref, watch } from "vue"
 import { useRoute } from "vue-router"
 import { useI18n } from "vue-i18n"
 import Breadcrumb from "primevue/breadcrumb"
 import { useCidReqStore } from "../store/cidReq"
 import { storeToRefs } from "pinia"
 
-// eslint-disable-next-line no-undef
-const componentProps = defineProps({
-  layoutClass: {
-    type: String,
-    default: null,
-  },
-  legacy: {
-    type: Array,
-    default: () => [],
-  },
-})
+const legacyItems = ref(window.breadcrumb)
 
 const cidReqStore = useCidReqStore()
 const route = useRoute()
@@ -71,84 +61,96 @@ const { t } = useI18n()
 
 const { course, session } = storeToRefs(cidReqStore)
 
-const itemList = computed(() => {
-  const list = [
-    "MyCourses",
-    "MySessions",
-    "MySessionsUpcoming",
-    "MySessionsPast",
-    "Home",
-    "MessageList",
-    "MessageNew",
-    "MessageShow",
-    "MessageCreate",
-  ]
-
-  const items = []
-
-  if (route.name && route.name.includes("Page")) {
-    items.push({
-      label: t("Pages"),
-      to: "/resources/pages",
-    })
-  }
-
-  if (route.name && route.name.includes("Message")) {
-    items.push({
-      label: t("Messages"),
-      //disabled: route.path === path || lastItem.path === route.path,
-      to: "/resources/messages",
-    })
-  }
-
-  if (list.includes(route.name)) {
-    return items
-  }
-
-  if (course.value) {
-    if (session.value) {
-      items.push({
-        label: t("My sessions"),
-        route: { name: "MySessions" },
-      })
-    } else {
-      items.push({
-        label: t("My courses"),
-        route: { name: "MyCourses" },
+const specialRouteNames = [
+  "MyCourses",
+  "MySessions",
+  "MySessionsUpcoming",
+  "MySessionsPast",
+  "Home",
+  "MessageList",
+  "MessageNew",
+  "MessageShow",
+  "MessageCreate",
+]
+
+const itemList = ref([])
+
+watch(
+  route,
+  () => {
+    if ("/" === route.fullPath) {
+      return
+    }
+
+    itemList.value = []
+
+    if (route.name && route.name.includes("Page")) {
+      itemList.value.push({
+        label: t("Pages"),
+        to: "/resources/pages",
       })
     }
-  }
 
-  if (componentProps.legacy.length > 0) {
-    const mainUrl = window.location.href
-    const mainPath = mainUrl.indexOf("main/")
+    if (route.name && route.name.includes("Message")) {
+      itemList.value.push({
+        label: t("Messages"),
+        //disabled: route.path === path || lastItem.path === route.path,
+        to: "/resources/messages",
+      })
+    }
 
-    componentProps.legacy.forEach((item) => {
-      let url = item.url.toString()
-      let newUrl = url
+    if (specialRouteNames.includes(route.name)) {
+      return
+    }
 
-      if (url.indexOf("main/") > 0) {
-        newUrl = "/" + url.substring(mainPath, url.length)
+    if (course.value) {
+      if (session.value) {
+        itemList.value.push({
+          label: t("My sessions"),
+          route: { name: "MySessions" },
+        })
+      } else {
+        itemList.value.push({
+          label: t("My courses"),
+          route: { name: "MyCourses" },
+        })
       }
+    }
 
-      if (newUrl === "/") {
-        newUrl = "#"
-      }
+    if (legacyItems.value.length > 0) {
+      const mainUrl = window.location.href
+      const mainPath = mainUrl.indexOf("main/")
 
-      items.push({
-        label: item["name"],
-        url: newUrl,
-      })
-    })
-  } else {
-    if (course.value) {
-      items.push({
-        label: course.value.title,
-        route: { name: "CourseHome", params: { id: course.value.id }, query: route.query },
+      legacyItems.value.forEach((item) => {
+        let url = item.url.toString()
+        let newUrl = url
+
+        if (url.indexOf("main/") > 0) {
+          newUrl = "/" + url.substring(mainPath, url.length)
+        }
+
+        if (newUrl === "/") {
+          newUrl = "#"
+        }
+
+        itemList.value.push({
+          label: item["name"],
+          url: newUrl,
+        })
       })
-    }
-  }
 
-  return items
-})
+      legacyItems.value = []
+    } else {
+      if (course.value) {
+        itemList.value.push({
+          label: course.value.title,
+          route: { name: "CourseHome", params: { id: course.value.id }, query: route.query },
+        })
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+)
 </script>

assets/vue/components/layout/DashboardLayout.vue

@@ -5,19 +5,16 @@
     class="app-main"
     :class="{ 'app-main--no-sidebar': !securityStore.isAuthenticated }"
   >
-    <Breadcrumb
-      v-if="showBreadcrumb"
-      :legacy="breadcrumb"
-    />
+    <Breadcrumb v-if="showBreadcrumb" />
     <slot />
     <router-view />
   </div>
 </template>
 
 <script setup>
-import Breadcrumb from '../../components/Breadcrumb.vue';
-import Topbar from '../../components/layout/Topbar.vue';
-import Sidebar from '../../components/layout/Sidebar.vue';
+import Breadcrumb from "../../components/Breadcrumb.vue"
+import Topbar from "../../components/layout/Topbar.vue"
+import Sidebar from "../../components/layout/Sidebar.vue"
 import { useSecurityStore } from "../../store/securityStore"
 
 // eslint-disable-next-line no-undef
@@ -26,17 +23,7 @@ defineProps({
     type: Boolean,
     default: true,
   },
-});
+})
 
 const securityStore = useSecurityStore()
-
-let breadcrumb = [];
-
-try {
-  if (window.breadcrumb) {
-    breadcrumb = window.breadcrumb;
-  }
-} catch (e) {
-  console.log(e.message);
-}
 </script>

var/vue_templates/components/layout/DashboardLayout.vue

@@ -10,37 +10,23 @@ defineProps({
     type: Boolean,
     default: true,
   },
-});
+})
 
 const securityStore = useSecurityStore()
-
-let breadcrumb = [];
-
-try {
-  if (window.breadcrumb) {
-    breadcrumb = window.breadcrumb;
-  }
-} catch (e) {
-  console.log(e.message);
-}
 </script>
 
 <template>
   <Topbar />
-  <Sidebar
-    v-if="securityStore.isAuthenticated"
-  />
-  <SidebarNotLoggedIn
-    v-else
-  />
+  <Sidebar v-if="securityStore.isAuthenticated" />
+  <SidebarNotLoggedIn v-else />
   <div
     class="app-main"
-    :class="{ 'app-main--no-sidebar': !securityStore.isAuthenticated, 'app-main--no-loggedin': !securityStore.isAuthenticated }"
+    :class="{
+      'app-main--no-sidebar': !securityStore.isAuthenticated,
+      'app-main--no-loggedin': !securityStore.isAuthenticated,
+    }"
   >
-    <Breadcrumb
-      v-if="showBreadcrumb"
-      :legacy="breadcrumb"
-    />
+    <Breadcrumb v-if="showBreadcrumb" />
     <slot />
     <router-view />
   </div>