load more items

This commit is contained in:
Ulf Gebhardt 2026-03-11 15:51:48 +01:00
parent aeb0909b9b
commit 15133803d8
Signed by: ulfgebhardt
GPG Key ID: DA6B843E748679C9

View File

@ -14,7 +14,7 @@
<div class="roadmap-timeline">
<!-- Drei Punkte: es wurde bereits viel umgesetzt -->
<div class="roadmap-past">
<div v-if="hasHiddenPast" class="roadmap-past roadmap-expandable" @click="expandPast">
<div class="roadmap-past-dots">
<span class="roadmap-past-dot"></span>
<span class="roadmap-past-dot"></span>
@ -61,7 +61,7 @@
</div>
<!-- Drei Punkte am Ende: weitere geplante Features -->
<div v-if="hasMorePlanned" class="roadmap-future">
<div v-if="hasMorePlanned" class="roadmap-future roadmap-expandable" @click="expandFuture">
<div class="roadmap-future-dots">
<span class="roadmap-future-dot"></span>
<span class="roadmap-future-dot"></span>
@ -246,22 +246,34 @@ const allItems = [
const MAX_VISIBLE = 7
const showAllPast = ref(false)
const showAllFuture = ref(false)
const allDone = allItems.filter(i => i.status === 'done')
const allInProgress = allItems.filter(i => i.status === 'in-progress')
const allPlanned = allItems.filter(i => i.status === 'planned')
const hiddenPastCount = computed(() => Math.max(0, allDone.length - 1))
const hasHiddenPast = computed(() => hiddenPastCount.value > 0 && !showAllPast.value)
const items = computed(() => {
const done = allItems.filter(i => i.status === 'done').slice(-1)
const inProgress = allItems.filter(i => i.status === 'in-progress').slice(0, 1)
const planned = allItems.filter(i => i.status === 'planned')
const remaining = MAX_VISIBLE - done.length - inProgress.length
return [...done, ...inProgress, ...planned.slice(0, remaining)]
const done = showAllPast.value ? allDone : allDone.slice(-1)
const inProgress = allInProgress.slice(0, 1)
const maxPlanned = showAllFuture.value ? allPlanned.length : MAX_VISIBLE - done.length - inProgress.length
return [...done, ...inProgress, ...allPlanned.slice(0, maxPlanned)]
})
const hasMorePlanned = computed(() => {
const planned = allItems.filter(i => i.status === 'planned')
const done = allItems.filter(i => i.status === 'done').slice(-1)
const inProgress = allItems.filter(i => i.status === 'in-progress').slice(0, 1)
if (showAllFuture.value) return false
const done = showAllPast.value ? allDone : allDone.slice(-1)
const inProgress = allInProgress.slice(0, 1)
const remaining = MAX_VISIBLE - done.length - inProgress.length
return planned.length > remaining
return allPlanned.length > remaining
})
const expandPast = () => { showAllPast.value = true }
const expandFuture = () => { showAllFuture.value = true }
const i18n = {
de: { done: 'Erledigt', inProgress: 'In Arbeit', planned: 'Geplant', previouslyCompleted: 'Bereits umgesetzt …', morePlanned: '… und weitere geplant' },
en: { done: 'Done', inProgress: 'In Progress', planned: 'Planned', previouslyCompleted: 'Previously completed …', morePlanned: '… and more planned' },