Merge pull request #727 from dpc-sdp/feature/R20-1312-topic-listing

[R20-1312] Added new content type for topics and tags listing
dpc-sdp · Jul 27, 2023 · ec4d1a2 · ec4d1a2
2 parents 0e68f67 + 698a8da
commit ec4d1a2
Show file tree

Hide file tree

Showing 16 changed files with 215 additions and 51 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -19,6 +19,7 @@
     "vue-app",
     "@dpc-sdp/ripple-tide-search",
     "@dpc-sdp/ripple-tide-event",
+    "@dpc-sdp/ripple-tide-topic",
     "@dpc-sdp/nuxt-ripple-preview",
     "@dpc-sdp/nuxt-ripple",
     "@dpc-sdp/ripple-tide-media",

diff --git a/examples/nuxt-app/nuxt.config.ts b/examples/nuxt-app/nuxt.config.ts
@@ -20,6 +20,7 @@ export default defineNuxtConfig({
     '@dpc-sdp/nuxt-ripple-analytics',
     '@dpc-sdp/nuxt-ripple-preview',
     '@dpc-sdp/ripple-tide-event',
+    '@dpc-sdp/ripple-tide-topic',
     '@dpc-sdp/ripple-tide-landing-page',
     '@dpc-sdp/ripple-tide-grant',
     '@dpc-sdp/ripple-tide-publication',

diff --git a/examples/nuxt-app/package.json b/examples/nuxt-app/package.json
@@ -25,6 +25,7 @@
     "@dpc-sdp/nuxt-ripple-analytics": "workspace:*",
     "@dpc-sdp/nuxt-ripple-preview": "workspace:*",
     "@dpc-sdp/ripple-tide-event": "workspace:*",
+    "@dpc-sdp/ripple-tide-topic": "workspace:*",
     "@dpc-sdp/ripple-tide-grant": "workspace:*",
     "@dpc-sdp/ripple-tide-landing-page": "workspace:*",
     "@dpc-sdp/ripple-tide-media": "workspace:*",

diff --git a/packages/nuxt-ripple-analytics/package.json b/packages/nuxt-ripple-analytics/package.json
@@ -17,6 +17,7 @@
     "@dpc-sdp/nuxt-ripple": "workspace:*",
     "@dpc-sdp/ripple-tide-api": "workspace:*",
     "@dpc-sdp/ripple-tide-event": "workspace:*",
+    "@dpc-sdp/ripple-tide-topic": "workspace:*",
     "@dpc-sdp/ripple-tide-grant": "workspace:*",
     "@dpc-sdp/ripple-tide-landing-page": "workspace:*",
     "@dpc-sdp/ripple-tide-media": "workspace:*",

diff --git a/packages/nuxt-ripple-cli/src/commands/init/_templates/layer/latest/package.json.t b/packages/nuxt-ripple-cli/src/commands/init/_templates/layer/latest/package.json.t
@@ -22,6 +22,7 @@ to: package.json
     "@dpc-sdp/nuxt-ripple-preview": "<%= rplVersion %>",
     "@dpc-sdp/ripple-tide-api": "<%= rplVersion %>",
     "@dpc-sdp/ripple-tide-event": "<%= rplVersion %>",
+    "@dpc-sdp/ripple-tide-topic": "<%= rplVersion %>",
     "@dpc-sdp/ripple-tide-grant": "<%= rplVersion %>",
     "@dpc-sdp/ripple-tide-landing-page": "<%= rplVersion %>",
     "@dpc-sdp/ripple-tide-media": "<%= rplVersion %>",

diff --git a/...ges/nuxt-ripple-cli/src/commands/init/_templates/layer/latest/playground/nuxt.config.ts.t b/...ges/nuxt-ripple-cli/src/commands/init/_templates/layer/latest/playground/nuxt.config.ts.t
@@ -24,6 +24,7 @@ export default defineNuxtConfig({
     '@dpc-sdp/nuxt-ripple-analytics',
     '@dpc-sdp/nuxt-ripple-preview',
     '@dpc-sdp/ripple-tide-event',
+    '@dpc-sdp/ripple-tide-topic',
     '@dpc-sdp/ripple-tide-landing-page',
     '@dpc-sdp/ripple-tide-grant',
     '@dpc-sdp/ripple-tide-publication',

diff --git a/packages/nuxt-ripple-cli/src/commands/init/_templates/site/latest/nuxt.config.ts.t b/packages/nuxt-ripple-cli/src/commands/init/_templates/site/latest/nuxt.config.ts.t
@@ -9,6 +9,7 @@ export default defineNuxtConfig({
     '@dpc-sdp/nuxt-ripple-analytics',
     '@dpc-sdp/nuxt-ripple-preview',
     '@dpc-sdp/ripple-tide-event',
+    '@dpc-sdp/ripple-tide-topic',
     '@dpc-sdp/ripple-tide-landing-page',
     '@dpc-sdp/ripple-tide-grant',
     '@dpc-sdp/ripple-tide-publication',

diff --git a/packages/ripple-tide-search/components/TideSearchListingPage.vue b/packages/ripple-tide-search/components/TideSearchListingPage.vue
@@ -133,10 +133,16 @@ onAggregationUpdateHook.value = (aggs) => {
 }
 
 const handleSearchSubmit = () => {
-  // Submitting the search term should also 'apply' the filters, but the filters live in a seperate form.
-  // To solve this, when the search term form is submitted, we trigger a submission of the filters form,
-  // it is there where the actual search request will be triggered.
-  submitForm('tide-search-filter-form')
+  if (props.userFilters && props.userFilters.length) {
+    // Submitting the search term should also 'apply' the filters, but the filters live in a seperate form.
+    // To solve this, when the search term form is submitted, we trigger a submission of the filters form,
+    // it is there where the actual search request will be triggered.
+    // This will only work if there is an actual filter form to submit.
+    submitForm('tide-search-filter-form')
+  } else {
+    // If there's no filters in the form, we need to just do the search without submitting the filter form
+    submitSearch()
+  }
 }
 
 const handleFilterSubmit = (form) => {
@@ -233,6 +239,7 @@ const numAppliedFilters = computed(() => {
             @update:input-value="handleUpdateSearchTerm"
           />
           <RplSearchBarRefine
+            v-if="userFilters && userFilters.length > 0"
             class="tide-search-refine-btn"
             :expanded="filtersExpanded"
             @click="handleToggleFilters"

diff --git a/packages/ripple-tide-topic/components/global/TideTopic.vue b/packages/ripple-tide-topic/components/global/TideTopic.vue
@@ -0,0 +1,77 @@
+<template>
+  <TideSearchListingPage
+    :site="site"
+    :contentPage="page"
+    :title="page.header.title"
+    :searchListingConfig="searchListingConfig"
+    :queryConfig="queryConfig"
+    :globalFilters="globalFilters"
+    :userFilters="[]"
+    :resultsLayout="resultsLayout"
+    :searchResultsMappingFn="searchResultsMappingFn"
+  />
+</template>
+
+<script setup lang="ts">
+import { TideSiteData } from '@dpc-sdp/ripple-tide-api/types'
+import type { TideTopicPage } from '../../types'
+import { useRuntimeConfig } from '#imports'
+import type { MappedSearchResult } from '@dpc-sdp/ripple-tide-search/types'
+
+interface Props {
+  site: TideSiteData
+  page: TideTopicPage
+}
+
+const props = defineProps<Props>()
+
+const { public: config } = useRuntimeConfig()
+const siteId = config.tide?.site
+
+const searchListingConfig = {
+  labels: {
+    placeholder: `Search in '${props.page.filter.value}'`
+  },
+  customSort: [
+    {
+      _score: 'desc'
+    }
+  ]
+}
+
+const globalFilters = [
+  { terms: { field_node_site: [siteId] } },
+  {
+    terms: {
+      [props.page.filter.field]: [props.page.filter.value]
+    }
+  }
+]
+
+const resultsLayout = {
+  component: 'TideSearchResultsList'
+}
+
+const queryConfig = {
+  multi_match: {
+    query: '{{query}}',
+    fields: [
+      'title^3',
+      'field_landing_page_summary^2',
+      'body',
+      'field_paragraph_body',
+      'summary_processed'
+    ]
+  }
+}
+
+const searchResultsMappingFn = (item): MappedSearchResult<any> => {
+  return {
+    id: item._id,
+    component: 'TideSearchResult',
+    props: {
+      result: item._source
+    }
+  }
+}
+</script>
diff --git a/packages/ripple-tide-topic/mapping/index.ts b/packages/ripple-tide-topic/mapping/index.ts
@@ -0,0 +1,30 @@
+import type { IRplTideModuleMapping } from '@dpc-sdp/ripple-tide-api/types'
+import {
+  tidePageBaseMapping,
+  tidePageBaseIncludes
+} from '@dpc-sdp/nuxt-ripple/mapping'
+
+const tideTopicModule: IRplTideModuleMapping = {
+  mapping: {
+    ...tidePageBaseMapping(),
+    type: () => 'topic',
+    title: (field) =>
+      `${field.type === 'taxonomy_term--tags' ? 'Tags' : 'Topic'} - ${
+        field.name
+      }`,
+    header: {
+      title: 'name'
+    },
+    filter: {
+      field: (field) => {
+        return field.type === 'taxonomy_term--tags'
+          ? 'field_tags_name'
+          : 'field_topic_name'
+      },
+      value: 'name'
+    }
+  },
+  includes: [...tidePageBaseIncludes()]
+}
+
+export default tideTopicModule
diff --git a/packages/ripple-tide-topic/nuxt.config.ts b/packages/ripple-tide-topic/nuxt.config.ts
@@ -0,0 +1 @@
+export default defineNuxtConfig({})
diff --git a/packages/ripple-tide-topic/package.json b/packages/ripple-tide-topic/package.json
@@ -0,0 +1,18 @@
+{
+  "license": "Apache-2.0",
+  "name": "@dpc-sdp/ripple-tide-topic",
+  "description": "Ripple mappings and components for Tide topics and tags",
+  "main": "./nuxt.config.ts",
+  "exports": {
+    ".": "./nuxt.config.ts",
+    "./mapping": "./mapping/index.ts",
+    "./types": "./types.ts"
+  },
+  "version": "2.1.0-alpha.188",
+  "dependencies": {
+    "@dpc-sdp/nuxt-ripple": "workspace:*",
+    "@dpc-sdp/ripple-tide-api": "workspace:*",
+    "@dpc-sdp/ripple-ui-core": "workspace:*",
+    "@dpc-sdp/ripple-tide-search": "workspace:*"
+  }
+}
diff --git a/packages/ripple-tide-topic/server/plugins/topic.ts b/packages/ripple-tide-topic/server/plugins/topic.ts
@@ -0,0 +1,8 @@
+import { defineNitroPlugin } from 'nitropack/dist/runtime/plugin'
+import topicMapping from './../../mapping'
+import type { NitroApp } from 'nitropack'
+
+export default defineNitroPlugin(async (nitroApp: NitroApp) => {
+  nitroApp.tide?.pageApi.setContentType('topic', topicMapping)
+  nitroApp.tide?.pageApi.setContentType('tags', topicMapping)
+})
diff --git a/packages/ripple-tide-topic/types.ts b/packages/ripple-tide-topic/types.ts
@@ -0,0 +1,17 @@
+import type { TidePageBase } from '@dpc-sdp/ripple-tide-api/types'
+
+export interface TideTopicPage extends TidePageBase {
+  /**
+   * @description RplHeader component
+   */
+  header: {
+    title: string
+  }
+  /**
+   * @description Props for component wrapper
+   */
+  filter: {
+    field: string
+    value: string
+  }
+}