forked from kompetenzinventar/ki-frontend
Merge pull request 'Paginierung' (!74) from feature/pagination into main
Reviewed-on: kompetenzinventar/ki-frontend#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: [],
|
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')
|
||||||
}
|
}
|
||||||
|
@ -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')
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user