Merge pull request #971 from dpc-sdp/feature/R20-1678-clear-search-event

[R20-1678] add clear search event
dpc-sdp · Jan 8, 2024 · 20b531f · 20b531f
2 parents 758f29d + 2de005a
commit 20b531f
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 15 deletions.
diff --git a/packages/nuxt-ripple-analytics/lib/index.ts b/packages/nuxt-ripple-analytics/lib/index.ts
@@ -744,7 +744,7 @@ export default {
         name: payload?.name,
         type: payload?.type,
         form_id: payload?.contextId,
-        component: 'tide-search',
+        component: `tide-${payload.section || 'search'}`,
         platform_event: 'search'
       })
     }
@@ -760,7 +760,7 @@ export default {
         index: payload?.index,
         filters: payload?.options,
         count: payload?.value,
-        component: 'tide-search',
+        component: `tide-${payload.section || 'search'}`,
         platform_event: 'search'
       })
     }
@@ -777,7 +777,7 @@ export default {
         index: payload?.index,
         count: payload?.value,
         filters: payload?.options,
-        component: 'tide-search',
+        component: `tide-${payload.section || 'search'}`,
         platform_event: 'paginate'
       })
     }
@@ -792,10 +792,27 @@ export default {
         name: payload?.name,
         form_id: payload?.contextId,
         filters: payload?.options,
-        component: 'tide-search',
+        component: `tide-${payload.section || 'search'}`,
         platform_event: 'toggleFilters'
       })
     }
+  },
+  'tide-search/reset': () => {
+    return (payload: any) => {
+      trackEvent({
+        event: `${payload.action}_filters`,
+        element_id: payload?.id,
+        element_text: payload?.text,
+        label: payload?.label,
+        name: payload?.name,
+        count: payload?.value,
+        type: payload?.type,
+        form_id: payload?.contextId,
+        filters: payload?.options,
+        component: `tide-${payload.section || 'search'}`,
+        platform_event: 'clearQuery'
+      })
+    }
   }
 }
 

diff --git a/packages/ripple-tide-search/components/TideSearchFilters.vue b/packages/ripple-tide-search/components/TideSearchFilters.vue
@@ -34,13 +34,16 @@
         :label="submitLabel"
         :resetLabel="resetLabel"
         :displayResetButton="!!resetLabel"
+        :globalEvents="false"
         @reset="handleFilterReset"
       />
     </div>
   </RplForm>
 </template>
 
 <script setup lang="ts">
+import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
+
 type CollectionFilter = {
   component: string
   props: Record<string, any>
@@ -57,7 +60,7 @@ interface Props {
 
 const emit = defineEmits<{
   (e: 'submit', payload: Record<string, any>): void
-  (e: 'reset'): void
+  (e: 'reset', payload: rplEventPayload): void
 }>()
 
 const props = withDefaults(defineProps<Props>(), {
@@ -66,8 +69,8 @@ const props = withDefaults(defineProps<Props>(), {
   reverseStyling: false
 })
 
-const handleFilterReset = () => {
-  emit('reset')
+const handleFilterReset = (event: rplEventPayload) => {
+  emit('reset', event)
 }
 
 const handleFilterSubmit = (formValues) => {

diff --git a/packages/ripple-tide-search/components/TideSearchListingPage.vue b/packages/ripple-tide-search/components/TideSearchListingPage.vue
@@ -88,6 +88,7 @@ const emit = defineEmits<{
     e: 'toggleFilters',
     payload: rplEventPayload & { action: 'open' | 'close' }
   ): void
+  (e: 'reset', payload: rplEventPayload & { action: 'clear_search' }): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('tide-search', emit)
@@ -132,7 +133,8 @@ const baseEvent = () => ({
   index: page.value,
   label: searchTerm.value,
   value: totalResults.value,
-  options: getActiveFilterURL(filterForm.value)
+  options: getActiveFilterURL(filterForm.value),
+  section: 'search-listing'
 })
 
 // Updates filter options with aggregation value
@@ -208,7 +210,17 @@ const handleFilterSubmit = (event) => {
   cachedSubmitEvent.value = {}
 }
 
-const handleFilterReset = () => {
+const handleFilterReset = (event: rplEventPayload) => {
+  emitRplEvent(
+    'reset',
+    {
+      ...event,
+      ...baseEvent(),
+      action: 'clear_search'
+    },
+    { global: true }
+  )
+
   searchTerm.value = ''
   filterForm.value = {}
   submitSearch()

diff --git a/packages/ripple-tide-search/components/TideSearchPage.vue b/packages/ripple-tide-search/components/TideSearchPage.vue
@@ -68,6 +68,7 @@ const emit = defineEmits<{
     e: 'toggleFilters',
     payload: rplEventPayload & { action: 'open' | 'close' }
   ): void
+  (e: 'reset', payload: rplEventPayload & { action: 'clear_search' }): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('tide-search', emit)
@@ -108,7 +109,8 @@ const baseEvent = () => ({
   index: searchState.value.current,
   label: searchState.value.searchTerm,
   value: searchState.value.totalResults,
-  options: getActiveFilterURL(filterFormValues.value)
+  options: getActiveFilterURL(filterFormValues.value),
+  section: 'search'
 })
 
 const emitSearchEvent = (event) => {
@@ -136,7 +138,17 @@ const handleFilterSubmit = (event) => {
   emitSearchEvent({ ...event, text: submitFiltersLabel, type: 'button' })
 }
 
-const handleFilterReset = () => {
+const handleFilterReset = (event: rplEventPayload) => {
+  emitRplEvent(
+    'reset',
+    {
+      ...event,
+      ...baseEvent(),
+      action: 'clear_search'
+    },
+    { global: true }
+  )
+
   updateSearchTerm('')
   filterFormValues.value = {}
   doSearch()

diff --git a/packages/ripple-tide-search/components/global/TideCustomCollection.vue b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
@@ -83,6 +83,7 @@ const emit = defineEmits<{
     e: 'toggleFilters',
     payload: rplEventPayload & { action: 'open' | 'close' }
   ): void
+  (e: 'reset', payload: rplEventPayload & { action: 'clear_search' }): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('tide-search', emit)
@@ -179,7 +180,8 @@ const baseEvent = () => ({
   index: page.value,
   label: searchTerm.value,
   value: totalResults.value,
-  options: getActiveFilterURL(filterForm.value)
+  options: getActiveFilterURL(filterForm.value),
+  section: 'custom-collection'
 })
 
 // Updates filter options with aggregation value
@@ -255,7 +257,17 @@ const handleFilterSubmit = (event) => {
   cachedSubmitEvent.value = {}
 }
 
-const handleFilterReset = () => {
+const handleFilterReset = (event: rplEventPayload) => {
+  emitRplEvent(
+    'reset',
+    {
+      ...event,
+      ...baseEvent(),
+      action: 'clear_search'
+    },
+    { global: true }
+  )
+
   searchTerm.value = ''
   filterForm.value = {}
   locationQuery.value = null

diff --git a/packages/ripple-ui-forms/src/components/RplFormActions/RplFormActions.vue b/packages/ripple-ui-forms/src/components/RplFormActions/RplFormActions.vue
@@ -15,6 +15,7 @@ interface Props {
   prefixIcon?: string
   suffixIcon?: string
   displayResetButton?: boolean
+  globalEvents?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,7 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
   displayResetButton: false,
   prefixIcon: undefined,
   suffixIcon: undefined,
-  disabled: false
+  disabled: false,
+  globalEvents: true
 })
 
 const emit = defineEmits<{
@@ -59,7 +61,7 @@ const handleReset = () => {
       contextId: form?.id,
       contextName: form?.name
     },
-    { global: true }
+    { global: props.globalEvents }
   )
 }
 </script>