WIP: Add media link component

client/src/components/mediacenter/OverviewCard.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import * as log from 'loglevel';
 
 export interface Props {
   title: string,

client/src/router/index.ts

@@ -41,6 +41,10 @@ const router = createRouter({
           path: 'handlungsfeld',
           component: () => import('@/views/Handlungsfeld.vue')
         },
+        {
+          path: 'handlungsfeldlist',
+          component: () => import('@/views/MediaList.vue')
+        },
       ]
     },
     {

client/src/views/Handlungsfeld.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
 import LinkCard from "@/components/mediacenter/LinkCard.vue";
-import { useRouter } from 'vue-router';
 import HandlungsfeldLayout from "@/views/HandlungsfeldLayout.vue";
 
 log.debug('Handlungsfeld created');
@@ -160,8 +159,6 @@ const getMaxDisplayItemsForType = (itemType: string, subItems: object[]) => {
   return displayAsCard(itemType) ? getMaxDisplayItems(subItems, maxCardItems) : getMaxDisplayItems(subItems, maxListItems);
 }
 
-const router = useRouter()
-
 
 </script>
 

client/src/views/MediaList.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import LinkCard from "@/components/mediacenter/LinkCard.vue";
+import HandlungsfeldLayout from "@/views/HandlungsfeldLayout.vue";
+
+const data = {
+  title: 'Fahrzeug: Lernmedien',
+  items: [
+    {
+      title: 'Die Motorfahrzeughaftpflicht',
+      description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
+      iconUrl: '/static/icons/demo/icon-hf-book.png',
+      linkText: 'PDF anzeigen',
+      link: 'https://www.iterativ.ch'
+    },
+    {
+      title: 'Die Motorfahrzeughaftpflicht',
+      iconUrl: '/static/icons/demo/icon-hf-book.png',
+      description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
+      linkText: 'PDF anzeigen',
+      link: 'https://www.iterativ.ch'
+    },
+    {
+      title: 'Die Motorfahrzeughaftpflicht',
+      iconUrl: '/static/icons/demo/icon-hf-book.png',
+      description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
+      linkText: 'PDF anzeigen',
+      link: 'https://www.iterativ.ch'
+    },
+    {
+      title: 'Die Motorfahrzeughaftpflicht',
+      iconUrl: '/static/icons/demo/icon-hf-book.png',
+      description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
+      linkText: 'PDF anzeigen',
+      link: 'https://www.iterativ.ch'
+    },
+    {
+      title: 'Die Motorfahrzeughaftpflicht',
+      iconUrl: '/static/icons/demo/icon-hf-book.png',
+      description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
+      linkText: 'PDF anzeigen',
+      link: 'https://www.iterativ.ch'
+    },
+  ]
+}
+
+
+</script>
+
+<template>
+  <Teleport to="body">
+    <HandlungsfeldLayout>
+      <template #header>
+          <h1 class="mb-4">{{data.title}}</h1>
+      </template>
+      <template #body>
+        <section class="mb-20">
+          <ul class="border-t">
+            <li
+              v-for="item in data.items"
+              :key="item.link"
+              class="flex items-center justify-between border-b py-4">
+              <div class="flex items-center justify-between">
+                <div v-if="item.iconUrl">
+                  <img
+                    class="mr-6 max-h-[70px]"
+                    :src="item.iconUrl" />
+                </div>
+                <div>
+                  <h4 class="text-bold">{{item.title}}</h4>
+                  <p
+                    v-if="item.description"
+                    class="mb-2">{{item.description}}</p>
+                </div>
+              </div>
+              <div class="">
+                <router-link :to="item.link" class="link">{{item.linkText}}</router-link>
+              </div>
+            </li>
+          </ul>
+        </section>
+      </template>
+    </HandlungsfeldLayout>
+  </Teleport>
+</template>
+
+<style scoped>
+.it-icon-hf {
+  color: blue
+}
+.it-icon-hf > * {
+  @apply m-auto;
+}
+</style>