Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - fix pagination

Browse Source
This commit is contained in:
Sam 2022-03-13 11:22:48 +01:00
parent f241504b8f
commit d11ce9615a
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
fittrackee_client/src/components/Common/Pagination.vue
View File

@ -3,13 +3,15 @@
<ul class="pagination"> <ul class="pagination">
<li class="page-prev" :class="{ disabled: !pagination.has_prev }"> <li class="page-prev" :class="{ disabled: !pagination.has_prev }">
<router-link <router-link
v-slot="{ navigate }"
class="page-link" class="page-link"
:to="{ path, query: getQuery(pagination.page, -1) }" :to="{ path, query: getQuery(pagination.page, -1) }"
:event="pagination.has_prev ? 'click' : ''"
:disabled="!pagination.has_prev" :disabled="!pagination.has_prev"
> >
<i class="fa fa-chevron-left" aria-hidden="true" /> <slot @click="pagination.has_next ? navigate : null">
{{ $t('api.PAGINATION.PREVIOUS') }} {{ $t('api.PAGINATION.PREVIOUS') }}
<i class="fa fa-chevron-left" aria-hidden="true" />
</slot>
</router-link> </router-link>
</li> </li>
<li <li
@ -29,13 +31,15 @@
</li> </li>
<li class="page-next" :class="{ disabled: !pagination.has_next }"> <li class="page-next" :class="{ disabled: !pagination.has_next }">
<router-link <router-link
v-slot="{ navigate }"
class="page-link" class="page-link"
:to="{ path, query: getQuery(pagination.page, 1) }" :to="{ path, query: getQuery(pagination.page, 1) }"
:event="pagination.has_next ? 'click' : ''"
:disabled="!pagination.has_next" :disabled="!pagination.has_next"
> >
{{ $t('api.PAGINATION.NEXT') }} <slot @click="pagination.has_next ? navigate : null">
<i class="fa fa-chevron-right" aria-hidden="true" /> {{ $t('api.PAGINATION.NEXT') }}
<i class="fa fa-chevron-right" aria-hidden="true" />
</slot>
</router-link> </router-link>
</li> </li>
</ul> </ul>
@ -95,6 +99,8 @@
&.disabled { &.disabled {
cursor: default; cursor: default;
a { a {
cursor: default;
pointer-events: none;
color: var(--disabled-color); color: var(--disabled-color);
} }
} }