Load media items from backend to show in frontend

client/src/router/index.ts

@@ -27,20 +27,20 @@ const router = createRouter({
     {
       path: "/media/:mediaLibraryPageSlug",
       props: true,
-      component: () => import("@/views/MediaLibraryView.vue"),
+      component: () => import("@/views/media_library/MediaLibraryParentView.vue"),
       children: [
         {
-          path: "overview",
-          component: () => import("@/views/MediaLibraryMainView.vue"),
+          path: "",
+          component: () => import("@/views/media_library/MediaLibraryIndexView.vue"),
         },
         {
           path: "handlungsfelder/:mediaCategorySlug",
           props: true,
-          component: () => import("@/views/MediaCategoryDetailView.vue"),
+          component: () => import("@/views/media_library/MediaCategoryDetailView.vue"),
         },
         {
           path: "handlungsfelder",
-          component: () => import("@/views/MediaLibraryCategoryOverview.vue"),
+          component: () => import("@/views/media_library/MediaLibraryCategoryOverview.vue"),
         },
         {
           path: "handlungsfeldlist",

client/src/views/media_library/MediaCategoryDetailView.vue

@@ -175,7 +175,7 @@ const maxCardItems = 4;
 const maxListItems = 6;
 
 const displayAsCard = (itemType: string): boolean => {
-  return itemType === "learnmedia" || itemType === "realtiveLinks";
+  return itemType === "learn_media" || itemType === "relative_link";
 };
 
 const hasMoreItems = (items: object[], maxItems: number): boolean => {
@@ -228,38 +228,59 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
             </li>
           </ul>
         </section>
-        <section v-for="item in field.items" :key="item.title" class="mb-20">
-          <h2 class="mb-4">{{ item.title }}</h2>
+
+        <template
+          v-for="content_collection in mediaCategory.body"
+          :key="content_collection.value.title"
+        >
+          <section v-if="content_collection.value?.contents?.length" class="mb-20">
+            <h2 class="mb-4">{{ content_collection.value.title }}</h2>
             <ul
               :class="{
-              'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(item.type),
-              'border-t': !displayAsCard(item.type),
-              'mb-6': hasMoreItemsForType(item.type, item.items),
+                'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(
+                  content_collection.value.contents[0].type
+                ),
+                'border-t': !displayAsCard(content_collection.value.contents[0].type),
+                'mb-6': hasMoreItemsForType(
+                  content_collection.value.contents[0].type,
+                  content_collection.value.contents
+                ),
               }"
             >
               <li
-              v-for="subItem in getMaxDisplayItemsForType(item.type, item.items)"
-              :key="subItem.link"
+                v-for="mediaItem in getMaxDisplayItemsForType(
+                  content_collection.value.contents[0].type,
+                  content_collection.value.contents
+                )"
+                :key="mediaItem.id"
               >
                 <LinkCard
-                v-if="displayAsCard(item.type)"
-                :title="subItem.title"
-                :icon="subItem.iconUrl"
-                :description="subItem.description"
-                :url="subItem.link"
-                :link-text="subItem.linkText"
-                :open-window="subItem.openWindow"
+                  v-if="displayAsCard(mediaItem.type)"
+                  :title="mediaItem.value.title"
+                  :icon="mediaItem.value.icon_url"
+                  :description="mediaItem.value.description"
+                  :url="mediaItem.value.url"
+                  :link-text="mediaItem.value.link_display_text"
+                  :open-window="mediaItem.value.open_window"
                 />
                 <div v-else class="flex items-center justify-between border-b py-4">
-                <h4 class="text-bold">{{ subItem.title }}</h4>
-                <media-link :blank="subItem.openWindow" :to="subItem.link" class="link"
-                  >{{ subItem.linkText }}
+                  <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
+                  <media-link
+                    :blank="mediaItem.value.open_window"
+                    :to="mediaItem.value.url"
+                    class="link"
+                    >{{ mediaItem.value.link_display_text }}
                   </media-link>
                 </div>
               </li>
             </ul>
             <router-link
-            v-if="hasMoreItemsForType(item.type, item.items)"
+              v-if="
+                hasMoreItemsForType(
+                  content_collection.value.contents[0].type,
+                  content_collection.value.contents
+                )
+              "
               to="/media/handlungsfeldlist"
               class="flex items-center"
             >
@@ -268,6 +289,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
             </router-link>
           </section>
         </template>
+      </template>
     </HandlungsfeldLayout>
   </Teleport>
 </template>

server/config/settings/base.py

@@ -194,7 +194,7 @@ STATICFILES_FINDERS = [
 # https://docs.djangoproject.com/en/dev/ref/settings/#media-root
 MEDIA_ROOT = str(APPS_DIR / "media")
 # https://docs.djangoproject.com/en/dev/ref/settings/#media-url
-MEDIA_URL = "/media/"
+MEDIA_URL = "/server/media/"
 
 IT_SERVE_VUE = env.bool("IT_SERVE_VUE", DEBUG)
 IT_SERVE_VUE_URL = env("IT_SERVE_VUE_URL", "http://localhost:5173")

server/vbv_lernwelt/media_library/tests/media_library_factories.py

@@ -109,6 +109,7 @@ class RelativeLinkBlockFactory(wagtail_factories.StructBlockFactory):
     title = "Rechtsstreigkeiten"
     description = "Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»"
     link_display_text = "Handlungsfeld anzeigen"
+    icon_url = "/static/icons/demo/icon-hf-reisen.svg"
     # TODO: page = blocks.PageChooserBlock zu Handlungsfeld