93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<template>
|
|
<div v-if="searched && hasPages()" class="pagination">
|
|
<router-link class="previous" :class="{ 'opacity-0': modelValue === 1 }" :to="{ query: { ...getUrlQuery(modelValue - 1) } }">
|
|
{{ $gettext('Previous page') }}
|
|
</router-link>
|
|
|
|
<div class="pages">
|
|
<template v-for="page in pages" :key="page">
|
|
<router-link v-if="page !== modelValue" class="go-to-page" :to="{ query: { ...getUrlQuery(page) } }">
|
|
{{ page }}
|
|
</router-link>
|
|
|
|
<div v-else class="current">
|
|
{{ page }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<router-link class="next" :class="{ 'opacity-0': modelValue >= maxPage }" :to="{ query: { ...getUrlQuery(+modelValue + 1) } }">
|
|
{{ $gettext('Next page') }}
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { SearchUrl } from '@/models'
|
|
import { defineComponent } from 'vue'
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
maxPage: Number,
|
|
searched: Boolean,
|
|
modelValue: Number,
|
|
pages: Array as () => number[]
|
|
},
|
|
|
|
methods: {
|
|
getUrlQuery (page: number): SearchUrl {
|
|
return {
|
|
...this.$route.query,
|
|
|
|
page: page + ''
|
|
}
|
|
},
|
|
|
|
hasPages () {
|
|
return this.pages.length !== 0
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '../scss/_variables';
|
|
@import '../scss/bootstrap-mixins';
|
|
|
|
.pagination {
|
|
@include margin-top(3rem);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.pages {
|
|
display: flex;
|
|
|
|
* {
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $orange-main;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.previous {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.next {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
@media screen and (max-width: $small-view) {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
</style>
|