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,8 +61,7 @@ const { t } = useI18n()
 
 const { course, session } = storeToRefs(cidReqStore)
 
-const itemList = computed(() => {
-  const list = [
+const specialRouteNames = [
   "MyCourses",
   "MySessions",
   "MySessionsUpcoming",
@@ -82,48 +71,57 @@ const itemList = computed(() => {
   "MessageNew",
   "MessageShow",
   "MessageCreate",
-  ]
+]
+
+const itemList = ref([])
+
+watch(
+  route,
+  () => {
+    if ("/" === route.fullPath) {
+      return
+    }
 
-  const items = []
+    itemList.value = []
 
     if (route.name && route.name.includes("Page")) {
-    items.push({
+      itemList.value.push({
         label: t("Pages"),
         to: "/resources/pages",
       })
     }
 
     if (route.name && route.name.includes("Message")) {
-    items.push({
+      itemList.value.push({
         label: t("Messages"),
         //disabled: route.path === path || lastItem.path === route.path,
         to: "/resources/messages",
       })
     }
 
-  if (list.includes(route.name)) {
-    return items
+    if (specialRouteNames.includes(route.name)) {
+      return
     }
 
     if (course.value) {
       if (session.value) {
-      items.push({
+        itemList.value.push({
           label: t("My sessions"),
           route: { name: "MySessions" },
         })
       } else {
-      items.push({
+        itemList.value.push({
           label: t("My courses"),
           route: { name: "MyCourses" },
         })
       }
     }
 
-  if (componentProps.legacy.length > 0) {
+    if (legacyItems.value.length > 0) {
       const mainUrl = window.location.href
       const mainPath = mainUrl.indexOf("main/")
 
-    componentProps.legacy.forEach((item) => {
+      legacyItems.value.forEach((item) => {
         let url = item.url.toString()
         let newUrl = url
 
@@ -135,20 +133,24 @@ const itemList = computed(() => {
           newUrl = "#"
         }
 
-      items.push({
+        itemList.value.push({
           label: item["name"],
           url: newUrl,
         })
       })
+
+      legacyItems.value = []
     } else {
       if (course.value) {
-      items.push({
+        itemList.value.push({
           label: course.value.title,
           route: { name: "CourseHome", params: { id: course.value.id }, query: route.query },
         })
       }
     }
-
-  return items
-})
+  },
+  {
+    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>