Merge pull request 'Paginierung' (!74) from feature/pagination into main

Reviewed-on: #74

src/views/Search.vue

@@ -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')
   }
 };