ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP: Add "Alles zeigen" link

This commit is contained in:
Christian Cueni 2022-09-05 11:47:48 +02:00
parent d38e7eee38
commit 1a41fe4f10
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/views/Handlungsfeld.vue
View File

@ -152,11 +152,16 @@ const hasMoreItems = (items: object[], maxItems: number): boolean => {
} }
const getMaxDisplayItems = (items: object[], maxItems: number) => { const getMaxDisplayItems = (items: object[], maxItems: number) => {
return items.slice(maxItems - 1); return items.slice(0, maxItems);
} }
const getMaxDisplayItemsForType = (itemType: string, subItems: object[]) => { const getMaxDisplayItemsForType = (itemType: string, items: object[]) => {
return displayAsCard(itemType) ? getMaxDisplayItems(subItems, maxCardItems) : getMaxDisplayItems(subItems, maxListItems); 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" v-for="item in field.summary.items"
:key="item" :key="item"
class="mb-2 h-10 leading-10 flex items-center"> 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}} {{item}}
</li> </li>
</ul> </ul>
@ -197,9 +202,10 @@ const getMaxDisplayItemsForType = (itemType: string, subItems: object[]) => {
<h2 class="mb-4">{{item.title}}</h2> <h2 class="mb-4">{{item.title}}</h2>
<ul :class="{ <ul :class="{
'grid gap-4 grid-cols-2': displayAsCard(item.type), '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 <LinkCard
v-if="displayAsCard(item.type)" v-if="displayAsCard(item.type)"
:title="subItem.title" :title="subItem.title"
@ -213,6 +219,12 @@ const getMaxDisplayItemsForType = (itemType: string, subItems: object[]) => {
</div> </div>
</li> </li>
</ul> </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> </section>
</template> </template>
</HandlungsfeldLayout> </HandlungsfeldLayout>