Display: Use BaseAppLink to show links with anchor element - refs BT#21620

assets/css/scss/layout/_topbar.scss

@@ -33,12 +33,7 @@
     }
 
     &__badge {
-      @apply bg-error text-white rounded-full text-tiny font-semibold absolute;
-      height: 15px;
-      line-height: 14px;
-      right: -3px;
-      top: -4px;
-      width: 15px;
+      @apply bg-error text-white rounded-full text-tiny font-semibold absolute text-center h-4 w-4 -top-1 -right-1;
     }
 
     &--unread {

assets/vue/components/Breadcrumb.vue

@@ -5,31 +5,13 @@
   >
     <Breadcrumb :model="itemList">
       <template #item="{ item, props }">
-        <router-link
-          v-if="item.route"
-          v-slot="{ href, navigate }"
+        <BaseAppLink
           :to="item.route"
-          custom
-        >
-          <a
-            :href="href"
-            v-bind="props.action"
-            @click="navigate"
-          >
-            <span :class="[item.icon]" />
-            <span
-              v-if="item.label"
-              v-text="item.label"
-            />
-          </a>
-        </router-link>
-        <a
-          v-else
-          :href="item.url !== '#' ? item.url : undefined"
+          :url="item.url"
           v-bind="props.action"
         >
-          <span>{{ item.label }}</span>
-        </a>
+          {{ item.label }}
+        </BaseAppLink>
       </template>
 
       <template #separator> /</template>
@@ -49,6 +31,7 @@ import { useI18n } from "vue-i18n"
 import Breadcrumb from "primevue/breadcrumb"
 import { useCidReqStore } from "../store/cidReq"
 import { storeToRefs } from "pinia"
+import BaseAppLink from "./basecomponents/BaseAppLink.vue"
 
 const legacyItems = ref(window.breadcrumb)
 

assets/vue/components/admin/AdminBlock.vue

@@ -46,35 +46,16 @@
             role="menuitem"
           >
             <div class="p-menuitem-content">
-              <router-link
-                v-if="item.route"
-                v-slot="{ href, navigate }"
+              <BaseAppLink
                 :to="item.route"
-                custom
-              >
-                <a
-                  :href="href"
-                  class="p-menuitem-link"
-                  v-bind="props.action"
-                  @click="navigate"
-                >
-                  <span
-                    class="p-menuitem-text"
-                    v-text="item.label"
-                  />
-                </a>
-              </router-link>
-              <a
-                v-else-if="item.url"
-                :href="item.url"
+                :url="item.url"
                 class="p-menuitem-link"
-                v-bind="props.action"
               >
                 <span
                   class="p-menuitem-text"
                   v-text="item.label"
                 />
-              </a>
+              </BaseAppLink>
             </div>
           </li>
         </ul>
@@ -95,6 +76,7 @@ import { useI18n } from "vue-i18n"
 import BaseInputGroup from "../basecomponents/BaseInputGroup.vue"
 import BaseIcon from "../basecomponents/BaseIcon.vue"
 import AdminBlockExtraContent from "./AdminBlockExtraContent.vue"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
 
 const { t } = useI18n()
 

assets/vue/components/basecomponents/BaseRouteTabs.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <router-link
+    <BaseAppLink
       v-for="(tab, index) in tabs"
       :key="tab.title"
       class="px-4 py-2 font-semibold"
@@ -14,7 +14,7 @@
       :aria-selected="selectedTab === index ? 'true' : 'false'"
     >
       {{ tab.title }}
-    </router-link>
+    </BaseAppLink>
   </div>
 </template>
 
@@ -23,6 +23,9 @@
  * Component that will render a tab interface WITHOUT content. Every tab should be a router link. So, when user
  * change tab the route of the url will change
  */
+
+import BaseAppLink from "./BaseAppLink.vue"
+
 defineProps({
   tabs: {
     type: Array,

assets/vue/components/course/CourseCard.vue

@@ -6,7 +6,7 @@
         :src="course.illustrationUrl"
         :alt="course.title"
       />
-      <router-link
+      <BaseAppLink
         v-else
         :to="{ name: 'CourseHome', params: { id: course._id }, query: { sid: sessionId } }"
         class="course-card__home-link"
@@ -15,7 +15,7 @@
           :src="course.illustrationUrl"
           :alt="course.title"
         />
-      </router-link>
+      </BaseAppLink>
     </template>
     <template #title>
       <div class="course-card__title">
@@ -27,7 +27,7 @@
           />
           {{ course.title }}
         </div>
-        <router-link
+        <BaseAppLink
           v-else
           :to="{ name: 'CourseHome', params: { id: course._id }, query: { sid: sessionId } }"
           class="course-card__home-link"
@@ -38,7 +38,7 @@
             v-text="session.title"
           />
           {{ course.title }}
-        </router-link>
+        </BaseAppLink>
 
         <div
           v-if="sessionDisplayDate"
@@ -59,6 +59,7 @@ import TeacherBar from "../TeacherBar"
 import { computed } from "vue"
 import { isEmpty } from "lodash"
 import { useFormatDate } from "../../composables/formatDate"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
 
 const { abbreviatedDatetime } = useFormatDate()
 

assets/vue/components/course/CourseTool.vue

@@ -1,49 +1,28 @@
 <template>
   <div class="course-tool">
-    <router-link
-      v-if="tool.to"
+    <BaseAppLink
       :aria-labelledby="`course-tool-${tool.iid}`"
+      :class="cardCustomClass"
       :to="tool.to"
+      :url="tool.url"
       class="course-tool__link hover:primary-gradient"
-      :class="cardCustomClass"
     >
       <span
         :class="tool.tool.icon + ' ' + iconCustomClass"
         aria-hidden="true"
         class="course-tool__icon mdi"
       />
-    </router-link>
-    <a
-      v-else
-      :aria-labelledby="`course-tool-${tool.iid}`"
-      :href="tool.url"
-      class="course-tool__link"
-      :class="cardCustomClass"
-    >
-      <span
-        :class="tool.tool.icon + ' ' + iconCustomClass"
-        aria-hidden="true"
-        class="course-tool__icon mdi"
-      />
-    </a>
+    </BaseAppLink>
 
-    <router-link
-      v-if="tool.to"
+    <BaseAppLink
       :id="`course-tool-${tool.iid}`"
       :class="titleCustomClass"
       :to="tool.to"
+      :url="tool.url"
       class="course-tool__title"
     >
       {{ tool.tool.titleToShow }}
-    </router-link>
-    <a
-      v-else
-      :id="`course-tool-${tool.iid}`"
-      v-t="tool.tool.titleToShow"
-      :href="tool.url"
-      class="course-tool__title"
-      :class="titleCustomClass"
-    />
+    </BaseAppLink>
 
     <div class="course-tool__options">
       <button
@@ -96,6 +75,7 @@ import { useSecurityStore } from "../../store/securityStore"
 import { usePlatformConfig } from "../../store/platformConfig"
 import { storeToRefs } from "pinia"
 import { useCidReqStore } from "../../store/cidReq"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
 
 const securityStore = useSecurityStore()
 const platformConfigStore = usePlatformConfig()

assets/vue/components/documents/DocumentEntry.vue

@@ -1,12 +1,20 @@
 <template>
   <div v-if="isFile">
-    <a :data-type="dataType" :href="data.contentUrl" class="flex align-center" data-fancybox="gallery">
-      <ResourceIcon :resource-data="data" class="mr-2" />
+    <BaseAppLink
+      :data-type="dataType"
+      :url="data.contentUrl"
+      class="flex align-center"
+      data-fancybox="gallery"
+    >
+      <ResourceIcon
+        :resource-data="data"
+        class="mr-2"
+      />
       {{ data.title }}
-    </a>
+    </BaseAppLink>
   </div>
   <div v-else>
-    <RouterLink
+    <BaseAppLink
       :to="{
         name: 'DocumentsList',
         params: { node: props.data.resourceNode.id },
@@ -14,47 +22,51 @@
       }"
       class="flex align-center"
     >
-      <ResourceIcon :resource-data="data" class="mr-2" />
+      <ResourceIcon
+        :resource-data="data"
+        class="mr-2"
+      />
       <b>{{ data.resourceNode.title }}</b>
-    </RouterLink>
+    </BaseAppLink>
   </div>
 </template>
 
 <script setup>
-import ResourceIcon from "./ResourceIcon.vue";
-import { computed } from "vue";
-import { useCidReq } from "../../composables/cidReq";
-import { useFileUtils } from "../../composables/fileUtils";
+import ResourceIcon from "./ResourceIcon.vue"
+import { computed } from "vue"
+import { useCidReq } from "../../composables/cidReq"
+import { useFileUtils } from "../../composables/fileUtils"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
 
 const props = defineProps({
   data: {
     type: Object,
     required: true,
   },
-});
+})
 
-const cidQuery = useCidReq();
-const { isFile: utilsIsFile, isImage, isVideo, isAudio } = useFileUtils();
+const cidQuery = useCidReq()
+const { isFile: utilsIsFile, isImage, isVideo, isAudio } = useFileUtils()
 
 const dataType = computed(() => {
   if (!utilsIsFile(props.data)) {
-    return "";
+    return ""
   }
 
   if (isImage(props.data)) {
-    return "image";
+    return "image"
   }
   if (isVideo(props.data)) {
-    return "video";
+    return "video"
   }
   if (isAudio(props.data)) {
-    return "video";
+    return "video"
   }
 
-  return "iframe";
-});
+  return "iframe"
+})
 
 const isFile = computed(() => {
-  return props.data && utilsIsFile(props.data);
-});
+  return props.data && utilsIsFile(props.data)
+})
 </script>

assets/vue/components/layout/TopbarLoggedIn.vue

@@ -4,27 +4,32 @@
       <PlatformLogo />
     </div>
     <div class="app-topbar__items">
-      <PrimeButton
-        v-if="'false' !== platformConfigStore.getSetting('display.show_link_ticket_notification')"
-        :icon="chamiloIconToClass['ticket']"
+      <BaseAppLink
+        v-if="'false' === platformConfigStore.getSetting('display.show_link_ticket_notification')"
+        :url="ticketUrl"
         class="item-button"
-        icon-class="item-button__icon"
-        link
-        unstyled
-        @click="btnTicketsOnClick"
-      />
-
-      <PrimeButton
-        :badge="btnInboxBadge"
-        :class="{ 'item-button--unread': !!btnInboxBadge }"
-        :icon="chamiloIconToClass['inbox']"
-        badge-class="item-button__badge"
+      >
+        <BaseIcon
+          icon="ticket"
+          class="item-button__icon"
+        />
+      </BaseAppLink>
+
+      <BaseAppLink
+        :to="{ name: 'MessageList' }"
         class="item-button"
-        icon-class="item-button__icon"
-        link
-        unstyled
-        @click="btnInboxOnClick"
-      />
+        :class="{ 'item-button--unread': !!btnInboxBadge }"
+      >
+        <BaseIcon
+          icon="inbox"
+          class="item-button__icon"
+        />
+        <span
+          v-if="btnInboxBadge"
+          class="item-button__badge"
+          v-text="btnInboxBadge"
+        />
+      </BaseAppLink>
     </div>
     <div class="app-topbar__end">
       <Avatar
@@ -54,13 +59,15 @@ import Avatar from "primevue/avatar"
 import Menu from "primevue/menu"
 import PrimeButton from "primevue/button"
 import { usePlatformConfig } from "../../store/platformConfig"
-import { chamiloIconToClass } from "../basecomponents/ChamiloIcons"
 import { useCidReq } from "../../composables/cidReq"
 import { useMessageRelUserStore } from "../../store/messageRelUserStore"
 
 import { useNotification } from "../../composables/notification"
 import { useI18n } from "vue-i18n"
 import PlatformLogo from "./PlatformLogo.vue"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
+import BaseIcon from "../basecomponents/BaseIcon.vue"
+import { useCidReqStore } from "../../store/cidReq"
 
 const { t } = useI18n()
 
@@ -77,14 +84,17 @@ const router = useRouter()
 const platformConfigStore = usePlatformConfig()
 const messageRelUserStore = useMessageRelUserStore()
 const notification = useNotification()
+const cidReqStore = useCidReqStore()
 
-const btnTicketsOnClick = () => {
-  const { cid, sid, gid } = useCidReq()
+const ticketUrl = computed(() => {
+  const searchParms = new URLSearchParams()
+  searchParms.append("project_id", "1")
+  searchParms.append("cid", cidReqStore.course?.id ?? 0)
+  searchParms.append("sid", cidReqStore.session?.id ?? 0)
+  searchParms.append("gid", cidReqStore.group?.id ?? 0)
 
-  window.location = window.location.origin + `/main/ticket/tickets.php?project_id=1&cid=${cid}&sid=${sid}&gid=${gid}`
-}
-
-const btnInboxOnClick = async () => await router.push({ name: "MessageList" })
+  return "/main/ticket/tickets.php?" + searchParms.toString()
+})
 
 const elUserSubmenu = ref(null)
 const userSubmenuItems = computed(() => [
@@ -93,7 +103,7 @@ const userSubmenuItems = computed(() => [
     items: [
       {
         label: t("My profile"),
-        command: async () => await router.push({ name: "AccountHome" }),
+        url: router.resolve({ name: "AccountHome" }).href,
       },
       {
         label: t("My General Certificate"),

assets/vue/components/social/SocialGroupMenu.vue

@@ -11,31 +11,31 @@
       class="menu-list"
     >
       <li class="menu-item">
-        <router-link to="/social">
+        <BaseAppLink to="/social">
           <i
             class="mdi mdi-home"
             aria-hidden="true"
           ></i>
           {{ t("Home") }}
-        </router-link>
+        </BaseAppLink>
       </li>
       <li class="menu-item">
-        <router-link :to="{ name: '', params: { group_id: groupInfo.id } }">
+        <BaseAppLink :to="{ name: '', params: { group_id: groupInfo.id } }">
           <i
             class="mdi mdi-account-multiple-outline"
             aria-hidden="true"
           ></i>
           {{ t("Waiting list") }}
-        </router-link>
+        </BaseAppLink>
       </li>
       <li class="menu-item">
-        <router-link :to="{ name: 'UserGroupInvite', params: { group_id: groupInfo.id } }">
+        <BaseAppLink :to="{ name: 'UserGroupInvite', params: { group_id: groupInfo.id } }">
           <i
             class="mdi mdi-account-plus"
             aria-hidden="true"
           ></i>
           {{ t("Invite friends") }}
-        </router-link>
+        </BaseAppLink>
       </li>
       <li
         v-if="groupInfo.isAllowedToLeave"
@@ -52,13 +52,13 @@
     </ul>
     <ul v-else>
       <li class="menu-item">
-        <router-link to="/social">
+        <BaseAppLink to="/social">
           <i
             class="mdi mdi-home"
             aria-hidden="true"
           ></i>
           {{ t("Home") }}
-        </router-link>
+        </BaseAppLink>
       </li>
     </ul>
   </BaseCard>
@@ -72,6 +72,7 @@ import { useSecurityStore } from "../../store/securityStore"
 import axios from "axios"
 import { useNotification } from "../../composables/notification"
 import { useSocialInfo } from "../../composables/useSocialInfo"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
 
 const { t } = useI18n()
 const route = useRoute()

assets/vue/components/social/SocialSideMenu.vue

@@ -11,16 +11,16 @@
       class="menu-list"
     >
       <li :class="['menu-item', { active: isActive('/social') }]">
-        <router-link to="/social">
+        <BaseAppLink to="/social">
           <i
             aria-hidden="true"
             class="mdi mdi-home"
           ></i>
           {{ t("Home") }}
-        </router-link>
+        </BaseAppLink>
       </li>
       <li :class="['menu-item', { active: isActive('/resources/messages') }]">
-        <router-link to="/resources/messages">
+        <BaseAppLink to="/resources/messages">
           <i
             aria-hidden="true"
             class="mdi mdi-email"
@@ -31,10 +31,10 @@
             class="badge badge-warning"
             >{{ unreadMessagesCount }}</span
           >
-        </router-link>
+        </BaseAppLink>
       </li>
       <li :class="['menu-item', { active: isActive('/resources/friends/invitations') }]">
-        <router-link :to="{ name: 'Invitations' }">
+        <BaseAppLink :to="{ name: 'Invitations' }">
           <i
             aria-hidden="true"
             class="mdi mdi-mailbox"
@@ -45,16 +45,16 @@
             class="badge badge-warning"
             >{{ invitationsCount }}</span
           >
-        </router-link>
+        </BaseAppLink>
       </li>
       <li :class="['menu-item', { active: isActive('/resources/friends') }]">
-        <router-link :to="{ name: 'UserRelUserList' }">
+        <BaseAppLink :to="{ name: 'UserRelUserList' }">
           <i
             aria-hidden="true"
             class="mdi mdi-handshake"
           ></i>
           {{ t("My friends") }}
-        </router-link>
+        </BaseAppLink>
       </li>
       <li :class="['menu-item', { active: isActive(groupLink) }]">
         <a
@@ -68,7 +68,7 @@
           ></i>
           {{ t("Social groups") }}
         </a>
-        <router-link
+        <BaseAppLink
           v-else
           :to="groupLink"
         >
@@ -77,40 +77,40 @@
             class="mdi mdi-group"
           ></i>
           {{ t("Social groups") }}
-        </router-link>
+        </BaseAppLink>
       </li>
       <li :class="['menu-item', { active: isActive('/social/search') }]">
-        <router-link to="/social/search">
+        <BaseAppLink to="/social/search">
           <i
             aria-hidden="true"
             class="mdi mdi-magnify"
           ></i>
           {{ t("Search") }}
-        </router-link>
+        </BaseAppLink>
       </li>
       <li :class="['menu-item', { active: isActive('/resources/personal_files') }]">
-        <router-link :to="{ name: 'PersonalFileList', params: { node: currentNodeId } }">
+        <BaseAppLink :to="{ name: 'PersonalFileList', params: { node: currentNodeId } }">
           <i class="mdi mdi-briefcase"></i>
           {{ t("My files") }}
-        </router-link>
+        </BaseAppLink>
       </li>
       <li :class="['menu-item', { active: isActive('/resources/users/personal_data') }]">
-        <router-link to="/resources/users/personal_data">
+        <BaseAppLink to="/resources/users/personal_data">
           <i
             aria-hidden="true"
             class="mdi mdi-account"
           ></i>
           {{ t("Personal data") }}
-        </router-link>
+        </BaseAppLink>
       </li>
       <li :class="['menu-item', { active: isActive('/social', 'promoted') }]">
-        <router-link :to="{ path: '/social', query: { filterType: 'promoted' } }">
+        <BaseAppLink :to="{ path: '/social', query: { filterType: 'promoted' } }">
           <i
             aria-hidden="true"
             class="mdi mdi-star"
           ></i>
           {{ t("Promoted messages") }}
-        </router-link>
+        </BaseAppLink>
       </li>
     </ul>
     <ul
@@ -118,13 +118,13 @@
       class="menu-list"
     >
       <li class="menu-item">
-        <router-link to="/social">
+        <BaseAppLink to="/social">
           <i
             aria-hidden="true"
             class="mdi mdi-home"
           ></i>
           {{ t("Home") }}
-        </router-link>
+        </BaseAppLink>
       </li>
       <li class="menu-item">
         <a
@@ -152,6 +152,7 @@ import { computed, inject, onMounted, ref, watchEffect } from "vue"
 import { useSecurityStore } from "../../store/securityStore"
 import axios from "axios"
 import { usePlatformConfig } from "../../store/platformConfig"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
 
 const { t } = useI18n()
 const route = useRoute()

assets/vue/components/social/SocialWallPost.vue

@@ -14,19 +14,19 @@
 
         <div class="flex flex-col">
           <div v-if="null === post.userReceiver || post.sender['@id'] === post.userReceiver['@id']">
-            <router-link :to="{ name: 'SocialWall', query: { id: post.sender['@id'] } }">
+            <BaseAppLink :to="{ name: 'SocialWall', query: { id: post.sender['@id'] } }">
               {{ post.sender.fullName }}
-            </router-link>
+            </BaseAppLink>
           </div>
 
           <div v-else>
-            <router-link :to="{ name: 'SocialWall', query: { id: post.sender['@id'] } }">
+            <BaseAppLink :to="{ name: 'SocialWall', query: { id: post.sender['@id'] } }">
               {{ post.sender.fullName }}
-            </router-link>
+            </BaseAppLink>
             &raquo;
-            <router-link :to="{ name: 'SocialWall', query: { id: post.userReceiver['@id'] } }">
+            <BaseAppLink :to="{ name: 'SocialWall', query: { id: post.userReceiver['@id'] } }">
               {{ post.userReceiver.fullName }}
-            </router-link>
+            </BaseAppLink>
           </div>
 
           <small>
@@ -102,6 +102,7 @@ import BaseCard from "../basecomponents/BaseCard.vue"
 import { SOCIAL_TYPE_PROMOTED_MESSAGE } from "./constants"
 import { useFormatDate } from "../../composables/formatDate"
 import { useSecurityStore } from "../../store/securityStore"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
 
 const props = defineProps({
   post: {

assets/vue/composables/sidebarMenu.js

@@ -33,7 +33,7 @@ export function useSidebarMenu() {
       items.push({
         icon: "mdi mdi-home",
         label: t("Home"),
-        command: () => router.push({ name: "Home" }),
+        url: router.resolve({ name: "Home" }).href,
       })
     }
 
@@ -49,14 +49,14 @@ export function useSidebarMenu() {
       if (enrolledStore.isEnrolledInCourses) {
         courseItems.push({
           label: t("My courses"),
-          command: () => router.push({ name: "MyCourses" }),
+          url: router.resolve({ name: "MyCourses" }).href,
         })
       }
 
       if (enrolledStore.isEnrolledInSessions) {
         courseItems.push({
           label: t("My sessions"),
-          command: () => router.push({ name: "MySessions" }),
+          url: router.resolve({ name: "MySessions" }).href,
         })
       }
 
@@ -65,7 +65,7 @@ export function useSidebarMenu() {
           icon: "mdi mdi-book-open-page-variant",
           label: courseItems.length > 1 ? t("Course") : courseItems[0].label,
           items: courseItems.length > 1 ? courseItems : undefined,
-          command: 1 === courseItems.length ? courseItems[0].command : undefined,
+          url: 1 === courseItems.length ? courseItems[0].url : undefined,
           class: courseItems.length > 0 ? courseItems[0].class : "",
         })
       }
@@ -82,14 +82,14 @@ export function useSidebarMenu() {
         items.push({
           icon: "mdi mdi-bookmark-multiple",
           label: t("Courses catalogue"),
-          command: () => router.push({ name: "CatalogueCourses" }),
+          url: router.resolve({ name: "CatalogueCourses" }).href,
         })
       }
       if (showCatalogue > 0) {
         items.push({
           icon: "mdi mdi-bookmark-multiple-outline",
           label: t("Sessions catalogue"),
-          command: () => router.push({ name: "CatalogueSessions" }),
+          url: () => router.resolve({ name: "CatalogueSessions" }).href,
         })
       }
     }
@@ -98,7 +98,7 @@ export function useSidebarMenu() {
       items.push({
         icon: "mdi mdi-calendar-text",
         label: t("Events"),
-        command: () => router.push({ name: "CCalendarEventList" }),
+        url: () => router.resolve({ name: "CCalendarEventList" }).href,
       })
     }
 
@@ -137,11 +137,11 @@ export function useSidebarMenu() {
         }
 
         if (newItem.isLink && newItem.route) {
-          newItem.command = () => (window.location.href = newItem.route)
+          newItem.url = newItem.route
         } else if (newItem.route) {
-          newItem.command = () => router.push(newItem.route)
+          newItem.url = router.resolve(newItem.route).href
         } else if (newItem.link) {
-          newItem.command = () => (window.location.href = newItem.link)
+          newItem.url = newItem.link
         }
 
         return newItem
@@ -185,7 +185,7 @@ export function useSidebarMenu() {
       const adminItems = [
         {
           label: t("Administration"),
-          command: () => router.push({ name: "AdminIndex" }),
+          url: router.resolve({ name: "AdminIndex" }).href,
         },
       ]
 

assets/vue/views/course/CatalogueCourses.vue

@@ -134,7 +134,7 @@
         style="min-width: 8rem"
       >
         <template #body="{ data }">
-          <router-link
+          <BaseAppLink
             v-slot="{ navigate }"
             :to="{ name: 'CourseHome', params: { id: data.id } }"
           >
@@ -144,7 +144,7 @@
               icon="pi pi-external-link"
               @click="navigate"
             />
-          </router-link>
+          </BaseAppLink>
         </template>
       </Column>
       <template #footer>
@@ -163,6 +163,7 @@ import DataTable from "primevue/datatable"
 import Column from "primevue/column"
 import Rating from "primevue/rating"
 import TeacherBar from "../../components/TeacherBar.vue"
+import BaseAppLink from "../../components/basecomponents/BaseAppLink.vue"
 
 const status = ref(null)
 const courses = ref([])

assets/vue/views/course/CatalogueSessions.vue

@@ -110,17 +110,13 @@
         style="min-width: 8rem"
       >
         <template #body="{ data }">
-          <router-link
-            v-slot="{ navigate }"
-            :to="'/main/session/resume_session.php?id_session=' + data.id"
+          <BaseAppLink
+            :url="'/main/session/resume_session.php?id_session=' + data.id"
+            class="p-button-sm"
           >
-            <Button
-              :label="$t('Go to the session')"
-              class="p-button-sm"
-              icon="pi pi-external-link"
-              @click="navigate"
-            />
-          </router-link>
+            <BaseIcon icon="link-external" />
+            {{ t("Go to the session") }}
+          </BaseAppLink>
         </template>
       </Column>
       <template #expansion="item">
@@ -182,17 +178,13 @@
               style="min-width: 8rem"
             >
               <template #body="{ data }">
-                <router-link
-                  v-slot="{ navigate }"
-                  :to="{ name: 'CourseHome', params: { id: data.course.id } }"
-                >
-                  <Button
-                    :label="$t('Go to the course')"
+                <BaseAppLink :to="{ name: 'CourseHome', params: { id: data.course.id } }">
+                  <BaseIcon
+                    icon="link-external"
                     class="p-button-sm"
-                    icon="pi pi-external-link"
-                    @click="navigate"
                   />
-                </router-link>
+                  {{ t("Go to the course") }}
+                </BaseAppLink>
               </template>
             </Column>
           </DataTable>
@@ -211,10 +203,14 @@ import { FilterMatchMode } from "primevue/api"
 import Button from "primevue/button"
 import DataTable from "primevue/datatable"
 import Column from "primevue/column"
+import BaseAppLink from "../../components/basecomponents/BaseAppLink.vue"
+import BaseIcon from "../../components/basecomponents/BaseIcon.vue"
 
 export default {
   name: "SessionCatalog",
   components: {
+    BaseIcon,
+    BaseAppLink,
     DataTable,
     Column,
     Button,

assets/vue/views/message/MessageList.vue

@@ -165,12 +165,12 @@
         field="title"
       >
         <template #body="slotProps">
-          <router-link
+          <BaseAppLink
             class="text-primary"
             :to="{ name: 'MessageShow', query: { id: slotProps.data['@id'] } }"
           >
             {{ slotProps.data.title }}
-          </router-link>
+          </BaseAppLink>
 
           <BaseTag
             v-for="tag in findMyReceiver(slotProps.data)?.tags"
@@ -225,6 +225,7 @@ import { useSecurityStore } from "../../store/securityStore"
 import SectionHeader from "../../components/layout/SectionHeader.vue"
 import InputGroup from "primevue/inputgroup"
 import InputText from "primevue/inputtext"
+import BaseAppLink from "../../components/basecomponents/BaseAppLink.vue"
 
 const route = useRoute()
 const router = useRouter()