From 5b3a7517042f82e37eb30ec0d4906d9942478f5c Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 3 Oct 2022 17:15:37 +0200
Subject: [PATCH] Load media items from backend to show in frontend

---
 client/src/router/index.ts                    |  10 +-
 .../MediaCategoryDetailView.vue               | 100 +++++++++++-------
 .../MediaLibraryCategoryOverview.vue          |   0
 .../MediaLibraryIndexView.vue}                |   0
 .../MediaLibraryParentView.vue}               |   0
 server/config/settings/base.py                |   2 +-
 .../tests/media_library_factories.py          |   1 +
 7 files changed, 68 insertions(+), 45 deletions(-)
 rename client/src/views/{ => media_library}/MediaCategoryDetailView.vue (77%)
 rename client/src/views/{ => media_library}/MediaLibraryCategoryOverview.vue (100%)
 rename client/src/views/{MediaLibraryMainView.vue => media_library/MediaLibraryIndexView.vue} (100%)
 rename client/src/views/{MediaLibraryView.vue => media_library/MediaLibraryParentView.vue} (100%)

diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 52660ed3..980df22e 100644
--- a/client/src/router/index.ts
+++ b/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",
diff --git a/client/src/views/MediaCategoryDetailView.vue b/client/src/views/media_library/MediaCategoryDetailView.vue
similarity index 77%
rename from client/src/views/MediaCategoryDetailView.vue
rename to client/src/views/media_library/MediaCategoryDetailView.vue
index aac88aba..7d2db8fe 100644
--- a/client/src/views/MediaCategoryDetailView.vue
+++ b/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>
-          <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),
-            }"
-          >
-            <li
-              v-for="subItem in getMaxDisplayItemsForType(item.type, item.items)"
-              :key="subItem.link"
+
+        <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(
+                  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
+                ),
+              }"
             >
-              <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"
-              />
-              <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 }}
-                </media-link>
-              </div>
-            </li>
-          </ul>
-          <router-link
-            v-if="hasMoreItemsForType(item.type, item.items)"
-            to="/media/handlungsfeldlist"
-            class="flex items-center"
-          >
-            <span>Alle anschauen</span>
-            <it-icon-arrow-right></it-icon-arrow-right>
-          </router-link>
-        </section>
+              <li
+                v-for="mediaItem in getMaxDisplayItemsForType(
+                  content_collection.value.contents[0].type,
+                  content_collection.value.contents
+                )"
+                :key="mediaItem.id"
+              >
+                <LinkCard
+                  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">{{ 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(
+                  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>
diff --git a/client/src/views/MediaLibraryCategoryOverview.vue b/client/src/views/media_library/MediaLibraryCategoryOverview.vue
similarity index 100%
rename from client/src/views/MediaLibraryCategoryOverview.vue
rename to client/src/views/media_library/MediaLibraryCategoryOverview.vue
diff --git a/client/src/views/MediaLibraryMainView.vue b/client/src/views/media_library/MediaLibraryIndexView.vue
similarity index 100%
rename from client/src/views/MediaLibraryMainView.vue
rename to client/src/views/media_library/MediaLibraryIndexView.vue
diff --git a/client/src/views/MediaLibraryView.vue b/client/src/views/media_library/MediaLibraryParentView.vue
similarity index 100%
rename from client/src/views/MediaLibraryView.vue
rename to client/src/views/media_library/MediaLibraryParentView.vue
diff --git a/server/config/settings/base.py b/server/config/settings/base.py
index b40cf862..50e3000f 100644
--- a/server/config/settings/base.py
+++ b/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")
diff --git a/server/vbv_lernwelt/media_library/tests/media_library_factories.py b/server/vbv_lernwelt/media_library/tests/media_library_factories.py
index 101c2ab0..34861664 100644
--- a/server/vbv_lernwelt/media_library/tests/media_library_factories.py
+++ b/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