Rename "Media Center" to "Media Library"

client/src/components/MainNavigationBar.vue

@@ -170,9 +170,9 @@ const profileDropdownData = [
               Shop
             </router-link>
             <router-link
-              to="/mediacenter/versicherungsvermittlerin-media/overview"
+              to="/media/versicherungsvermittlerin-media/overview"
               class="nav-item"
-              :class="{ 'nav-item--active': isInRoutePath(['/mediacenter']) }"
+              :class="{ 'nav-item--active': isInRoutePath(['/media']) }"
             >
               Mediathek
             </router-link>

client/src/components/mediaLibrary/LinkCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import MediaLink from "@/components/mediaCenter/MediaLink.vue";
+import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
 
 export interface Props {
   title: string;

client/src/router/index.ts

@@ -25,13 +25,13 @@ const router = createRouter({
       component: () => import("@/views/ShopView.vue"),
     },
     {
-      path: "/mediacenter/:mediaCenterPageSlug",
+      path: "/media/:mediaLibraryPageSlug",
       props: true,
-      component: () => import("@/views/MediaCenterView.vue"),
+      component: () => import("@/views/MediaLibraryView.vue"),
       children: [
         {
           path: "overview",
-          component: () => import("@/views/MediaCenterMainView.vue"),
+          component: () => import("@/views/MediaLibraryMainView.vue"),
         },
         {
           path: "handlungsfelder/:mediaCategorySlug",
@@ -40,7 +40,7 @@ const router = createRouter({
         },
         {
           path: "handlungsfelder",
-          component: () => import("@/views/MediaCenterCategoryOverview.vue"),
+          component: () => import("@/views/MediaLibraryCategoryOverview.vue"),
         },
         {
           path: "handlungsfeldlist",

client/src/stores/mediaCenter.ts

@@ -1,39 +0,0 @@
-import { itGet } from "@/fetchHelpers";
-import type { MediaLibraryPage } from "@/types";
-import { defineStore } from "pinia";
-
-export type MediaCenterStoreState = {
-  mediaCenterPage: MediaLibraryPage | undefined;
-  selectedLearningPath: { id: number; name: string };
-  availableLearningPaths: { id: number; name: string }[];
-};
-
-export const useMediaCenterStore = defineStore({
-  id: "mediaCenter",
-  state: () => {
-    return {
-      mediaCenterPage: undefined,
-      selectedLearningPath: { id: 1, name: "Alle Lehrgänge" },
-      availableLearningPaths: [
-        { id: 1, name: "Alle Lehrgänge" },
-        { id: 2, name: "Versicherungsvermittler/in" },
-      ],
-    } as MediaCenterStoreState;
-  },
-  getters: {},
-  actions: {
-    async loadMediaCenterPage(slug: string, reload = false) {
-      if (this.mediaCenterPage && !reload) {
-        return this.mediaCenterPage;
-      }
-      const mediaCenterPageData = await itGet(`/api/course/page/${slug}/`);
-
-      if (!mediaCenterPageData) {
-        throw `No mediaCenterPageData found with: ${slug}`;
-      }
-
-      this.mediaCenterPage = mediaCenterPageData;
-      return this.mediaCenterPage;
-    },
-  },
-});

client/src/stores/mediaLibrary.ts

@@ -0,0 +1,39 @@
+import { itGet } from "@/fetchHelpers";
+import type { MediaLibraryPage } from "@/types";
+import { defineStore } from "pinia";
+
+export type MediaLibraryStoreState = {
+  mediaLibraryPage: MediaLibraryPage | undefined;
+  selectedLearningPath: { id: number; name: string };
+  availableLearningPaths: { id: number; name: string }[];
+};
+
+export const useMediaLibraryStore = defineStore({
+  id: "mediaLibrary",
+  state: () => {
+    return {
+      mediaLibraryPage: undefined,
+      selectedLearningPath: { id: 1, name: "Alle Lehrgänge" },
+      availableLearningPaths: [
+        { id: 1, name: "Alle Lehrgänge" },
+        { id: 2, name: "Versicherungsvermittler/in" },
+      ],
+    } as MediaLibraryStoreState;
+  },
+  getters: {},
+  actions: {
+    async loadMediaLibraryPage(slug: string, reload = false) {
+      if (this.mediaLibraryPage && !reload) {
+        return this.mediaLibraryPage;
+      }
+      const mediaLibraryPageData = await itGet(`/api/course/page/${slug}/`);
+
+      if (!mediaLibraryPageData) {
+        throw `No mediaLibraryPageData found with: ${slug}`;
+      }
+
+      this.mediaLibraryPage = mediaLibraryPageData;
+      return this.mediaLibraryPage;
+    },
+  },
+});

client/src/views/MediaCategoryDetailView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import LinkCard from "@/components/mediaCenter/LinkCard.vue";
+import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
-import MediaLink from "@/components/mediaCenter/MediaLink.vue";
+import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
-import { useMediaCenterStore } from "@/stores/mediaCenter";
+import { useMediaLibraryStore } from "@/stores/mediaLibrary";
 import HandlungsfeldLayout from "@/views/HandlungsfeldLayout.vue";
 import * as log from "loglevel";
 import { computed } from "vue";
@@ -140,7 +140,7 @@ const field = {
           description:
             "Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»",
           linkText: "Handlungsfeldanzeigen",
-          link: "http://localhost:8000/mediacenter/handlungsfeld",
+          link: "http://localhost:8000/media/handlungsfeld",
           openWindow: false,
         },
         {
@@ -149,7 +149,7 @@ const field = {
           description:
             "Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»",
           linkText: "Handlungsfeldanzeigen",
-          link: "http://localhost:8000/mediacenter/handlungsfeld",
+          link: "http://localhost:8000/media/handlungsfeld",
           openWindow: false,
         },
       ],
@@ -163,10 +163,10 @@ const props = defineProps<{
 
 log.debug("MediaCategoryDetailView created", props.mediaCategorySlug);
 
-const mediaStore = useMediaCenterStore();
+const mediaStore = useMediaLibraryStore();
 
 const mediaCategory = computed(() => {
-  return mediaStore.mediaCenterPage?.children.find(
+  return mediaStore.mediaLibraryPage?.children.find(
     (category) => category.slug === props.mediaCategorySlug
   );
 });
@@ -199,7 +199,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
 </script>
 
 <template>
-  <Teleport v-if="mediaStore.mediaCenterPage && mediaCategory" to="body">
+  <Teleport v-if="mediaStore.mediaLibraryPage && mediaCategory" to="body">
     <HandlungsfeldLayout>
       <template #header>
         <div class="flex justify-between">
@@ -252,18 +252,15 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
               />
               <div v-else class="flex items-center justify-between border-b py-4">
                 <h4 class="text-bold">{{ subItem.title }}</h4>
-                <media-link
+                <media-link :blank="subItem.openWindow" :to="subItem.link" class="link"
-                  :blank="subItem.openWindow"
+                  >{{ subItem.linkText }}
-                  :to="subItem.link"
+                </media-link>
-                  class="link"
-                  >{{ subItem.linkText }}</media-link
-                >
               </div>
             </li>
           </ul>
           <router-link
             v-if="hasMoreItemsForType(item.type, item.items)"
-            to="/mediacenter/handlungsfeldlist"
+            to="/media/handlungsfeldlist"
             class="flex items-center"
           >
             <span>Alle anschauen</span>
@@ -279,6 +276,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
 .it-icon-hf {
   color: blue;
 }
+
 .it-icon-hf > * {
   @apply m-auto;
 }

client/src/views/MediaLibraryCategoryOverview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMediaCenterStore } from "@/stores/mediaCenter";
+import { useMediaLibraryStore } from "@/stores/mediaLibrary";
 import * as log from "loglevel";
 import { ref, watch } from "vue";
 
@@ -56,7 +56,7 @@ const fields = [
   },
 ];
 
-const mediaStore = useMediaCenterStore();
+const mediaStore = useMediaLibraryStore();
 const dropdownSelected = ref(mediaStore.selectedLearningPath);
 
 watch(dropdownSelected, (newValue) =>
@@ -72,15 +72,15 @@ watch(dropdownSelected, (newValue) =>
       <h1>Handlungsfelder</h1>
       <!--      <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
-    <div v-if="mediaStore.mediaCenterPage">
+    <div v-if="mediaStore.mediaLibraryPage">
       <ul class="grid gap-5 grid-cols-1 lg:grid-cols-4">
         <li
-          v-for="cat in mediaStore.mediaCenterPage.children"
+          v-for="cat in mediaStore.mediaLibraryPage.children"
           :key="cat.id"
           class="bg-white p-4"
         >
           <router-link
-            :to="`/mediacenter/${mediaStore.mediaCenterPage.slug}/handlungsfelder/${cat.slug}`"
+            :to="`/media/${mediaStore.mediaLibraryPage.slug}/handlungsfelder/${cat.slug}`"
           >
             <img class="m-auto" :src="`/static/icons/demo/${cat.overview_icon}.svg`" />
             <h3 class="text-base text-center">{{ cat.title }}</h3>

client/src/views/MediaLibraryMainView.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import OverviewCard from "@/components/mediaCenter/OverviewCard.vue";
+import OverviewCard from "@/components/mediaLibrary/OverviewCard.vue";
-import { useMediaCenterStore } from "@/stores/mediaCenter";
+import { useMediaLibraryStore } from "@/stores/mediaLibrary";
 import * as log from "loglevel";
 import { ref, watch } from "vue";
 
 log.debug("MediaMainView created");
 
-const mediaStore = useMediaCenterStore();
+const mediaStore = useMediaLibraryStore();
 const dropdownSelected = ref(mediaStore.selectedLearningPath);
 
 watch(dropdownSelected, (newValue) =>
@@ -25,20 +25,20 @@ watch(dropdownSelected, (newValue) =>
       <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
     <OverviewCard
-      v-if="mediaStore.mediaCenterPage"
+      v-if="mediaStore.mediaLibraryPage"
       title="Handlungsfelder"
       call2-action="Anschauen"
-      :link="`/mediacenter/${mediaStore.mediaCenterPage.slug}/handlungsfelder`"
+      :link="`/media/${mediaStore.mediaLibraryPage.slug}/handlungsfelder`"
       description="Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen."
       icon="handlungsfelder-overview"
       class="mb-6"
     >
     </OverviewCard>
     <OverviewCard
-      v-if="mediaStore.mediaCenterPage"
+      v-if="mediaStore.mediaLibraryPage"
       title="Lernmedien"
       call2-action="Anschauen"
-      :link="`/mediacenter/${mediaStore.mediaCenterPage.slug}/lernmedien`"
+      :link="`/media/${mediaStore.mediaLibraryPage.slug}/lernmedien`"
       description="Finde eine vollständige Liste der Bücher und anderen Medien, auf die im Kurs verwiesen wird."
       icon="lernmedien-overview"
       class="mb-6"

client/src/views/MediaLibraryView.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { useMediaCenterStore } from "@/stores/mediaCenter";
+import { useMediaLibraryStore } from "@/stores/mediaLibrary";
 import * as log from "loglevel";
 import { onMounted } from "vue";
 
-log.debug("MediaCenterView created");
+log.debug("MediaLibraryView created");
 
 const props = defineProps<{
-  mediaCenterPageSlug: string;
+  mediaLibraryPageSlug: string;
 }>();
 
-const mediaCenterStore = useMediaCenterStore();
+const mediaLibraryStore = useMediaLibraryStore();
 
 onMounted(async () => {
-  log.debug("MediaCenterView mounted", props.mediaCenterPageSlug);
+  log.debug("MediaLibraryView mounted", props.mediaLibraryPageSlug);
 
   try {
-    await mediaCenterStore.loadMediaCenterPage(props.mediaCenterPageSlug);
+    await mediaLibraryStore.loadMediaLibraryPage(props.mediaLibraryPageSlug);
   } catch (error) {
     log.error(error);
   }

client/src/views/MediaList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import MediaLink from "@/components/mediaCenter/MediaLink.vue";
+import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
 import HandlungsfeldLayout from "@/views/HandlungsfeldLayout.vue";
 
 const data = {
@@ -73,9 +73,9 @@ const data = {
                 </div>
               </div>
               <div class="">
-                <media-link :to="item.link" :blank="item.openWindow" class="link">{{
+                <media-link :to="item.link" :blank="item.openWindow" class="link"
-                  item.linkText
+                  >{{ item.linkText }}
-                }}</media-link>
+                </media-link>
               </div>
             </li>
           </ul>
@@ -89,6 +89,7 @@ const data = {
 .it-icon-hf {
   color: blue;
 }
+
 .it-icon-hf > * {
   @apply m-auto;
 }

server/vbv_lernwelt/media_library/tests/test_api.py

@@ -6,7 +6,7 @@ from vbv_lernwelt.course.creators.test_course import create_test_course
 from vbv_lernwelt.media_library.models import MediaLibraryPage
 
 
-class MediaCenterAPITestCase(APITestCase):
+class MediaLibraryAPITestCase(APITestCase):
     def setUp(self) -> None:
         create_default_users()
         create_test_course()