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",
+          path: "",
-          component: () => import("@/views/MediaLibraryMainView.vue"),
+          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,45 +228,67 @@ 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
-          <ul
+          v-for="content_collection in mediaCategory.body"
-            :class="{
+          :key="content_collection.value.title"
-              'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(item.type),
+        >
-              'border-t': !displayAsCard(item.type),
+          <section v-if="content_collection.value?.contents?.length" class="mb-20">
-              'mb-6': hasMoreItemsForType(item.type, item.items),
+            <h2 class="mb-4">{{ content_collection.value.title }}</h2>
-            }"
+            <ul
-          >
+              :class="{
-            <li
+                'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(
-              v-for="subItem in getMaxDisplayItemsForType(item.type, item.items)"
+                  content_collection.value.contents[0].type
-              :key="subItem.link"
+                ),
+                'border-t': !displayAsCard(content_collection.value.contents[0].type),
+                'mb-6': hasMoreItemsForType(
+                  content_collection.value.contents[0].type,
+                  content_collection.value.contents
+                ),
+              }"
             >
-              <LinkCard
+              <li
-                v-if="displayAsCard(item.type)"
+                v-for="mediaItem in getMaxDisplayItemsForType(
-                :title="subItem.title"
+                  content_collection.value.contents[0].type,
-                :icon="subItem.iconUrl"
+                  content_collection.value.contents
-                :description="subItem.description"
+                )"
-                :url="subItem.link"
+                :key="mediaItem.id"
-                :link-text="subItem.linkText"
+              >
-                :open-window="subItem.openWindow"
+                <LinkCard
-              />
+                  v-if="displayAsCard(mediaItem.type)"
-              <div v-else class="flex items-center justify-between border-b py-4">
+                  :title="mediaItem.value.title"
-                <h4 class="text-bold">{{ subItem.title }}</h4>
+                  :icon="mediaItem.value.icon_url"
-                <media-link :blank="subItem.openWindow" :to="subItem.link" class="link"
+                  :description="mediaItem.value.description"
-                  >{{ subItem.linkText }}
+                  :url="mediaItem.value.url"
-                </media-link>
+                  :link-text="mediaItem.value.link_display_text"
-              </div>
+                  :open-window="mediaItem.value.open_window"
-            </li>
+                />
-          </ul>
+                <div v-else class="flex items-center justify-between border-b py-4">
-          <router-link
+                  <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
-            v-if="hasMoreItemsForType(item.type, item.items)"
+                  <media-link
-            to="/media/handlungsfeldlist"
+                    :blank="mediaItem.value.open_window"
-            class="flex items-center"
+                    :to="mediaItem.value.url"
-          >
+                    class="link"
-            <span>Alle anschauen</span>
+                    >{{ mediaItem.value.link_display_text }}
-            <it-icon-arrow-right></it-icon-arrow-right>
+                  </media-link>
-          </router-link>
+                </div>
-        </section>
+              </li>
+            </ul>
+            <router-link
+              v-if="
+                hasMoreItemsForType(
+                  content_collection.value.contents[0].type,
+                  content_collection.value.contents
+                )
+              "
+              to="/media/handlungsfeldlist"
+              class="flex items-center"
+            >
+              <span>Alle anschauen</span>
+              <it-icon-arrow-right></it-icon-arrow-right>
+            </router-link>
+          </section>
+        </template>
       </template>
     </HandlungsfeldLayout>
   </Teleport>

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