From 1a41fe4f109b6479c093e3f38043b4a662b9ccc8 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 5 Sep 2022 11:47:48 +0200
Subject: [PATCH] WIP: Add "Alles zeigen" link

---
 client/src/views/Handlungsfeld.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/client/src/views/Handlungsfeld.vue b/client/src/views/Handlungsfeld.vue
index cf79a3f0..39056cae 100644
--- a/client/src/views/Handlungsfeld.vue
+++ b/client/src/views/Handlungsfeld.vue
@@ -152,11 +152,16 @@ const hasMoreItems = (items: object[], maxItems: number): boolean => {
 }
 
 const getMaxDisplayItems = (items: object[], maxItems: number) => {
-  return items.slice(maxItems - 1);
+  return items.slice(0, maxItems);
 }
 
-const getMaxDisplayItemsForType = (itemType: string, subItems: object[]) => {
-  return displayAsCard(itemType) ? getMaxDisplayItems(subItems, maxCardItems) : getMaxDisplayItems(subItems, maxListItems);
+const getMaxDisplayItemsForType = (itemType: string, items: object[]) => {
+  return displayAsCard(itemType) ? getMaxDisplayItems(items, maxCardItems) : getMaxDisplayItems(items, maxListItems);
+}
+
+const hasMoreItemsForType = (itemType: string, items: object[]) => {
+  const maxItems = displayAsCard(itemType) ? maxCardItems : maxListItems;
+  return hasMoreItems(items, maxItems);
 }
 
 
@@ -186,7 +191,7 @@ const getMaxDisplayItemsForType = (itemType: string, subItems: object[]) => {
               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>
+              <span class="text-sky-500 bg-[url('/static/icons/icon-check.svg')] bg-no-repeat h-10 w-10 mr-2"></span>
               {{item}}
             </li>
           </ul>
@@ -197,9 +202,10 @@ const getMaxDisplayItemsForType = (itemType: string, subItems: object[]) => {
           <h2 class="mb-4">{{item.title}}</h2>
           <ul :class="{
             'grid gap-4 grid-cols-2': displayAsCard(item.type),
-            'border-t': !displayAsCard(item.type)
+            'border-t': !displayAsCard(item.type),
+            'mb-6': hasMoreItemsForType(item.type, item.items)
           }">
-            <li v-for="subItem in item.items" :key="subItem.link">
+            <li v-for="subItem in getMaxDisplayItemsForType(item.type, item.items)" :key="subItem.link">
                 <LinkCard
                   v-if="displayAsCard(item.type)"
                   :title="subItem.title"
@@ -213,6 +219,12 @@ const getMaxDisplayItemsForType = (itemType: string, subItems: object[]) => {
                 </div>
             </li>
           </ul>
+          <router-link
+            v-if="hasMoreItemsForType(item.type, item.items)"
+            to="/" class="flex items-center">
+            <span>Alle anschauen</span>
+            <it-icon-arrow-right></it-icon-arrow-right>
+          </router-link>
         </section>
       </template>
     </HandlungsfeldLayout>