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: [], profiles: [],
error: false, error: false,
errorMessage: '', errorMessage: '',
pages: 1,
query: { query: {
search: '' search: '',
page: 1
} }
} }
}, },
@ -40,11 +42,17 @@ export default {
state.errorMessage = errorMessage state.errorMessage = errorMessage
}, },
setQuerySearch(state, search) { 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: { actions: {
async search({state, commit, rootState}) { async search({state, commit, rootState, dispatch}) {
if (state.searching) { if (state.searching) {
return return
} }
@ -60,11 +68,13 @@ export default {
commit('setErrorMessage', '') commit('setErrorMessage', '')
const url = new URL(`${window.ki.apiUrl}/users/profiles`) const url = new URL(`${window.ki.apiUrl}/users/profiles`)
if (state.query.search) { if (state.query.search) {
url.searchParams.append('search', state.query.search) url.searchParams.append('search', state.query.search)
} }
url.searchParams.append('page', state.query.page)
const headers = { const headers = {
Authorization: `Bearer ${rootState.token}`, Authorization: `Bearer ${rootState.token}`,
} }
@ -81,8 +91,19 @@ export default {
return return
} }
console.log(response.ok)
console.log(response.status)
console.log(state.query.page)
clearTimeout(timeoutId) 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) { if (!response.ok) {
commit('setError', true) commit('setError', true)
commit('clearProfiles') commit('clearProfiles')
@ -93,6 +114,7 @@ export default {
const responseData = await response.json() const responseData = await response.json()
commit('setProfiles', responseData.profiles) commit('setProfiles', responseData.profiles)
commit('setPages', responseData.pages)
commit('setSearching', false) commit('setSearching', false)
commit('hideSpinner') 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> <p v-if="searchText !== ''">Probiere eine andere Suche.</p>
</div> </div>
<div v-else-if="showResults"> <div v-else-if="showResults">
<div class="d-flex justify-content-around">
<Paginator
:pages="pages"
:current="currentPage"
@page="handlePageSelected"
/>
</div>
<SearchResult <SearchResult
v-for="profile in profiles" v-for="profile in profiles"
:key="profile.user_id" :key="profile.user_id"
class="mb-3" class="mb-3"
:profile="profile" :profile="profile"
/> />
<div class="d-flex justify-content-around">
<Paginator
:pages="pages"
:current="currentPage"
@page="handlePageSelected"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -67,21 +81,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Paginator from '@/components/Paginator'
import SearchResult from '@/components/SearchResult' import SearchResult from '@/components/SearchResult'
import Spinner from '@/components/Spinner' import Spinner from '@/components/Spinner'
export default { export default {
name: 'Search', name: 'Search',
components: { components: {
Paginator,
SearchResult, SearchResult,
Spinner, Spinner,
}, },
data() {
return {
textChanged: false
}
},
computed: { computed: {
...mapState({ ...mapState({
searching: state => state.search.searching, searching: state => state.search.searching,
profiles: state => state.search.profiles, profiles: state => state.search.profiles,
error: state => state.search.error, error: state => state.search.error,
showSpinner: state => state.search.showSpinner, showSpinner: state => state.search.showSpinner,
pages: state => state.search.pages,
}), }),
searchText: { searchText: {
get() { get() {
@ -89,6 +111,15 @@ export default {
}, },
set(text) { set(text) {
this.$store.commit('search/setQuerySearch', 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() { showNoResults() {
@ -109,21 +140,37 @@ export default {
}, },
methods: { methods: {
handleSubmit() { 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') this.$store.dispatch('search/search')
}, },
focusSearchText() { focusSearchText() {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.searchTextInput.focus() 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() { created() {
if (this.$route.query.query !== undefined) { if (this.$route.query.query) {
this.searchText = this.$route.query.query this.searchText = this.$route.query.query
this.$store.commit('search/clearProfiles') 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') this.$store.dispatch('search/search')
} }
}; };