feature: seach pageination WIP

webapp/components/_new/features/SearchResults/SearchResults.vue

@@ -20,11 +20,11 @@
       />
       <template v-else-if="activeTab === 'Post'">
         <pagination-buttons
-          v-show="postCount > 25"
+          v-show="postCount > pageSize"
           :hasNext="hasMorePosts"
           :hasPrevious="hasPreviousPosts"
-          :hasResultPage="postPage"
-          :hasResultCount="postCount"
+          :activePage="postPage"
+          :totalResultCount="postCount"
           @back="previousPosts"
           @next="nextPosts"
         />
@@ -35,22 +35,22 @@
         </masonry-grid>
 
         <pagination-buttons
-          v-show="postCount > 25"
+          v-show="postCount > pageSize"
           :hasNext="hasMorePosts"
           :hasPrevious="hasPreviousPosts"
-          :hasResultPage="postPage"
-          :hasResultCount="postCount"
+          :activePage="postPage"
+          :totalResultCount="postCount"
           @back="previousPosts"
           @next="nextPosts"
         />
       </template>
       <ul v-else-if="activeTab === 'User'" class="user-list">
         <pagination-buttons
-          v-show="userCount > 25"
+          v-show="userCount > pageSize"
           :hasNext="hasMoreUsers"
           :hasPrevious="hasPreviousUsers"
-          :hasResultPage="userPage"
-          :hasResultCount="userCount"
+          :activePage="userPage"
+          :totalResultCount="userCount"
           @back="previousUsers"
           @next="nextUsers"
         />
@@ -60,22 +60,22 @@
           </base-card>
         </li>
         <pagination-buttons
-          v-show="userCount > 25"
+          v-show="userCount > pageSize"
           :hasNext="hasMoreUsers"
           :hasPrevious="hasPreviousUsers"
-          :hasResultPage="userPage"
-          :hasResultCount="userCount"
+          :activePage="userPage"
+          :totalResultCount="userCount"
           @back="previousUsers"
           @next="nextUsers"
         />
       </ul>
       <ul v-else-if="activeTab === 'Hashtag'" class="hashtag-list">
         <pagination-buttons
-          v-show="hashtagCount > 25"
+          v-show="hashtagCount > pageSize"
           :hasNext="hasMoreHashtags"
           :hasPrevious="hasPreviousHashtags"
-          :hasResultPage="hashtagPage"
-          :hasResultCount="hashtagCount"
+          :activePage="hashtagPage"
+          :totalResultCount="hashtagCount"
           @back="previousHashtags"
           @next="nextHashtags"
         />
@@ -85,11 +85,11 @@
           </base-card>
         </li>
         <pagination-buttons
-          v-show="hashtagCount > 25"
+          v-show="hashtagCount > pageSize"
           :hasNext="hasMoreHashtags"
           :hasPrevious="hasPreviousHashtags"
-          :hasResultPage="hashtagPage"
-          :hasResultCount="hashtagCount"
+          :activePage="hashtagPage"
+          :totalResultCount="hashtagCount"
           @back="previousHashtags"
           @next="nextHashtags"
         />
@@ -124,9 +124,12 @@ export default {
     search: {
       type: String,
     },
+    pageSize: {
+      type: Number,
+      default: 24
+    },
   },
   data() {
-    const pageSize = 25
     return {
       posts: [],
       users: [],
@@ -138,10 +141,9 @@ export default {
       hashtagCount: 0,
       hashtagPage: 0,
       activeTab: null,
-      pageSize,
-      firstPosts: pageSize,
-      firstUsers: pageSize,
-      firstHashtags: pageSize,
+      firstPosts: this.pageSize,
+      firstUsers: this.pageSize,
+      firstHashtags: this.pageSize,
       postsOffset: 0,
       usersOffset: 0,
       hashtagsOffset: 0,
@@ -189,6 +191,10 @@ export default {
       return this.hashtagsOffset > 0
     },
     hasMorePosts() {
+      console.log("this.postPage",this.postPage)
+      console.log("this.pageSize",this.pageSize)
+      console.log("this.postCount",this.postCount)
+      
       return (this.postPage + 1) * this.pageSize < this.postCount
     },
     hasMoreUsers() {

webapp/components/_new/generic/PaginationButtons/PaginationButtons.vue

@@ -8,7 +8,8 @@
       data-test="previous-button"
     />
     <span class="pagination-pageCount">
-      Seite {{ hasResultPage + 1 }} / {{ Math.round(hasResultCount / 25) + 1 }}
+      {{ totalResultCount }} - {{  pageSize }} - {{activePage}} - {{ Math.round(totalResultCount )  }}
+      Seite {{ activePage + 1 }} / {{ Math.round(totalResultCount / pageSize) + 1 }}
     </span>
 
     <base-button
@@ -25,6 +26,10 @@
 <script>
 export default {
   props: {
+    pageSize: {
+      type: Number,
+      default: 24
+    },
     hasNext: {
       type: Boolean,
       default: false,
@@ -33,15 +38,16 @@ export default {
       type: Boolean,
       default: false,
     },
-    hasResultPage: {
+    activePage: {
       type: Number,
       default: 0,
     },
-    hasResultCount: {
+    totalResultCount: {
       type: Number,
       default: 0,
     },
   },
+ 
 }
 </script>
 

webapp/locales/de.json

@@ -595,7 +595,7 @@
       "User": "Benutzer"
     },
     "hint": "Wonach suchst Du?",
-    "results": "Ergebnisse gefunden ",
+    "results": "Ergebnisse gefunden",
     "no-results": "Keine Ergebnisse für \"{search}\" gefunden. Versuch' es mit einem anderen Begriff!",
     "placeholder": "Suchen"
   },

webapp/locales/en.json

@@ -595,7 +595,7 @@
       "User": "Users"
     },
     "hint": "What are you searching for?",
-    "results": "{searchCount} Results founding",
+    "results": "Results found",
     "no-results": "No results found for \"{search}\". Try a different search term!",
     "placeholder": "Search"
   },