WIP: pagenation

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

@@ -18,82 +18,54 @@
         icon="tasks"
         :message="$t('search.no-results', { search })"
       />
-      <template v-else-if="activeTab === 'Post'">
+      <template  >
         <pagination-buttons
-          v-show="postCount > pageSize"
+          v-show="resultsCount > pageSize"
-          :hasNext="hasMorePosts"
+          :hasMoreResults="hasMoreResults"
-          :hasPrevious="hasPreviousPosts"
+          :hasPreviousResult="hasPreviousResult"
-          :activePage="postPage"
+          :activePage="resultsPage"
-          :totalResultCount="postCount"
+          :totalResultCount="resultsCount"
-          @back="previousPosts"
+          :resultPages="resultPages"
-          @next="nextPosts"
+          @back="previousResults"
+          @next="nextResults"
         />
-        <masonry-grid>
+        <masonry-grid v-show="activeTab === 'Post'">
           <masonry-grid-item v-for="resource in activeResources" :key="resource.key">
             <post-teaser :post="resource" />
           </masonry-grid-item>
         </masonry-grid>
 
-        <pagination-buttons
+
-          v-show="postCount > pageSize"
+        <ul v-show="activeTab === 'User'" class="user-list">
-          :hasNext="hasMorePosts"
+       
-          :hasPrevious="hasPreviousPosts"
-          :activePage="postPage"
-          :totalResultCount="postCount"
-          @back="previousPosts"
-          @next="nextPosts"
-        />
-      </template>
-      <ul v-else-if="activeTab === 'User'" class="user-list">
-        <pagination-buttons
-          v-show="userCount > pageSize"
-          :hasNext="hasMoreUsers"
-          :hasPrevious="hasPreviousUsers"
-          :activePage="userPage"
-          :totalResultCount="userCount"
-          @back="previousUsers"
-          @next="nextUsers"
-        />
         <li v-for="resource in activeResources" :key="resource.key" class="item">
           <base-card :wideContent="true">
             <user-teaser :user="resource" />
           </base-card>
         </li>
-        <pagination-buttons
+      
-          v-show="userCount > pageSize"
-          :hasNext="hasMoreUsers"
-          :hasPrevious="hasPreviousUsers"
-          :activePage="userPage"
-          :totalResultCount="userCount"
-          @back="previousUsers"
-          @next="nextUsers"
-        />
       </ul>
-      <ul v-else-if="activeTab === 'Hashtag'" class="hashtag-list">
+      <ul v-show="activeTab === 'Hashtag'" class="hashtag-list">
-        <pagination-buttons
+         
-          v-show="hashtagCount > pageSize"
-          :hasNext="hasMoreHashtags"
-          :hasPrevious="hasPreviousHashtags"
-          :activePage="hashtagPage"
-          :totalResultCount="hashtagCount"
-          @back="previousHashtags"
-          @next="nextHashtags"
-        />
         <li v-for="resource in activeResources" :key="resource.key" class="item">
           <base-card :wideContent="true">
             <hc-hashtag :id="resource.id" />
           </base-card>
         </li>
-        <pagination-buttons
+        
-          v-show="hashtagCount > pageSize"
-          :hasNext="hasMoreHashtags"
-          :hasPrevious="hasPreviousHashtags"
-          :activePage="hashtagPage"
-          :totalResultCount="hashtagCount"
-          @back="previousHashtags"
-          @next="nextHashtags"
-        />
       </ul>
+
+        <pagination-buttons
+          v-show="resultsCount > pageSize"
+          :hasMoreResults="hasMoreResults"
+          :hasPreviousResult="hasPreviousResult"
+          :activePage="resultsPage"
+          :totalResultCount="resultsCount"
+          @back="previousResults"
+          @next="nextResults"
+        />
+      </template>
+     
     </section>
   </div>
 </template>
@@ -134,29 +106,43 @@ export default {
       posts: [],
       users: [],
       hashtags: [],
+
+      resultsPage: 0,
+      resultsCount: 0,
+
       postCount: 0,
-      postPage: 0,
+
       userCount: 0,
       userPage: 0,
+
       hashtagCount: 0,
       hashtagPage: 0,
+
       activeTab: null,
+      resultPages: 1,
+      activeResultPage: 1,
+
       firstPosts: this.pageSize,
       firstUsers: this.pageSize,
       firstHashtags: this.pageSize,
+
       postsOffset: 0,
       usersOffset: 0,
       hashtagsOffset: 0,
+
+      hasPagination: false,
     }
   },
   computed: {
     activeResources() {
+      console.log("activeResources()")
       if (this.activeTab === 'Post') return this.posts
       else if (this.activeTab === 'User') return this.users
       else if (this.activeTab === 'Hashtag') return this.hashtags
       else return []
     },
     activeResourceCount() {
+      console.log("activeResourceCount()")
       if (this.activeTab === 'Post') return this.postCount
       else if (this.activeTab === 'User') return this.userCount
       else if (this.activeTab === 'Hashtag') return this.hashtagCount
@@ -181,87 +167,94 @@ export default {
         },
       ]
     },
-    hasPreviousPosts() {
+    hasPreviousResult(){
-      return this.postsOffset > 0
+       console.log("hasPreviousResult()")
+          if (this.activeTab === 'Post') return this.postsOffset > 0
+      else if (this.activeTab === 'User') return this.usersOffset > 0
+      else if (this.activeTab === 'Hashtag') return this.hashtagsOffset > 0
+      else return []
     },
-    hasPreviousUsers() {
+     hasMoreResults() {
-      return this.usersOffset > 0
+      console.log("hasMoreResults()")
-    },
+       if (this.activeTab === 'Post') return this.postsOffset < this.resultsCount
-    hasPreviousHashtags() {
+      else if (this.activeTab === 'User') return this.usersOffset  < this.resultsCount
-      return this.hashtagsOffset > 0
+      else if (this.activeTab === 'Hashtag') return  this.hashtagsOffset  < this.resultsCount
-    },
+      else return []
-    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() {
-      return (this.userPage + 1) * this.pageSize < this.userCount
-    },
-    hasMoreHashtags() {
-      return (this.hashtagPage + 1) * this.pageSize < this.hashtagCount
-    },
     searchCount() {
       return this.postCount + this.userCount + this.hashtagCount
     },
   },
   methods: {
     clearPage() {
-      this.postPage = 0
+      this.resultsPage = 0
-      this.userPage = 0
+  
-      this.hashtagPage = 0
     },
     switchTab(tab) {
       this.activeTab = tab
     },
-    previousPosts() {
+    previousResults() {
-      this.postPage--
+      console.log("previousResults()")
-      this.postsOffset = this.postPage * this.pageSize
+        if (this.activeTab === 'Post') {
+         
+           this.resultsPage = this.postPage - 1
+           this.postsOffset - this.pageSize
+           
+        }
+      else if (this.activeTab === 'User') {
+        this.resultsPage =  this.userPage - 1
+        this.usersOffset - this.pageSize
+      }
+      else if (this.activeTab === 'Hashtag') {
+        this.resultsPage  = this.hashtagPage - 1
+        this.hashtagsOffset -  this.pageSize
+      }
+      else return []
+     
     },
-    nextPosts() {
+     nextResults() {
-      this.postsOffset += this.pageSize
+      console.log("nextResults()")
-      this.postPage++
+       if (this.activeTab === 'Post') {
-    },
+          this.resultsPage  = parseInt(this.postPage) + 1
-    previousUsers() {
+           this.postsOffset + this.pageSize
-      this.userPage--
+        }
-      this.usersOffset = this.userPage * this.pageSize
+      else if (this.activeTab === 'User') {
-    },
+        this.resultsPage  =  this.userPage + 1
-    nextUsers() {
+        this.usersOffset + this.pageSize
-      this.usersOffset += this.pageSize
+       }
-      this.userPage++
+      else if (this.activeTab === 'Hashtag') {
-    },
+        this.resultsPage  = this.hashtagPage + 1
-    previousHashtags() {
+         this.hashtagsOffset + this.pageSize
-      this.hashtagPage--
+       }
-      this.hashtagsOffset = this.hashtagPage * this.pageSize
+      else return []
-    },
+      
-    nextHashtags() {
-      this.hashtagsOffset += this.pageSize
-      this.hashtagPage++
     },
   },
   apollo: {
-    searchPosts: {
+   searchHashtags: {
       query() {
-        return searchPosts
+        return searchHashtags
       },
       variables() {
-        const { firstPosts, postsOffset, search } = this
+        const { firstHashtags, hashtagsOffset, search } = this
         return {
           query: search,
-          firstPosts,
+          firstHashtags,
-          postsOffset,
+          hashtagsOffset,
         }
       },
       skip() {
         return !this.search
       },
-      update({ searchPosts }) {
+      update({ searchHashtags }) {
-        this.posts = searchPosts.posts
+         console.log(" update({ searchHashtags }")
-        this.postCount = searchPosts.postCount
+        this.hashtags = searchHashtags.hashtags
-        this.clearPage()
+        this.resultsCount  = searchHashtags.hashtagCount
-        if (this.postCount > 0) this.activeTab = 'Post'
+        this.hashtagCount  = searchHashtags.hashtagCount
+         if (this.resultsCount > this.pageSize) this.hasPagination = true
+        if (this.postCount === 0 && this.userCount === 0 && this.hashtagCount > 0)
+          this.activeTab = 'Hashtag'
       },
       fetchPolicy: 'cache-and-network',
     },
@@ -281,34 +274,41 @@ export default {
         return !this.search
       },
       update({ searchUsers }) {
+         console.log(" update({ searchUsers }")
         this.users = searchUsers.users
-        this.userCount = searchUsers.userCount
+        this.resultsCount  = searchUsers.userCount
-        this.clearPage()
+        this.userCount  = searchUsers.userCount
-        if (this.postCount === 0 && this.userCount > 0) this.activeTab = 'User'
+        if (this.resultsCount > this.pageSize) this.hasPagination = true
+        if (this.resultsCount === 0 && this.userCount > 0) this.activeTab = 'User'
       },
       fetchPolicy: 'cache-and-network',
     },
-    searchHashtags: {
+      searchPosts: {
       query() {
-        return searchHashtags
+        return searchPosts
       },
       variables() {
-        const { firstHashtags, hashtagsOffset, search } = this
+
+        const { firstPosts, postsOffset, search } = this
+        console.log("firstPosts",firstPosts)
+        console.log("postsOffset",postsOffset)
         return {
           query: search,
-          firstHashtags,
+          firstPosts,
-          hashtagsOffset,
+          postsOffset,
         }
+      
       },
       skip() {
         return !this.search
       },
-      update({ searchHashtags }) {
+      update({ searchPosts }) {
-        this.hashtags = searchHashtags.hashtags
+        console.log(" update({ searchPosts }")
-        this.hashtagCount = searchHashtags.hashtagCount
+        this.posts = searchPosts.posts
-        this.clearPage()
+         this.postCount = searchPosts.postCount
-        if (this.postCount === 0 && this.userCount === 0 && this.hashtagCount > 0)
+        this.resultsCount = this.postCount
-          this.activeTab = 'Hashtag'
+        if (this.resultsCount > this.pageSize) this.hasPagination = true
+        if (this.postCount > 0) this.activeTab = 'Post'
       },
       fetchPolicy: 'cache-and-network',
     },

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

@@ -2,19 +2,20 @@
   <div class="pagination-buttons">
     <base-button
       @click="$emit('back')"
-      :disabled="!hasPrevious"
+      :disabled="!hasPreviousResult"
       icon="arrow-left"
       circle
       data-test="previous-button"
     />
+         
     <span class="pagination-pageCount">
-      {{ totalResultCount }} - {{  pageSize }} - {{activePage}} - {{ Math.round(totalResultCount )  }}
+     
       Seite {{ activePage + 1 }} / {{ Math.round(totalResultCount / pageSize) + 1 }}
     </span>
 
     <base-button
       @click="$emit('next')"
-      :disabled="!hasNext"
+      :disabled="!hasMoreResults"
       icon="arrow-right"
       circle
       data-test="next-button"
@@ -30,24 +31,26 @@ export default {
       type: Number,
       default: 24
     },
-    hasNext: {
+    hasMoreResults: {
       type: Boolean,
       default: false,
     },
-    hasPrevious: {
+    hasPreviousResult: {
       type: Boolean,
-      default: false,
     },
     activePage: {
       type: Number,
       default: 0,
     },
+    resultPages: {
+       type: Number,
+      default: 0,
+    },
     totalResultCount: {
       type: Number,
       default: 0,
     },
   },
- 
 }
 </script>