Use <router-link> instead of <a> for internal links

client/src/components/competences/PerformanceCriteriaRow.vue

@@ -30,16 +30,16 @@ const props = withDefaults(defineProps<Props>(), {
         </h4>
         <p>
           Lerneinheit:
-          <a class="link" :href="criteria.learning_unit.frontend_url">
+          <router-link class="link" :to="criteria.learning_unit.frontend_url">
             {{ criteria.learning_unit.title }}
-          </a>
+          </router-link>
         </p>
       </div>
     </div>
     <span class="whitespace-nowrap">
-      <a class="link" :href="criteria.learning_unit.evaluate_url">
+      <router-link class="link" :to="criteria.learning_unit.evaluate_url">
         Sich nochmals einschätzen
-      </a>
+      </router-link>
     </span>
   </div>
 </template>

client/src/pages/404Page.vue

@@ -8,10 +8,6 @@ if (url.charAt(url.length - 1) !== "/") {
 <template>
   <main class="px-4 py-8">
     <h1>404 - Not Found as Vue view...</h1>
-    <div class="text-xl mt-8">Add trailing slash for django view?</div>
-    <div class="mt-8 text-xl">
-      Try this: <a class="link" :href="url">{{ url }}</a>
-    </div>
   </main>
 </template>
 

client/src/pages/competence/CompetenceListPage.vue

@@ -12,13 +12,13 @@ const competenceStore = useCompetenceStore();
 <template>
   <div class="container-large">
     <nav class="lg:mt-4">
-      <a
+      <router-link
         class="block mb-8 cursor-pointer flex items-center"
-        :href="competenceStore.competenceProfilePage?.frontend_url"
+        :to="competenceStore.competenceProfilePage?.frontend_url"
       >
         <it-icon-arrow-left />
-        <span>zurück</span></a
-      >
+        <span>zurück</span>
+      </router-link>
     </nav>
     <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
       <h1>Kompetenzen</h1>

client/src/pages/competence/PerformanceCriteriaPage.vue

@@ -22,13 +22,13 @@ const shownCriteria = computed(() => {
 <template>
   <div class="container-large">
     <nav class="lg:mt-4">
-      <a
+      <router-link
         class="block mb-8 cursor-pointer flex items-center"
         :href="`${competenceStore.competenceProfilePage?.frontend_url}`"
       >
         <it-icon-arrow-left />
-        <span>zurück</span></a
-      >
+        <span>zurück</span>
+      </router-link>
     </nav>
     <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
       <h1>Einschätzungen</h1>

client/src/pages/mediaLibrary/MLCategoryDetailPage.vue

@@ -54,13 +54,13 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
     <div class="bg-gray-200">
       <div class="container-large">
         <nav>
-          <a
+          <router-link
             class="block my-9 cursor-pointer flex items-center"
-            :href="`${mediaStore.mediaLibraryPage.frontend_url}/category`"
+            :to="`${mediaStore.mediaLibraryPage.frontend_url}/category`"
           >
             <it-icon-arrow-left />
-            <span>zurück</span></a
-          >
+            <span>zurück</span>
+          </router-link>
         </nav>
         <div class="flex justify-between">
           <div class="lg:w-6/12">

client/src/pages/mediaLibrary/MLMediaListPage.vue

@@ -41,13 +41,13 @@ const mediaList = computed(() => {
     <div class="bg-gray-200">
       <div class="container-large">
         <nav>
-          <a
+          <router-link
             class="block my-9 cursor-pointer flex items-center"
-            :href="mediaStore.mediaLibraryPage.frontend_url"
+            :to="mediaStore.mediaLibraryPage.frontend_url"
           >
             <it-icon-arrow-left />
-            <span>zurück</span></a
-          >
+            <span>zurück</span>
+          </router-link>
         </nav>
         <h1 class="mb-4">{{ mediaList.title }}</h1>
       </div>

client/src/stores/mediaLibrary.ts

@@ -1,5 +1,6 @@
 import { itGet } from "@/fetchHelpers";
 import type { MediaLibraryPage } from "@/types";
+import log from "loglevel";
 import { defineStore } from "pinia";
 
 export type MediaLibraryStoreState = {
@@ -26,6 +27,7 @@ export const useMediaLibraryStore = defineStore({
       if (this.mediaLibraryPage && !reload) {
         return this.mediaLibraryPage;
       }
+      log.debug("load mediaLibraryPageData");
       const mediaLibraryPageData = await itGet(`/api/course/page/${slug}/`);
 
       if (!mediaLibraryPageData) {

server/vbv_lernwelt/core/serializer_helpers.py

@@ -67,8 +67,7 @@ class ItBaseSerializer(wagtail_serializers.BaseSerializer):
         course_parent_page = obj.get_ancestors().exact_type(CoursePage).last()
 
         if course_parent_page:
-            from vbv_lernwelt.learnpath.models import Circle
-            from vbv_lernwelt.learnpath.models import LearningPath
+            from vbv_lernwelt.learnpath.models import Circle, LearningPath
 
             circles = (
                 course_parent_page.get_children()

server/vbv_lernwelt/learnpath/serializers.py

@@ -3,8 +3,8 @@ from rest_framework.fields import SerializerMethodField
 from vbv_lernwelt.competence.serializers import (
     PerformanceCriteriaLearningPathSerializer,
 )
-from vbv_lernwelt.learnpath.models import LearningUnit
 from vbv_lernwelt.core.serializer_helpers import get_it_serializer_class
+from vbv_lernwelt.learnpath.models import LearningUnit
 
 
 class LearningUnitSerializer(