105 lines
1.8 KiB
Vue
105 lines
1.8 KiB
Vue
<template>
|
|
<div
|
|
v-if="searchDone"
|
|
class="pagination"
|
|
>
|
|
<router-link
|
|
class="previous"
|
|
:class="{ 'none-opacity': modelValue === 1 }"
|
|
:to="{ query: buildPageUrlQuery(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: buildPageUrlQuery(page) }"
|
|
>
|
|
{{ page }}
|
|
</router-link>
|
|
|
|
<div
|
|
v-else
|
|
class="current"
|
|
>
|
|
{{ page }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<router-link
|
|
class="next"
|
|
:class="{ 'none-opacity': modelValue >= maxPage }"
|
|
:to="{ query: buildPageUrlQuery(+modelValue + 1) }"
|
|
>
|
|
{{ $gettext('Next page') }}
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
maxPage: Number,
|
|
searchDone: Boolean,
|
|
modelValue: Number,
|
|
pages: Array as () => number[]
|
|
},
|
|
|
|
methods: {
|
|
buildPageUrlQuery (page: number) {
|
|
const query = this.$route.query
|
|
|
|
return Object.assign({}, query, { page })
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '../scss/_variables';
|
|
|
|
.pagination {
|
|
margin-top: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.pages {
|
|
display: flex;
|
|
|
|
* {
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $orange;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.previous {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.next {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
@media screen and (max-width: $small-view) {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|