local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: pagination in vue 3 (#859)

Browse source 
This fixes using Vikunja with pagination.

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/859
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad 2021-10-16 15:39:50 +00:00 committed by dpschen
parent 80163ee992
commit 373a766f5c
1 changed files with 43 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/misc/pagination.vue
View file

@ -6,35 +6,32 @@
v-if="totalPages > 1" v-if="totalPages > 1"
> >
<router-link <router-link
:disabled="currentPage === 1" :disabled="currentPage === 1 ? true : null"
:to="getRouteForPagination(currentPage - 1)" :to="getRouteForPagination(currentPage - 1)"
class="pagination-previous" class="pagination-previous"
tag="button"> tag="button">
{{ $t('misc.previous') }} {{ $t('misc.previous') }}
</router-link> </router-link>
<router-link <router-link
:disabled="currentPage === totalPages" :disabled="currentPage === totalPages ? true : null"
:to="getRouteForPagination(currentPage + 1)" :to="getRouteForPagination(currentPage + 1)"
class="pagination-next" class="pagination-next"
tag="button"> tag="button">
{{ $t('misc.next') }} {{ $t('misc.next') }}
</router-link> </router-link>
<ul class="pagination-list"> <ul class="pagination-list">
<template v-for="(p, i) in pages"> <li :key="`page-${i}`" v-for="(p, i) in pages">
<li :key="'page' + i" v-if="p.isEllipsis"> <span class="pagination-ellipsis" v-if="p.isEllipsis">&hellip;</span>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li :key="'page' + i" v-else>
<router-link <router-link
:aria-label="'Goto page ' + p.number" :aria-label="'Goto page ' + p.number"
:class="{ 'is-current': p.number === currentPage }" :class="{ 'is-current': p.number === currentPage }"
:to="getRouteForPagination(p.number)" :to="getRouteForPagination(p.number)"
class="pagination-link" class="pagination-link"
v-else
> >
{{ p.number }} {{ p.number }}
</router-link> </router-link>
</li> </li>
</template>
</ul> </ul>
</nav> </nav>
</template> </template>