From a198da395ac9047b3e2af4bfdef2d2a7b9f066f7 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 5 Sep 2022 08:42:28 +0200
Subject: [PATCH] Use layout for Handlungsfelder

---
 client/src/views/Handlungsfeld.vue           | 124 +++++++++++++------
 client/src/views/HandlungsfeldLayout.vue     |  31 +++++
 client/src/views/HandlungsfelderOverview.vue |   3 +-
 3 files changed, 117 insertions(+), 41 deletions(-)
 create mode 100644 client/src/views/HandlungsfeldLayout.vue

diff --git a/client/src/views/Handlungsfeld.vue b/client/src/views/Handlungsfeld.vue
index fd3d6756..1aa54a99 100644
--- a/client/src/views/Handlungsfeld.vue
+++ b/client/src/views/Handlungsfeld.vue
@@ -1,6 +1,8 @@
 <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');
 
@@ -50,6 +52,13 @@ const field = {
           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'
+        },
       ]
     },
     {
@@ -115,14 +124,14 @@ const field = {
       items: [
         {
           title: 'Rechtsstreigkeiten',
-          iconUrl: '',
+          iconUrl: '/static/icons/demo/icon-hf-einkommenssicherung.svg',
           description: 'Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»',
           linkText: 'Handlungsfeldanzeigen',
           link: 'https://www.iterativ.ch'
         },
         {
           title: 'Rechtsstreigkeiten',
-          iconUrl: '',
+          iconUrl: '/static/icons/demo/icon-hf-einkommenssicherung.svg',
           description: 'Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»',
           linkText: 'Handlungsfeldanzeigen',
           link: 'https://www.iterativ.ch'
@@ -132,49 +141,84 @@ const field = {
   ]
 }
 
+const maxCardItems = 4;
+const maxListItems = 6;
+
+const displayAsCard = (itemType: string): boolean => {
+  return itemType === 'learnmedia' || itemType === 'realtiveLinks';
+}
+
+const hasMoreItems = (items: object[], maxItems: number): boolean => {
+  return items.length > maxItems
+}
+
+const getMaxDisplayItems = (items: object[], maxItems: number) => {
+  return items.slice(maxItems - 1);
+}
+
+const getMaxDisplayItemsForType = (itemType: string, subItems: object[]) => {
+  return displayAsCard(itemType) ? getMaxDisplayItems(subItems, maxCardItems) : getMaxDisplayItems(subItems, maxListItems);
+}
+
+const router = useRouter()
+
+
 </script>
 
 <template>
   <Teleport to="body">
-    <div class="px-16 fixed top-0 overflow-y-scroll bg-white h-full w-full">
-      <div class="-mx-16 pt-4 pb-24 px-16 mb-20 bg-gray-200 flex justify-between">
-        <div class="w-5/12">
-          <h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
-          <h1 class="mb-4">{{field.title}}</h1>
-          <p>{{field.description}}</p>
+    <HandlungsfeldLayout>
+      <template #header>
+        <div class="flex justify-between">
+          <div class="w-5/12">
+            <h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
+            <h1 class="mb-4">{{field.title}}</h1>
+            <p>{{field.description}}</p>
+          </div>
+          <img
+            class="w-5/12"
+            :src="field.icon"/>
         </div>
-        <img
-          class="w-5/12"
-          :src="field.icon"/>
-      </div>
-      <section class="mb-20">
-        <h2 class="mb-4">Das erwartet dich in diesem Handlungsfeld</h2>
-        <p class="mb-4 lg:w-2/3">{{field.summary.text}}</p>
-        <ul>
-          <li
-            v-for="item in field.summary.items"
-            :key="item"
-            class="mb-2">{{item}}</li>
-        </ul>
-      </section>
-      <section
-        class="mb-20"
-        v-for="item in field.items" :key="item.title">
-        <h2 class="mb-4">{{item.title}}</h2>
-        <ul class="grid gap-4 grid-cols-2">
-          <li v-for="subItem in item.items" :key="subItem.link">
-              <LinkCard
-                v-if="item.type === 'learnmedia'"
-                :title="subItem.title"
-                :icon="subItem.iconUrl"
-                :description="subItem.description"
-                :url="subItem.link"
-                :link-text="subItem.linkText" />
-          </li>
-        </ul>
-
-      </section>
-    </div>
+      </template>
+      <template #body>
+        <section class="mb-20">
+          <h2 class="mb-4">Das erwartet dich in diesem Handlungsfeld</h2>
+          <p class="mb-4 lg:w-2/3">{{field.summary.text}}</p>
+          <ul>
+            <li
+              v-for="item in field.summary.items"
+              :key="item"
+              class="mb-2 h-10 leading-10 flex items-center">
+              <it-icon-check class="text-sky-500 bg-[url('/static/icons/icon-check.svg')] bg-no-repeat h-10 w-10 mr-2"></it-icon-check>
+              {{item}}
+            </li>
+          </ul>
+        </section>
+        <section
+          class="mb-20"
+          v-for="item in field.items" :key="item.title">
+          <h2 class="mb-4">{{item.title}}</h2>
+          <ul :class="{
+            'grid gap-4 grid-cols-2': displayAsCard(item.type),
+            'border-t': !displayAsCard(item.type)
+          }">
+            <li v-for="subItem in item.items" :key="subItem.link">
+                <LinkCard
+                  v-if="displayAsCard(item.type)"
+                  :title="subItem.title"
+                  :icon="subItem.iconUrl"
+                  :description="subItem.description"
+                  :url="subItem.link"
+                  :link-text="subItem.linkText" />
+                <div v-else class="flex items-center justify-between border-b py-4">
+                  <h4 class="text-bold">{{subItem.title}}</h4>
+                  <router-link :to="subItem.link" class="link">{{subItem.linkText}}</router-link>
+                </div>
+            </li>
+          </ul>
+        </section>
+      </template>
+    </HandlungsfeldLayout>
   </Teleport>
 </template>
 
diff --git a/client/src/views/HandlungsfeldLayout.vue b/client/src/views/HandlungsfeldLayout.vue
new file mode 100644
index 00000000..9c5ca177
--- /dev/null
+++ b/client/src/views/HandlungsfeldLayout.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="px-16 fixed top-0 overflow-y-scroll bg-white h-full w-full">
+      <div class="-mx-16 pt-4 pb-24 px-16 mb-20 bg-gray-200">
+        <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>
+      <slot name="body"></slot>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.it-icon-hf {
+  color: blue
+}
+.it-icon-hf > * {
+  @apply m-auto;
+}
+</style>
diff --git a/client/src/views/HandlungsfelderOverview.vue b/client/src/views/HandlungsfelderOverview.vue
index 738f176c..91f82c18 100644
--- a/client/src/views/HandlungsfelderOverview.vue
+++ b/client/src/views/HandlungsfelderOverview.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
-import OverviewCard from '@/components/mediacenter/OverviewCard.vue';
 
 log.debug('HandlungsfelderOverview created');
 
@@ -70,10 +69,12 @@ const fields = [
           v-for="field in fields"
           :key="field.name"
         >
+          <router-link to="/mediacenter/handlungsfeld">
           <img
             class="m-auto"
             :src="`/static/icons/demo/${field.icon}.svg`"/>
           <h3 class="text-base text-center">{{field.name}}</h3>
+            </router-link>
         </li>
       </ul>
     </div>