Merge pull request #740 from dpc-sdp/feature/R20-935-honour-roll-support

[R20-935] Honour roll listing support

examples/nuxt-app/test/fixtures/search-listing/aggregations/request.json

@@ -10,14 +10,5 @@
   },
   "size": 10,
   "from": 0,
-  "sort": [{ "_score": "desc" }, { "_doc": "desc" }],
-  "aggs": {
-    "audience": {
-      "terms": {
-        "field": "field_audience_name.keyword",
-        "order": { "_key": "asc" },
-        "size": 30
-      }
-    }
-  }
+  "sort": [{ "_score": "desc" }, { "_doc": "desc" }]
 }

examples/nuxt-app/test/fixtures/search-listing/table/request.json

@@ -14,21 +14,5 @@
     { "_score": "desc" },
     { "field_fv_recommendation_number": "asc" },
     { "_doc": "desc" }
-  ],
-  "aggs": {
-    "category": {
-      "terms": {
-        "field": "field_fv_recommendation_category_name.keyword",
-        "order": { "_key": "asc" },
-        "size": 30
-      }
-    },
-    "department": {
-      "terms": {
-        "field": "field_fv_recommendation_dpt_name.keyword",
-        "order": { "_key": "asc" },
-        "size": 30
-      }
-    }
-  }
+  ]
 }

packages/ripple-test-utils/step_definitions/common/mocks.ts

@@ -73,11 +73,24 @@ Given(
     cy.intercept(
       'POST',
       `/api/tide/search/${Cypress.env('searchIndex')}/elasticsearch/_search`,
-      {
-        statusCode: status,
-        fixture
+      (req) => {
+        // Filter out the aggregation requests (they have size=1)
+        if (req.body.size === 1) {
+          req.reply({
+            statusCode: status,
+            fixture: fixture
+          })
+          return
+        }
+
+        // Only apply the alias to the actual search request
+        req.alias = 'searchReq' // assign an alias
+        req.reply({
+          statusCode: status,
+          fixture: fixture
+        })
       }
-    ).as('searchReq') // assign an alias
+    )
   }
 )
 

packages/ripple-test-utils/step_definitions/content-types/listing.ts

@@ -3,7 +3,10 @@ import { Then, When, DataTable } from '@badeball/cypress-cucumber-preprocessor'
 Then(
   'the search listing page should have {int} results',
   (resultCount: number) => {
-    cy.get(`.rpl-result-listing-item`).should('have.length', resultCount)
+    cy.get(`[data-component-type="search-result"]`).should(
+      'have.length',
+      resultCount
+    )
   }
 )
 
@@ -75,7 +78,7 @@ Then(
     const table = dataTable.hashes()
 
     table.forEach((row, i: number) => {
-      cy.get(`.rpl-result-listing-item`)
+      cy.get(`[data-component-type="search-result"]`)
         .eq(i)
         .then((item) => {
           cy.log(item)

packages/ripple-tide-grant/components/global/TideGrantSearchResult.vue

@@ -13,11 +13,8 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { title, url, updated } = useSearchResult(props.result)
+const { title, url, updated, summary } = useSearchResult(props.result)
 
-const content = computed(() =>
-  getSearchResultValue(props.result, 'field_landing_page_summary')
-)
 const audience = computed(() =>
   formatGrantAudiences(
     getSearchResultValue(props.result, 'field_audience_name', true)
@@ -50,7 +47,7 @@ const dateTo = computed(() =>
     class="tide-grant-search-result"
     :title="title"
     :url="url"
-    :content="content"
+    :content="summary"
     :updated="updated"
   >
     <template #details>

packages/ripple-tide-landing-page/mapping/hero-header/hero-header-mapping.ts

@@ -21,8 +21,6 @@ const getHeaderTheme = (src) => {
     return 'reverse'
   }
 
-  // TODO How will 'neutral' theme work?
-
   return 'default'
 }
 

packages/ripple-tide-search/components/TideSearchListingPage.vue

@@ -11,7 +11,7 @@ import type {
 
 interface Props {
   title: string
-  summary?: string
+  introText?: string
   searchListingConfig?: TideSearchListingPage['searchListingConfig']
   index: string
   autocompleteQuery?: boolean
@@ -26,7 +26,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   title: 'Search',
-  summary: '',
+  introText: '',
   autocompleteQuery: true,
   globalFilters: () => [],
   userFilters: () => [],
@@ -226,7 +226,7 @@ const numAppliedFilters = computed(() => {
         :corner-top="site?.cornerGraphic?.top?.src || true"
         :corner-bottom="false"
       >
-        <p v-if="summary" class="rpl-type-p-large">{{ summary }}</p>
+        <p v-if="introText" class="rpl-type-p-large">{{ introText }}</p>
         <div class="tide-search-header">
           <RplSearchBar
             id="tide-search-bar"

packages/ripple-tide-search/components/global/TideSearchResult.vue

@@ -1,24 +1,21 @@
 <script setup lang="ts">
-import { computed, getSearchResultValue, useSearchResult } from '#imports'
+import { useSearchResult } from '#imports'
 
 interface Props {
   result: any
 }
 
 const props = defineProps<Props>()
 
-const { title, url, updated } = useSearchResult(props.result)
-const content = computed(() =>
-  getSearchResultValue(props.result, 'field_landing_page_summary')
-)
+const { title, url, updated, summary } = useSearchResult(props.result)
 </script>
 
 <template>
   <RplSearchResult
     class="tide-search-result"
     :title="title"
     :url="url"
-    :content="content"
+    :content="summary"
     :updated="updated"
   >
   </RplSearchResult>

packages/ripple-tide-search/components/global/TideSearchResultCard.vue

@@ -19,7 +19,7 @@ const formatContentTypeString = (str) => {
   }
 }
 
-const { title, url } = useSearchResult(props.result)
+const { title, url, summary, image } = useSearchResult(props.result)
 
 const id = computed(() => getSearchResultValue(props.result, 'uid'))
 const meta = computed(() => {
@@ -39,43 +39,22 @@ const meta = computed(() => {
     // inductionYear
   }
 })
-const content = computed(() =>
-  getSearchResultValue(props.result, 'field_landing_page_summary')
-)
-const img = computed(() => {
-  const src = getSearchResultValue(
-    props.result,
-    'field_media_image_absolute_path'
-  )
-  if (src) {
-    return {
-      src,
-      alt: ''
-    }
-  }
-})
 </script>
 
 <template>
   <RplPromoCard
     :key="id"
-    class="tide-search-result-card rpl-col-12 rpl-col-4-m"
-    :image="img"
+    class="rpl-col-12 rpl-col-4-m"
+    :image="image"
     :title="title"
     :url="url"
-    :highlight="!img"
+    :highlight="!image"
   >
     <template v-if="result.type" #meta>
       <TideLandingPageCardSharedMeta :meta="meta" />
     </template>
     <p>
-      {{ content }}
+      {{ summary }}
     </p>
   </RplPromoCard>
 </template>
-
-<style>
-.tide-search-result-card {
-  height: 100%;
-}
-</style>

packages/ripple-tide-search/components/global/TideSearchResultsGrid.vue

@@ -1,16 +1,14 @@
 <template>
-  <RplResultListing
-    data-component-type="search-listing-layout-grid"
-    class="rpl-grid"
-  >
-    <RplResultListingItem
+  <ul data-component-type="search-listing-layout-grid" class="rpl-grid">
+    <li
       v-for="(result, idx) in results"
       :key="`result-${idx}-${result.id}`"
-      class="rpl-col-12 rpl-col-4-m"
+      data-component-type="search-result"
+      class="tide-search-results-grid-item rpl-col-12 rpl-col-4-m"
     >
       <component :is="result.component" v-bind="result.props" />
-    </RplResultListingItem>
-  </RplResultListing>
+    </li>
+  </ul>
 </template>
 
 <script setup lang="ts">
@@ -22,3 +20,9 @@ interface Props {
 
 defineProps<Props>()
 </script>
+
+<style>
+.tide-search-results-grid-item {
+  display: flex;
+}
+</style>

packages/ripple-tide-search/components/global/TideSearchResultsList.vue

@@ -6,6 +6,7 @@
     <RplResultListingItem
       v-for="(result, idx) in results"
       :key="`result-${idx}-${result.id}`"
+      data-component-type="search-result"
     >
       <component :is="result.component" v-bind="result.props" />
     </RplResultListingItem>

packages/ripple-tide-search/components/global/TideTideSearchListing.vue

@@ -16,7 +16,10 @@ const searchResultsMappingFn = (item): TideSearchListingResultItem => {
   if (props.page.results.item) {
     for (const key in props.page.results.item) {
       const mapping = props.page.results.item[key]
-      if (item._source?.type[0] === key || key === '*') {
+      if (
+        (item._source?.type && item._source?.type[0] === key) ||
+        key === '*'
+      ) {
         return {
           id: item._id,
           component: mapping.component,
@@ -45,7 +48,7 @@ const searchResultsMappingFn = (item): TideSearchListingResultItem => {
     :site="site"
     :contentPage="page"
     :title="page.title"
-    :summary="page.summary"
+    :introText="page.introText"
     :searchListingConfig="page.searchListingConfig"
     :index="page.index"
     :queryConfig="page.queryConfig"

packages/ripple-tide-search/composables/useSearchResult.ts

@@ -1,7 +1,11 @@
 import { computed } from 'vue'
-import { getSearchResultValue } from '#imports'
+import { getSearchResultValue, truncateText } from '#imports'
 
-export default (result) => {
+interface ResultOptions {
+  summaryMaxLength: number | null
+}
+
+export default (result, options: ResultOptions = { summaryMaxLength: 150 }) => {
   const title = computed(() => getSearchResultValue(result, 'title'))
   const url = computed(() => {
     const externalURL = getSearchResultValue(result, 'field_node_link')
@@ -28,9 +32,38 @@ export default (result) => {
     }).format(date)
   })
 
+  const summary = computed(() => {
+    const summary = getSearchResultValue(result, 'field_landing_page_summary')
+    const body = getSearchResultValue(result, 'body')
+    const fullSummaryText = summary || body
+
+    if (!fullSummaryText) {
+      return ''
+    }
+
+    return options?.summaryMaxLength
+      ? truncateText(fullSummaryText, options.summaryMaxLength)
+      : fullSummaryText
+  })
+
+  const image = computed(() => {
+    const src = getSearchResultValue(result, 'field_media_image_absolute_path')
+
+    if (src) {
+      return {
+        src,
+        alt: ''
+      }
+    }
+
+    return null
+  })
+
   return {
     title,
     url,
-    updated
+    updated,
+    summary,
+    image
   }
 }