161 lines
4 KiB
Vue
161 lines
4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import PageButton from "./PageButton.vue";
|
|
|
|
const PAGE_NUMBER = 7;
|
|
|
|
const props = defineProps<{
|
|
pageNbr: number;
|
|
currentPage: number;
|
|
}>();
|
|
|
|
const emit = defineEmits(["setPage"]);
|
|
|
|
const pageToDraw = computed(() => {
|
|
return Math.min(props.pageNbr, PAGE_NUMBER);
|
|
});
|
|
|
|
const isAtStart = computed(() => {
|
|
return props.currentPage < 4;
|
|
});
|
|
|
|
const isAtEnd = computed(() => {
|
|
return props.currentPage > props.pageNbr - 2;
|
|
});
|
|
|
|
function setPage(page: number) {
|
|
emit("setPage", page);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<button
|
|
class="btn-small btn-navig"
|
|
:disabled="currentPage <= 1"
|
|
:class="{ 'btn-secondary': currentPage > 1, 'bg-grey': currentPage <= 1 }"
|
|
@click="setPage(currentPage - 1)"
|
|
>
|
|
←
|
|
</button>
|
|
<span v-if="pageNbr <= PAGE_NUMBER">
|
|
<span v-for="index in pageToDraw" :key="index">
|
|
<PageButton
|
|
@click="setPage(index)"
|
|
:current-page="currentPage"
|
|
:page="index"
|
|
></PageButton>
|
|
</span>
|
|
</span>
|
|
<span v-else-if="isAtStart">
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="1"
|
|
@click="setPage(1)"
|
|
></PageButton>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="2"
|
|
@click="setPage(2)"
|
|
></PageButton>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="3"
|
|
@click="setPage(3)"
|
|
></PageButton>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="4"
|
|
@click="setPage(4)"
|
|
></PageButton>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="5"
|
|
@click="setPage(5)"
|
|
></PageButton>
|
|
<button disabled class="btn-small btn-pagination bg-grey disabled">
|
|
…
|
|
</button>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="pageNbr"
|
|
@click="setPage(pageNbr)"
|
|
></PageButton>
|
|
</span>
|
|
<span v-else-if="isAtEnd">
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="1"
|
|
@click="setPage(1)"
|
|
></PageButton>
|
|
<button disabled class="btn-small bg-grey btn-pagination disabled">
|
|
…
|
|
</button>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="pageNbr - 4"
|
|
@click="setPage(pageNbr - 4)"
|
|
></PageButton>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="pageNbr - 3"
|
|
@click="setPage(pageNbr - 3)"
|
|
></PageButton>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="pageNbr - 2"
|
|
@click="setPage(pageNbr - 2)"
|
|
></PageButton>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="pageNbr - 1"
|
|
@click="setPage(pageNbr - 1)"
|
|
></PageButton>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="pageNbr"
|
|
@click="setPage(pageNbr)"
|
|
></PageButton>
|
|
</span>
|
|
<span v-else>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="1"
|
|
@click="setPage(1)"
|
|
></PageButton>
|
|
<button disabled class="btn-small bg-grey btn-pagination disabled">
|
|
…
|
|
</button>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="currentPage - 1"
|
|
@click="setPage(currentPage - 1)"
|
|
></PageButton>
|
|
<PageButton :current-page="currentPage" :page="currentPage"></PageButton>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="currentPage + 1"
|
|
@click="setPage(currentPage + 1)"
|
|
></PageButton>
|
|
<button disabled class="btn-small bg-grey btn-pagination disabled">
|
|
…
|
|
</button>
|
|
<PageButton
|
|
:current-page="currentPage"
|
|
:page="pageNbr"
|
|
@click="setPage(pageNbr)"
|
|
></PageButton>
|
|
</span>
|
|
<button
|
|
class="btn-small btn-navig"
|
|
:disabled="currentPage >= pageNbr"
|
|
:class="{
|
|
'btn-secondary': currentPage < pageNbr,
|
|
'bg-grey': currentPage >= pageNbr,
|
|
}"
|
|
@click="setPage(currentPage + 1)"
|
|
>
|
|
→
|
|
</button>
|
|
</div>
|
|
</template>
|