From bac8731e17e0a61d319a292bdd8f3f86603b6488 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Sun, 16 Jan 2022 16:36:54 +0100 Subject: [PATCH] add pagination --- src/components/Paginator.vue | 49 ++++++++++++++++++++++++++++++++++ src/store/search.js | 30 ++++++++++++++++++--- src/views/Search.vue | 51 ++++++++++++++++++++++++++++++++++-- 3 files changed, 124 insertions(+), 6 deletions(-) create mode 100644 src/components/Paginator.vue diff --git a/src/components/Paginator.vue b/src/components/Paginator.vue new file mode 100644 index 0000000..31d14ca --- /dev/null +++ b/src/components/Paginator.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/src/store/search.js b/src/store/search.js index b383fef..2a5b674 100644 --- a/src/store/search.js +++ b/src/store/search.js @@ -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') } diff --git a/src/views/Search.vue b/src/views/Search.vue index ae36c63..fef58ec 100644 --- a/src/views/Search.vue +++ b/src/views/Search.vue @@ -53,12 +53,26 @@ SPDX-License-Identifier: AGPL-3.0-or-later

Probiere eine andere Suche.

+
+ +
+
+ +
@@ -67,21 +81,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later