From 8a205772229a8a3eacfd10fd2369fc8ba48a347b Mon Sep 17 00:00:00 2001
From: Lukas_Skywalker <git@lukasdiener.ch>
Date: Sun, 12 May 2024 16:49:18 +0200
Subject: [PATCH] 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] https://github.com/wepublish/wepublish/pull/1312
---
 pages/p/_PageSlug.vue             |  7 +++---
 sdk/wep/services/PhraseService.ts | 38 +++++++++++++++----------------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/pages/p/_PageSlug.vue b/pages/p/_PageSlug.vue
index d546351..7a78ce7 100644
--- a/pages/p/_PageSlug.vue
+++ b/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
     },
diff --git a/sdk/wep/services/PhraseService.ts b/sdk/wep/services/PhraseService.ts
index abdecf6..0d84d46 100644
--- a/sdk/wep/services/PhraseService.ts
+++ b/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) {