116 lines
2.5 KiB
Vue
116 lines
2.5 KiB
Vue
<template>
|
|
<article>
|
|
<post-teaser v-for="p in posts" :key="p.path" :post="p"></post-teaser>
|
|
|
|
<nav v-if="count > 5">
|
|
<ul>
|
|
<li v-if="page > 1">
|
|
<nuxt-link :to="makePageUrl(1)" aria-label="page 1">1</nuxt-link>
|
|
</li>
|
|
|
|
<li v-if="page > 3">
|
|
<span> … </span>
|
|
</li>
|
|
|
|
<li v-if="page > 2">
|
|
<nuxt-link
|
|
:to="makePageUrl(page - 1)"
|
|
:aria-label="`page ${page - 1}`"
|
|
>
|
|
{{ page - 1 }}
|
|
</nuxt-link>
|
|
</li>
|
|
|
|
<li>
|
|
<span>
|
|
{{ page }}
|
|
</span>
|
|
</li>
|
|
|
|
<li v-if="page < total - 1">
|
|
<nuxt-link
|
|
:to="makePageUrl(page + 1)"
|
|
:aria-label="`page ${page + 1}`"
|
|
>
|
|
{{ page + 1 }}
|
|
</nuxt-link>
|
|
</li>
|
|
|
|
<li v-if="page < total - 2">
|
|
<span> … </span>
|
|
</li>
|
|
|
|
<li v-if="page < total">
|
|
<nuxt-link :to="makePageUrl(total)" :aria-label="`page ${total}`">
|
|
{{ total }}
|
|
</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</article>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator'
|
|
|
|
@Component
|
|
export default class PostQuery extends Vue {
|
|
@Prop({ required: true }) posts!: IPostTeaser[]
|
|
@Prop({ required: true }) count!: number
|
|
|
|
readonly defaults = {
|
|
posts: this.posts,
|
|
count: this.count,
|
|
}
|
|
|
|
get page() {
|
|
return parseInt((this.$route.query.page as string) || '1')
|
|
}
|
|
|
|
get total() {
|
|
return Math.ceil(this.count / 5)
|
|
}
|
|
|
|
makePageUrl(p: number) {
|
|
let path = this.$route.path
|
|
if (!(path.startsWith('/tag') || path.startsWith('/blog'))) {
|
|
path = '/blog'
|
|
}
|
|
|
|
path = path.replace(/\d+$/, '').replace(/\/$/, '')
|
|
if (p > 1) {
|
|
path = path + '/' + p
|
|
}
|
|
|
|
return this.$router.resolve({
|
|
path,
|
|
query: this.$route.query,
|
|
}).href
|
|
}
|
|
|
|
@Watch('$route.params.page')
|
|
@Watch('$route.params.tag')
|
|
async updatePosts() {
|
|
if (this.$route.query.q) {
|
|
const ps = await this.$axios.$post(
|
|
'/.netlify/functions/search',
|
|
undefined,
|
|
{
|
|
params: {
|
|
q: this.$route.query.q,
|
|
page: this.$route.params.page,
|
|
tag: this.$route.params.tag,
|
|
},
|
|
}
|
|
)
|
|
|
|
this.count = ps.count
|
|
this.$set(this, 'posts', ps.result)
|
|
} else {
|
|
this.count = this.defaults.count
|
|
this.$set(this, 'posts', this.defaults.posts)
|
|
}
|
|
}
|
|
}
|
|
</script>
|