Add context dependent back link from media category page

client/src/components/learningPath/LearningContent.vue

@@ -3,9 +3,12 @@ import { useCircleStore } from "@/stores/circle";
 import type { LearningContent } from "@/types";
 import * as log from "loglevel";
 import { computed } from "vue";
+import { useRoute } from "vue-router";
 
 log.debug("LearningContent.vue setup");
 
+const route = useRoute();
+
 const circleStore = useCircleStore();
 
 const props = defineProps<{
@@ -71,9 +74,12 @@ const block = computed(() => {
         <h1>{{ learningContent.title }}</h1>
 
         <p class="text-large my-4 lg:my-8">{{ block.value.description }}</p>
-        <a :href="block.value.url" target="_blank" class="button btn-primary">
+        <router-link
+          :to="`${block.value.url}?back=${route.path}`"
+          class="button btn-primary"
+        >
           Mediathek öffnen
-        </a>
+        </router-link>
       </div>
 
       <div v-else-if="block.type === 'placeholder'" class="mt-4 lg:mt-12">

client/src/pages/mediaLibrary/MLCategoryDetailPage.vue

@@ -4,12 +4,15 @@ import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
 import { useMediaLibraryStore } from "@/stores/mediaLibrary";
 import * as log from "loglevel";
 import { computed } from "vue";
+import { useRoute } from "vue-router";
 
 const props = defineProps<{
   mediaCategorySlug: string;
 }>();
 
-log.debug("MediaCategoryDetailView created", props.mediaCategorySlug);
+const route = useRoute();
+
+log.debug("MediaCategoryDetailView created", props.mediaCategorySlug, route);
 
 const mediaStore = useMediaLibraryStore();
 
@@ -19,6 +22,14 @@ const mediaCategory = computed(() => {
   );
 });
 
+const backLink = computed(() => {
+  if (route.query.back) {
+    return route.query.back;
+  } else {
+    return `${mediaStore.mediaLibraryPage?.frontend_url}/category`;
+  }
+});
+
 const maxCardItems = 4;
 const maxListItems = 6;
 
@@ -54,10 +65,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
     <div class="bg-gray-200 pb-4 lg:pb-12">
       <div class="container-large">
         <nav class="py-4 lg:pb-8">
-          <router-link
-            class="btn-text inline-flex items-center pl-0"
-            :to="`${mediaStore.mediaLibraryPage.frontend_url}/category`"
-          >
+          <router-link class="btn-text inline-flex items-center pl-0" :to="backLink">
             <it-icon-arrow-left />
             <span>zurück</span>
           </router-link>