feat(@dpc-sdp/ripple-tide-search): single selects, manage suggestions…

… via config
dpc-sdp · Jan 12, 2024 · b85695e · b85695e
1 parent 2e8e75e
commit b85695e
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 7 deletions.
diff --git a/examples/nuxt-app/test/features/search-listing/filters.feature b/examples/nuxt-app/test/features/search-listing/filters.feature
@@ -29,14 +29,15 @@ Feature: Search listing - Filter
     And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
     And the current date is "Fri, 02 Feb 2050 03:04:05 GMT"
 
-    When I visit the page "/filters?termFilter=Green"
+    When I visit the page "/filters?termFilter=Green&singleTermFilter=Aqua"
     Then the search listing page should have 2 results
     And the search network request should be called with the "/search-listing/filters/request-term-single" fixture
 
-    Then the filters toggle should show 1 applied filters
+    Then the filters toggle should show 2 applied filters
 
     When I toggle the search listing filters section
     Then the search listing dropdown field labelled "Term filter example" should have the value "Green"
+    Then the search listing dropdown field labelled "Single term filter example" should have the value "Aqua"
 
   @mockserver
   Example: Term filter - Should reflect an array from the URL

diff --git a/examples/nuxt-app/test/fixtures/search-listing/filters/page.json b/examples/nuxt-app/test/fixtures/search-listing/filters/page.json
@@ -72,6 +72,42 @@
           ]
         }
       },
+      {
+        "id": "singleTermFilter",
+        "component": "TideSearchFilterDropdown",
+        "filter": {
+          "type": "term",
+          "value": "singleTermFilter.keyword",
+          "multiple": false
+        },
+        "aggregations": {
+          "field": "termFilter",
+          "source": "taxonomy"
+        },
+        "props": {
+          "id": "singleTermFilter",
+          "label": "Single term filter example",
+          "placeholder": "Select a single colour",
+          "multiple": false,
+          "options": [
+            {
+              "id": "1",
+              "label": "Aqua",
+              "value": "Aqua"
+            },
+            {
+              "id": "2",
+              "label": "Burgundy",
+              "value": "Burgundy"
+            },
+            {
+              "id": "3",
+              "label": "Violet",
+              "value": "Violet"
+            }
+          ]
+        }
+      },
       {
         "id": "termsFilter",
         "component": "TideSearchFilterDropdown",

diff --git a/examples/nuxt-app/test/fixtures/search-listing/filters/request-term-single.json b/examples/nuxt-app/test/fixtures/search-listing/filters/request-term-single.json
@@ -21,6 +21,11 @@
           "terms": {
             "termFilter.keyword": ["Green"]
           }
+        },
+        {
+          "terms": {
+            "singleTermFilter.keyword": ["Aqua"]
+          }
         }
       ]
     }

diff --git a/packages/ripple-tide-search/components/TideSearchListingPage.vue b/packages/ripple-tide-search/components/TideSearchListingPage.vue
@@ -60,6 +60,10 @@ const props = withDefaults(defineProps<Props>(), {
       submit: 'Submit',
       reset: 'Reset',
       placeholder: 'Enter a search term'
+    },
+    suggestions: {
+      key: 'title',
+      enabled: true
     }
   }),
   resultsLayout: () => ({
@@ -216,7 +220,10 @@ const handleFilterReset = () => {
 
 const handleUpdateSearchTerm = (term) => {
   searchTerm.value = term
-  if (props.autocompleteQuery) {
+  if (
+    props.autocompleteQuery &&
+    props.searchListingConfig?.suggestions?.enabled !== false
+  ) {
     getSuggestions()
   }
 }

diff --git a/packages/ripple-tide-search/components/global/TideCustomCollection.vue b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
@@ -54,6 +54,10 @@ const props = withDefaults(defineProps<Props>(), {
       submit: 'Submit',
       reset: 'Reset',
       placeholder: 'Enter a search term'
+    },
+    suggestions: {
+      key: 'title',
+      enabled: false
     }
   }),
   resultsConfig: () => ({
@@ -192,7 +196,10 @@ const handleFilterReset = () => {
 
 const handleUpdateSearchTerm = (term) => {
   searchTerm.value = term
-  if (props.autocompleteQuery) {
+  if (
+    props.autocompleteQuery &&
+    props.searchListingConfig?.suggestions?.enabled !== false
+  ) {
     getSuggestions()
   }
 }

diff --git a/packages/ripple-tide-search/composables/useTideSearch.ts b/packages/ripple-tide-search/composables/useTideSearch.ts
@@ -160,7 +160,10 @@ export default (
 
       // Need to work out if form has value - will be different for different controls
       const hasValue = (v: unknown) => {
-        if (itm.component === 'TideSearchFilterDropdown') {
+        if (
+          itm.component === 'TideSearchFilterDropdown' &&
+          itm?.props?.multiple
+        ) {
           return Array.isArray(v) && v.length > 0
         }
         return v
@@ -328,6 +331,14 @@ export default (
   }
 
   const getSuggestions = async () => {
+    let fields = ['title']
+
+    if (searchListingConfig?.suggestions?.key) {
+      fields = Array.isArray(searchListingConfig.suggestions.key)
+        ? searchListingConfig.suggestions.key
+        : [searchListingConfig.suggestions.key]
+    }
+
     suggestions.value = await $fetch(
       `/api/tide/app-search/${index}/query_suggestion`,
       {
@@ -336,7 +347,7 @@ export default (
           query: searchTerm.value,
           types: {
             documents: {
-              fields: ['title']
+              fields
             }
           },
           size: 4
@@ -433,7 +444,10 @@ export default (
           (filter) => filter.id === key
         )
 
-        if (filterConfig.component === 'TideSearchFilterDropdown') {
+        if (
+          filterConfig.component === 'TideSearchFilterDropdown' &&
+          filterConfig?.props?.multiple
+        ) {
           parsedValue = Array.isArray(parsedValue) ? parsedValue : [parsedValue]
         }
 

diff --git a/packages/ripple-tide-search/types.ts b/packages/ripple-tide-search/types.ts
@@ -111,6 +111,13 @@ export type TideSearchListingConfig = {
      * @description custom sort clause
      */
     customSort?: Record<string, 'asc' | 'desc'>[]
+    /**
+     * @description options for utilizing the auto suggestions
+     */
+    suggestions: {
+      key: string
+      enabled: boolean
+    }
   }
   /**
    * @description Elastic Query DSL for query clause