From a4893700087cc2dc336fcef2f7bab2d8bd1b032c Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Thu, 13 Jul 2023 13:56:30 +1000
Subject: [PATCH] feat(@dpc-sdp/ripple-tide-search): got filter form working
 correctly with URL

---
 .../components/TideSearchFilters.vue          | 30 +++++++------------
 .../components/TideSearchListingPage.vue      | 18 ++++++-----
 .../composables/useTideSearch.ts              | 13 ++++++--
 3 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/packages/ripple-tide-search/components/TideSearchFilters.vue b/packages/ripple-tide-search/components/TideSearchFilters.vue
index e7746bbf70..96d97eaa1b 100644
--- a/packages/ripple-tide-search/components/TideSearchFilters.vue
+++ b/packages/ripple-tide-search/components/TideSearchFilters.vue
@@ -1,9 +1,7 @@
 <template>
   <RplForm
     id="tide-search-filter-form"
-    :modelValue="filterFormModel"
     class="rpl-u-margin-t-6"
-    @input="handleUpdateFilters"
     @submit="handleFilterSubmit"
   >
     <div class="rpl-grid rpl-grid--no-row-gap tide-search-filters">
@@ -16,7 +14,13 @@
           :is="filter.component"
           :id="filter.id"
           :name="filter.id"
+          :modelValue="filterFormValues[filter.id]"
           v-bind="filter.props"
+          :options="
+            filter.props.dynamicOptions?.length
+              ? filter.props.dynamicOptions
+              : filter.props.options
+          "
         ></component>
       </div>
     </div>
@@ -32,7 +36,6 @@
 
 <script setup lang="ts">
 import { FilterFormModel } from 'ripple-tide-search/types'
-import { ref, toRaw, watch } from 'vue'
 
 type CollectionFilter = {
   component: string
@@ -51,29 +54,16 @@ const emit = defineEmits<{
   (e: 'reset'): void
 }>()
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   submitLabel: 'Apply search filters',
   resetLabel: 'Clear search filters'
 })
 
-const filterFormModel = ref(toRaw(props.filterFormValues.value))
-
-const handleUpdateFilters = (values) => {
-  filterFormModel.value = values
-}
-
-watch(
-  () => props.filterFormValues,
-  (newValues) => {
-    filterFormModel.value = newValues
-  }
-)
-
-function handleFilterReset() {
+const handleFilterReset = () => {
   emit('reset')
 }
 
-function handleFilterSubmit() {
-  emit('submit', filterFormModel.value)
+const handleFilterSubmit = (formValues) => {
+  emit('submit', formValues.data)
 }
 </script>
diff --git a/packages/ripple-tide-search/components/TideSearchListingPage.vue b/packages/ripple-tide-search/components/TideSearchListingPage.vue
index 71531047bc..7ef0ea0eb9 100644
--- a/packages/ripple-tide-search/components/TideSearchListingPage.vue
+++ b/packages/ripple-tide-search/components/TideSearchListingPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRuntimeConfig, useFetch, useRoute, ref } from '#imports'
+import { useRuntimeConfig, useFetch, useRoute, ref, toRaw } from '#imports'
 import useTideSearch from './../composables/useTideSearch'
 import type {
   TideSearchListingPage,
@@ -105,7 +105,7 @@ onAggregationUpdateHook.value = (aggs) => {
   Object.keys(aggs).forEach((key) => {
     uiFilters.value.forEach((uiFilter, idx) => {
       if (uiFilter.id === key) {
-        const getOptions = () => {
+        const getDynamicOptions = () => {
           const mappedOptions = aggs[key].map((item) => ({
             id: item,
             label: item,
@@ -113,11 +113,13 @@ onAggregationUpdateHook.value = (aggs) => {
           }))
 
           if (uiFilters.value[idx].props.hasOwnProperty('options')) {
-            return [...uiFilters.value[idx].props.options, ...mappedOptions]
-          } else if (mappedOptions.length > 0) {
-            return mappedOptions
+            return [
+              ...toRaw(uiFilters.value[idx].props.options),
+              ...mappedOptions
+            ]
           }
-          return []
+
+          return mappedOptions
         }
 
         uiFilters.value[idx] = {
@@ -125,7 +127,7 @@ onAggregationUpdateHook.value = (aggs) => {
           props: {
             ...uiFilters.value[idx].props,
             timestamp: updateTimestamp,
-            options: getOptions()
+            dynamicOptions: getDynamicOptions()
           }
         }
       }
@@ -143,7 +145,7 @@ const handleFilterSubmit = (form) => {
 }
 
 const handleFilterReset = () => {
-  filterForm.value = []
+  filterForm.value = {}
   submitSearch()
 }
 
diff --git a/packages/ripple-tide-search/composables/useTideSearch.ts b/packages/ripple-tide-search/composables/useTideSearch.ts
index 071fe1cecf..4f6f2f9279 100644
--- a/packages/ripple-tide-search/composables/useTideSearch.ts
+++ b/packages/ripple-tide-search/composables/useTideSearch.ts
@@ -139,7 +139,7 @@ export default (
             {
               [`${itm.filter.type}`]: {
                 // ES8 appears to require keyword suffix due to change in indexing
-                [`${itm.filter.value}.keyword`]: filterVal
+                [`${itm.filter.value}`]: filterVal
               }
             }
           ]
@@ -293,9 +293,18 @@ export default (
     const formValues = Object.keys(newRoute.query)
       .filter((key) => userFilterConfig.some((filter) => filter.id === key))
       .reduce((obj, key) => {
+        let parsedValue = newRoute.query[key]
+        const filterConfig = userFilterConfig.find(
+          (filter) => filter.id === key
+        )
+
+        if (filterConfig.component === 'TideSearchFilterDropdown') {
+          parsedValue = Array.isArray(parsedValue) ? parsedValue : [parsedValue]
+        }
+
         return {
           ...obj,
-          [key]: newRoute.query[key]
+          [key]: parsedValue
         }
       }, {})