vikunja
/
vikunja
6
43
Fork 72
Code Issues 150 Pull Requests 19 Packages Releases 32 Activity

fix: pagination in vue 3 (#859) 

This fixes using Vikunja with pagination.

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: vikunja/frontend#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

89
src/components/misc/pagination.vue
View File

@ -1,42 +1,39 @@
<template> <template>
<nav <nav
aria-label="pagination" aria-label="pagination"
class="pagination is-centered p-4" class="pagination is-centered p-4"
role="navigation" role="navigation"
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> <router-link
</li> :aria-label="'Goto page ' + p.number"
<li :key="'page' + i" v-else> :class="{ 'is-current': p.number === currentPage }"
<router-link :to="getRouteForPagination(p.number)"
:aria-label="'Goto page ' + p.number" class="pagination-link"
:class="{ 'is-current': p.number === currentPage }" v-else
:to="getRouteForPagination(p.number)" >
class="pagination-link" {{ p.number }}
> </router-link>
{{ p.number }} </li>
</router-link> </ul>
</li> </nav>
</template>
</ul>
</nav>
</template> </template>
<script> <script>
@ -112,14 +109,14 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.pagination { .pagination {
padding-bottom: 1rem; padding-bottom: 1rem;
.pagination-previous, .pagination-previous,
.pagination-next { .pagination-next {
&:not(:disabled):hover { &:not(:disabled):hover {
background: $scheme-main; background: $scheme-main;
cursor: pointer; cursor: pointer;
} }
} }
} }
</style> </style>