40 lines
1.9 KiB
Vue
40 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<footer v-if="$store.getters.getBookPageNb <= 5">
|
|
<button class="page" v-for="index in $store.getters.getBookCurrentPage + 1" :key="index">{{ index }}</button>
|
|
</footer>
|
|
<footer v-else>
|
|
<button @click="$store.dispatch('fetchPageBooks', {page: 0, nooption: false, ...$route.query})" class="page"> {{ '<<' }} </button>
|
|
<button
|
|
class="page"
|
|
:class="{ 'red': $store.getters.getBookCurrentPage - Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)) === index}"
|
|
v-for="(n, index) in (Math.max(5, Math.min($store.getters.getBookCurrentPage + 2, $store.getters.getBookPageNb)) - Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)))"
|
|
:key="index"
|
|
@click="$store.dispatch('fetchPageBooks', {page: Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)) + index, nooption: false, ...$route.query})">
|
|
{{ Math.max(0, Math.min($store.getters.getBookCurrentPage - 2, $store.getters.getBookPageNb - 5)) + index }}
|
|
</button>
|
|
<p v-if="$store.getters.getBookCurrentPage !== $store.getters.getBookPageNb" class="elipsis">...</p>
|
|
<button v-if="$store.getters.getBookCurrentPage !== $store.getters.getBookPageNb" class="page" @click="$store.dispatch('fetchPageBooks', {page: $store.getters.getBookPageNb, nooption: false, ...$route.query})">{{ $store.getters.getBookPageNb }}</button>
|
|
<button @click="$store.dispatch('fetchPageBooks', {page: $store.getters.getBookPageNb, nooption: false, ...$route.query})" class="page"> >> </button>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.elipsis {
|
|
font-size: 3rem
|
|
}
|
|
|
|
.page {
|
|
border: none;
|
|
padding: 1rem;
|
|
margin: 0.2rem;
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
padding: 0.2rem;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
</style> |