From d9d741f4c634390fa6cf0c1c3ca550bcdb877294 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 7 Oct 2022 17:32:50 +0200
Subject: [PATCH] Add back links to media library frontend

---
 .../mediaLibrary/MLCategoryDetailPage.vue     | 175 +++++++++---------
 .../pages/mediaLibrary/MLCategoryLayout.vue   |  39 ----
 .../pages/mediaLibrary/MLMediaListPage.vue    |  83 +++++----
 client/tsconfig.app.json                      |  20 +-
 4 files changed, 143 insertions(+), 174 deletions(-)
 delete mode 100644 client/src/pages/mediaLibrary/MLCategoryLayout.vue

diff --git a/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue b/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
index 1d822529..d4f8c0ce 100644
--- a/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
+++ b/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
 import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
-import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
 import { useMediaLibraryStore } from "@/stores/mediaLibrary";
 import * as log from "loglevel";
 import { computed } from "vue";
@@ -48,9 +47,21 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
 </script>
 
 <template>
-  <Teleport v-if="mediaStore.mediaLibraryPage && mediaCategory" to="body">
-    <MLCategoryLayout>
-      <template #header>
+  <div
+    v-if="mediaCategory"
+    class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
+  >
+    <div class="bg-gray-200">
+      <div class="container-large">
+        <nav>
+          <a
+            class="block my-9 cursor-pointer flex items-center"
+            :href="`${mediaStore.mediaLibraryPage.frontend_url}/category`"
+          >
+            <it-icon-arrow-left />
+            <span>zurück</span></a
+          >
+        </nav>
         <div class="flex justify-between">
           <div class="lg:w-6/12">
             <h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
@@ -64,91 +75,89 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
             />
           </div>
         </div>
-      </template>
-      <template #body>
-        <section class="mb-20 mt-8 lg:w-2/3">
-          <h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
-          <p class="mb-4">{{ mediaCategory.description_text }}</p>
-          <ul>
+      </div>
+    </div>
+    <div class="container-large">
+      <section class="mb-20 mt-8 lg:w-2/3">
+        <h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
+        <p class="mb-4">{{ mediaCategory.description_text }}</p>
+        <ul>
+          <li
+            v-for="item in mediaCategory.items"
+            :key="item"
+            class="mb-2 flex items-center"
+          >
+            <it-icon-check class="h-8 w-8 text-sky-500 mr-4 flex-none"></it-icon-check>
+            {{ item.value }}
+          </li>
+        </ul>
+      </section>
+
+      <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>
+          <p class="mb-4 lg:w-2/3">
+            {{ content_collection.value.description }}
+          </p>
+          <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
+              ),
+            }"
+          >
             <li
-              v-for="item in mediaCategory.items"
-              :key="item"
-              class="mb-2 flex items-center"
+              v-for="mediaItem in getMaxDisplayItemsForType(
+                content_collection.value.contents[0].type,
+                content_collection.value.contents
+              )"
+              :key="mediaItem.id"
             >
-              <it-icon-check
-                class="h-8 w-8 text-sky-500 mr-4 flex-none"
-              ></it-icon-check>
-              {{ item.value }}
+              <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="`${mediaCategory.frontend_url}/media`"
+            class="flex items-center"
+          >
+            <span>Alle anschauen</span>
+            <it-icon-arrow-right></it-icon-arrow-right>
+          </router-link>
         </section>
-
-        <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>
-            <p class="mb-4 lg:w-2/3">
-              {{ content_collection.value.description }}
-            </p>
-            <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
-                ),
-              }"
-            >
-              <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="`${mediaCategory.frontend_url}/media`"
-              class="flex items-center"
-            >
-              <span>Alle anschauen</span>
-              <it-icon-arrow-right></it-icon-arrow-right>
-            </router-link>
-          </section>
-        </template>
       </template>
-    </MLCategoryLayout>
-  </Teleport>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/client/src/pages/mediaLibrary/MLCategoryLayout.vue b/client/src/pages/mediaLibrary/MLCategoryLayout.vue
deleted file mode 100644
index 2db10c49..00000000
--- a/client/src/pages/mediaLibrary/MLCategoryLayout.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-</script>
-
-<template>
-  <Teleport to="body">
-    <div class="fixed top-0 overflow-y-scroll bg-white h-full w-full">
-      <div class="bg-gray-200">
-        <div class="container-large">
-          <nav>
-            <a
-              class="block my-9 cursor-pointer flex items-center"
-              @click="router.go(-1)"
-            >
-              <it-icon-arrow-left />
-              <span>zurück</span></a
-            >
-          </nav>
-          <slot name="header"></slot>
-        </div>
-      </div>
-      <div class="container-large">
-        <slot name="body"></slot>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-.it-icon-hf {
-  color: blue;
-}
-
-.it-icon-hf > * {
-  @apply m-auto;
-}
-</style>
diff --git a/client/src/pages/mediaLibrary/MLMediaListPage.vue b/client/src/pages/mediaLibrary/MLMediaListPage.vue
index 980b8502..e62bc3f4 100644
--- a/client/src/pages/mediaLibrary/MLMediaListPage.vue
+++ b/client/src/pages/mediaLibrary/MLMediaListPage.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
-import MLCategoryLayout from "@/pages/mediaLibrary/MLCategoryLayout.vue";
 import { useMediaLibraryStore } from "@/stores/mediaLibrary";
 import * as log from "loglevel";
 import { computed } from "vue";
@@ -35,44 +34,56 @@ const mediaList = computed(() => {
 </script>
 
 <template>
-  <Teleport v-if="mediaList" to="body">
-    <MLCategoryLayout>
-      <template #header>
+  <div
+    v-if="mediaCategory"
+    class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
+  >
+    <div class="bg-gray-200">
+      <div class="container-large">
+        <nav>
+          <a
+            class="block my-9 cursor-pointer flex items-center"
+            :href="mediaStore.mediaLibraryPage.frontend_url"
+          >
+            <it-icon-arrow-left />
+            <span>zurück</span></a
+          >
+        </nav>
         <h1 class="mb-4">{{ mediaList.title }}</h1>
-      </template>
-      <template #body>
-        <section class="mb-20">
-          <ul class="border-t">
-            <li
-              v-for="item in mediaList.contents"
-              :key="item.id"
-              class="flex items-center justify-between border-b py-4"
-            >
-              <div class="flex items-center justify-between">
-                <div v-if="item.value.icon_url">
-                  <img class="mr-6 max-h-[70px]" :src="item.value.icon_url" />
-                </div>
-                <div>
-                  <h4 class="text-bold">{{ item.value.title }}</h4>
-                  <p v-if="item.value.description" class="mb-2">
-                    {{ item.value.description }}
-                  </p>
-                </div>
+      </div>
+    </div>
+    <div class="container-large">
+      <section class="mb-20">
+        <ul class="border-t">
+          <li
+            v-for="item in mediaList.contents"
+            :key="item.id"
+            class="flex items-center justify-between border-b py-4"
+          >
+            <div class="flex items-center justify-between">
+              <div v-if="item.value.icon_url">
+                <img class="mr-6 max-h-[70px]" :src="item.value.icon_url" />
               </div>
-              <div class="">
-                <media-link
-                  :to="item.value.url"
-                  :blank="item.value.open_window"
-                  class="link"
-                  >{{ item.value.link_display_text }}
-                </media-link>
+              <div>
+                <h4 class="text-bold">{{ item.value.title }}</h4>
+                <p v-if="item.value.description" class="mb-2">
+                  {{ item.value.description }}
+                </p>
               </div>
-            </li>
-          </ul>
-        </section>
-      </template>
-    </MLCategoryLayout>
-  </Teleport>
+            </div>
+            <div class="">
+              <media-link
+                :to="item.value.url"
+                :blank="item.value.open_window"
+                class="link"
+                >{{ item.value.link_display_text }}
+              </media-link>
+            </div>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/client/tsconfig.app.json b/client/tsconfig.app.json
index 00819462..0d2e0c18 100644
--- a/client/tsconfig.app.json
+++ b/client/tsconfig.app.json
@@ -1,27 +1,15 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": [
-    "env.d.ts",
-    "src/**/*",
-    "src/**/*.vue"
-  ],
-  "exclude": [
-    "src/**/__tests__/*"
-  ],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
-    "lib": [
-      "ES2021",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "composite": true,
     "strict": true,
     "allowJs": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   }
 }