Merge pull request 'Paginierung' (!74) from feature/pagination into main
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #74
This commit is contained in:
commit
3017c001b2
49
src/components/Paginator.vue
Normal file
49
src/components/Paginator.vue
Normal 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>
|
@ -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
|
||||
}
|
||||
@ -60,11 +68,13 @@ export default {
|
||||
commit('setErrorMessage', '')
|
||||
|
||||
const url = new URL(`${window.ki.apiUrl}/users/profiles`)
|
||||
|
||||
|
||||
if (state.query.search) {
|
||||
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')
|
||||
}
|
||||
|
@ -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')
|
||||
}
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user