HAS-1: Add pagination to search results

This change adds pagination to the search results. After changing the phrase
backend to include pagination info (see [1]), less custom code for the search
results page is required, while automatically benefitting from the existing
code for the pagination. The behaviour is now more similar to the other
collection pages like the archive and the category pages.

[1] wepublish/wepublish#1312

pages/p/_PageSlug.vue

@@ -145,7 +145,9 @@ export default Vue.extend({
       if (this.isSearchPage) {
         const searchQuery: string = this.$route.query.query as string
         articles = await new PhraseService({ vue: this }).searchPhrase({
-          searchQuery
+          searchQuery,
+          take: this.teaserCount,
+          skip
         })
         // Sort articles by publication date, newest first
         if (articles) {
@@ -173,9 +175,6 @@ export default Vue.extend({
       if (this.isArchivePage && totalPages > 1) {
         totalPages -= 1
       }
-      if (this.isSearchPage) {
-        totalPages = 1
-      }
       this.pagination!.update({ totalPages })
       return articles
     },

sdk/wep/services/PhraseService.ts

@@ -5,6 +5,7 @@ import Article from '~/sdk/wep/models/wepPublication/article/Article'
 import Articles from '../models/wepPublication/article/Articles'
 import PageInfo from '../models/wepPublication/page/PageInfo'
 import ReducedArticle from '../models/wepPublication/article/ReducedArticle'
+import { ArticleSort, SortOrder } from '../interfacesAndTypes/WePublish'
 
 export default class PhraseService extends Service {
   constructor({vue}: {vue: Vue}) {
@@ -15,7 +16,7 @@ export default class PhraseService extends Service {
    * Fetch articles and pages by search term from wep api.
    * @param searchQuery
    */
-  async searchPhrase({searchQuery}: {searchQuery: String}): Promise<Articles | false> {
+  async searchPhrase({searchQuery, take, skip, articleSort, order}: {searchQuery: String, take?: number, skip?: number, articleSort?: ArticleSort, order?: SortOrder}): Promise<Articles | false> {
     if (!searchQuery) {
       throw new Error('No query provided in searchPhrase() method within PhraseService class.')
     }
@@ -24,40 +25,39 @@ export default class PhraseService extends Service {
     })
     try {
       const query = gql`
-        query Phrase($query: String!) {
-          phrase(query: $query) {
+        query Phrase($query: String!, $take: Int, $skip: Int, $articleSort: ArticleSort, $order: SortOrder) {
+          phrase(query: $query, take: $take, skip: $skip, articleSort: $articleSort, order: $order) {
             articles {
-              ...reducedArticle
+              nodes {
+                ...reducedArticle
+              }
+              pageInfo {
+                ...pageInfo
+              }
+              totalCount
             }
           }
         }
         ${ReducedArticle.reducedArticleFragment}
+        ${PageInfo.pageInfoFragment}
       `
 
       const response = await this.$apollo.query({
         query,
         variables: {
-          query: searchQuery
+          query: searchQuery,
+          take,
+          skip,
+          articleSort,
+          order
         },
         errorPolicy: 'all'
       })
-      if (response.data.phrase.articles.length === 0) {
+      if (response.data.phrase.articles.totalCount === 0) {
         return false
       }
 
-      const articles = new Articles(
-        {
-          nodes: response.data.phrase.articles as Article[],
-          pageInfo: new PageInfo({
-            startCursor: '',
-            endCursor: '',
-            hasNextPage: false,
-            hasPreviousPage: false
-          }),
-          totalCount: response.data.phrase.articles.length
-        },
-        true
-      )
+      const articles = new Articles(response.data.phrase.articles, true)
       this.loadingFinish()
       return articles
     } catch (e) {