Merge branch '2144-Add_Search_Results_Page' of https://github.com/Human-Connection/Human-Connection into 2144-Add_Search_Results_Page

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

@@ -2,10 +2,10 @@
   <div class="search-results">
     <tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switchTab="switchTab" />
     <section
-      :class="['results', activeTab === 'User' && '--user', !activeResources.length && '--empty']"
+      :class="['results', activeTab === 'User' && '--user', !activeResourceCount > 0 && '--empty']"
     >
       <hc-empty
-        v-if="!activeResources.length"
+        v-if="!activeResourceCount"
         icon="tasks"
         :message="$t('search.no-results', { search })"
       />
@@ -15,6 +15,7 @@
             <post-teaser :post="resource" />
           </masonry-grid-item>
         </masonry-grid>
+        {{postPage}}
         <pagination-buttons
           :hasNext="hasMorePosts"
           :hasPrevious="hasPreviousPosts"
@@ -35,12 +36,25 @@
           @next="nextUsers"
         />
       </ul>
+      <ul v-else-if="activeTab === 'Hashtag'" class="hashtag-list">
+        <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
+          :hasNext="hasMoreHashtags"
+          :hasPrevious="hasPreviousHashtags"
+          @back="previousHashtags"
+          @next="nextHashtags"
+        />
+      </ul>
     </section>
   </div>
 </template>
 
 <script>
-import { searchPosts, searchUsers } from '~/graphql/Search.js'
+import { searchPosts, searchUsers, searchHashtags } from '~/graphql/Search.js'
 import HcEmpty from '~/components/Empty/Empty'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem'
@@ -48,6 +62,7 @@ import PostTeaser from '~/components/PostTeaser/PostTeaser'
 import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import PaginationButtons from '~/components/_new/generic/PaginationButtons/PaginationButtons'
+import HcHashtag from '~/components/Hashtag/Hashtag'
 
 export default {
   components: {
@@ -58,6 +73,8 @@ export default {
     PostTeaser,
     PaginationButtons,
     UserTeaser,
+    searchHashtags,
+    HcHashtag,
   },
   props: {
     search: {
@@ -69,33 +86,56 @@ export default {
     return {
       posts: [],
       users: [],
+      hashtags: [],
+      postCount: 0,
+      postPage: 0,
+      userCount: 0,
+      userPage: 0,
+      hashtagCount: 0,
+      hashtagPage: 0,
       activeTab: null,
       pageSize,
       firstPosts: pageSize,
       firstUsers: pageSize,
+      firstHashtags: pageSize,
       postsOffset: 0,
       usersOffset: 0,
+      hashtagsOffset: 0,
       hasMorePosts: false,
       hasMoreUsers: false,
+      hasMoreHashtags: false,
+   
     }
   },
   computed: {
     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() {
+      if (this.activeTab === 'Post') return this.postCount
+      else if (this.activeTab === 'User') return this.userCount
+      else if (this.activeTab === 'Hashtag') return this.hashtagCount
       else return []
     },
     tabOptions() {
       return [
         {
           type: 'Post',
-          title: `${this.posts.length} ${this.$t('search.heading.Post')}`,
+          title: `${this.postCount} ${this.$t('search.heading.Post')}`,
-          disabled: !this.posts.length,
+          disabled: this.postCount == 0,
         },
         {
           type: 'User',
-          title: `${this.users.length} ${this.$t('search.heading.User')}`,
+          title: `${this.userCount} ${this.$t('search.heading.User')}`,
-          disabled: !this.users.length,
+          disabled: this.userCount == 0,
+        },
+          {
+          type: 'Hashtag',
+          title: `${this.hashtagCount} ${this.$t('search.heading.Tag')}`,
+          disabled: this.hashtagCount == 0,
         },
       ]
     },
@@ -105,22 +145,37 @@ export default {
     hasPreviousUsers() {
       return this.usersOffset > 0
     },
+    hasPreviousHashtags() {
+      return this.hashtagsOffset > 0
+    },
   },
   methods: {
     switchTab(tab) {
       this.activeTab = tab
     },
     previousPosts() {
-      this.postsOffset = Math.max(this.postsOffset - this.pageSize, 0)
+      this.postsOffset = this.postPage * this.pageSize
+      this.postPage--
     },
     nextPosts() {
       this.postsOffset += this.pageSize
+      this.postPage++
     },
     previousUsers() {
       this.usersOffset = Math.max(this.usersOffset - this.pageSize, 0)
+      this.userPage--
     },
     nextUsers() {
       this.usersOffset += this.pageSize
+      this.userPage++
+    },
+    previousHashtags() {
+      this.usersOffset = Math.max(this.usersOffset - this.pageSize, 0)
+      this.hashtagPage--
+    },
+    nextHashtags() {
+      this.usersOffset += this.pageSize
+      this.hashtagPage++
     },
   },
   apollo: {
@@ -140,9 +195,10 @@ export default {
         return !this.search
       },
       update({ searchPosts }) {
-        this.posts = searchPosts
+        this.posts = searchPosts.posts
-        this.hasMorePosts = this.posts.length >= this.pageSize
+        this.postCount = searchPosts.postCount
-        if (searchPosts.length) this.activeTab = 'Post'
+        this.hasMorePosts = this.postCount >= (this.pageSize * this.postPage)
+        if (searchPosts.posts.length) this.activeTab = 'Post'
       },
       fetchPolicy: 'cache-and-network',
     },
@@ -162,12 +218,36 @@ export default {
         return !this.search
       },
       update({ searchUsers }) {
-        this.users = searchUsers
+        this.users = searchUsers.users
+        this.userCount = searchUsers.userCount
         this.hasMoreUsers = this.users.length >= this.pageSize
-        if (!searchPosts.length && searchUsers.length) this.activeTab = 'User'
+        if (!searchPosts.posts.length && searchUsers.users.length) this.activeTab = 'User'
       },
       fetchPolicy: 'cache-and-network',
     },
+    searchHashtags: {
+        query() {
+          return searchHashtags
+        },
+        variables() {
+          const { firstHashtags, hashtagsOffset, search } = this
+          return {
+            query: search,
+            firstHashtags,
+            hashtagsOffset,
+          }
+        },
+        skip() {
+          return !this.search
+        },
+        update({ searchHashtags }) {
+          this.hashtags = searchHashtags.hashtags
+          this.hashtagCount = searchHashtags.hashtagCount
+          this.hasMoreHashtags = this.hashtags.length >= this.pageSize
+          if (!searchPosts.posts.length && !searchUsers.users.length && searchHashtags.hashtags.length) this.activeTab = 'Hashtag'
+        },
+        fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>

webapp/graphql/Search.js

@@ -6,13 +6,9 @@ export const searchQuery = gql`
   ${postFragment}
   ${tagsCategoriesAndPinnedFragment}
 
-  query($query: String!, $firstPosts: Int, $firstUsers: Int, $offset: Int) {
+  query($query: String!) {
-    searchResults(
+    searchResults(query: $query, limit: 5)
-      query: $query
+    {
-      firstPosts: $firstPosts
-      firstUsers: $firstUsers
-      offset: $offset
-    ) {
       __typename
       ... on Post {
         ...post
@@ -40,6 +36,8 @@ export const searchPosts = gql`
 
   query($query: String!, $firstPosts: Int, $postsOffset: Int) {
     searchPosts(query: $query, firstPosts: $firstPosts, postsOffset: $postsOffset) {
+      postCount
+      posts {
       __typename
       ...post
       ...tagsCategoriesAndPinned
@@ -49,6 +47,7 @@ export const searchPosts = gql`
         ...user
       }
     }
+    }
   }
 `
 
@@ -57,8 +56,24 @@ export const searchUsers = gql`
 
   query($query: String!, $firstUsers: Int, $usersOffset: Int) {
     searchUsers(query: $query, firstUsers: $firstUsers, usersOffset: $usersOffset) {
+      userCount
+      users {
       __typename
       ...user
+      }
+    }
+  }
+`
+
+export const searchHashtags = gql`
+
+  query($query: String!, $firstHashtags: Int, $hashtagsOffset: Int) {
+    searchHashtags(query: $query, firstHashtags: $firstHashtags, hashtagsOffset: $hashtagsOffset) {
+      hashtagCount
+      hashtags {
+      __typename
+      id
+      }
     }
   }
 `