add pagination

This commit is contained in:
weeman 2022-01-16 16:36:54 +01:00
parent 04cb8a7217
commit bac8731e17
Signed by untrusted user: weeman
GPG Key ID: 34F0524D4DA694A1
3 changed files with 124 additions and 6 deletions

View File

@ -0,0 +1,49 @@
<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<ul class="pagination">
<li
class="page-item"
:class="{ active: page === current }"
v-for="page in pages"
:key="page"
>
<span
class="page-link pointer"
@click="onPageClicked(page)"
>
{{ page }}
</span>
</li>
</ul>
</template>
<script>
export default {
name: 'Paginator',
props: {
page: Number,
current: Number,
pages: Number
},
methods: {
onPageClicked(page) {
if (page == this.current) {
return
}
this.$emit('page', page)
}
}
}
</script>
<style>
.pointer {
cursor: pointer;
}
</style>

View File

@ -12,8 +12,10 @@ export default {
profiles: [],
error: false,
errorMessage: '',
pages: 1,
query: {
search: ''
search: '',
page: 1
}
}
},
@ -40,11 +42,17 @@ export default {
state.errorMessage = errorMessage
},
setQuerySearch(state, search) {
state.query.search = search
state.query = {...state.query, search}
},
setPages(state, pages) {
state.pages = pages
},
setQueryPage(state, page) {
state.query = {...state.query, page}
}
},
actions: {
async search({state, commit, rootState}) {
async search({state, commit, rootState, dispatch}) {
if (state.searching) {
return
}
@ -65,6 +73,8 @@ export default {
url.searchParams.append('search', state.query.search)
}
url.searchParams.append('page', state.query.page)
const headers = {
Authorization: `Bearer ${rootState.token}`,
}
@ -81,8 +91,19 @@ export default {
return
}
console.log(response.ok)
console.log(response.status)
console.log(state.query.page)
clearTimeout(timeoutId)
if (!response.ok && response.status === 404 && state.query.page != 1) {
commit('setQueryPage', 1)
commit('setSearching', false)
await dispatch('search')
return
}
if (!response.ok) {
commit('setError', true)
commit('clearProfiles')
@ -93,6 +114,7 @@ export default {
const responseData = await response.json()
commit('setProfiles', responseData.profiles)
commit('setPages', responseData.pages)
commit('setSearching', false)
commit('hideSpinner')
}

View File

@ -53,12 +53,26 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<p v-if="searchText !== ''">Probiere eine andere Suche.</p>
</div>
<div v-else-if="showResults">
<div class="d-flex justify-content-around">
<Paginator
:pages="pages"
:current="currentPage"
@page="handlePageSelected"
/>
</div>
<SearchResult
v-for="profile in profiles"
:key="profile.user_id"
class="mb-3"
:profile="profile"
/>
<div class="d-flex justify-content-around">
<Paginator
:pages="pages"
:current="currentPage"
@page="handlePageSelected"
/>
</div>
</div>
</div>
</div>
@ -67,21 +81,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<script>
import { mapState } from 'vuex'
import Paginator from '@/components/Paginator'
import SearchResult from '@/components/SearchResult'
import Spinner from '@/components/Spinner'
export default {
name: 'Search',
components: {
Paginator,
SearchResult,
Spinner,
},
data() {
return {
textChanged: false
}
},
computed: {
...mapState({
searching: state => state.search.searching,
profiles: state => state.search.profiles,
error: state => state.search.error,
showSpinner: state => state.search.showSpinner,
pages: state => state.search.pages,
}),
searchText: {
get() {
@ -89,6 +111,15 @@ export default {
},
set(text) {
this.$store.commit('search/setQuerySearch', text)
this.textChanged = true
}
},
currentPage: {
get() {
return this.$store.state.search.query.page
},
set(page) {
this.$store.commit('search/setQueryPage', page)
}
},
showNoResults() {
@ -109,21 +140,37 @@ export default {
},
methods: {
handleSubmit() {
this.$router.push({ query: { query: this.searchText }})
if (this.textChanged === true) {
this.$store.commit('search/setQueryPage', 1)
}
this.pushState()
this.$store.dispatch('search/search')
},
focusSearchText() {
this.$nextTick(() => {
this.$refs.searchTextInput.focus()
})
},
handlePageSelected(page) {
this.currentPage = page
this.pushState()
this.$store.dispatch('search/search')
},
pushState() {
this.$router.push({ query: { query: this.searchText, page: this.currentPage }})
}
},
created() {
if (this.$route.query.query !== undefined) {
if (this.$route.query.query) {
this.searchText = this.$route.query.query
this.$store.commit('search/clearProfiles')
}
if (this.$route.query.page) {
this.currentPage = parseInt(this.$route.query.page, 10)
this.$store.commit('search/clearProfiles')
}
this.$store.dispatch('search/search')
}
};