From fafac8b4f551953f74cffe9330ffbd22fc3f4406 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Sat, 14 Sep 2024 22:40:18 -0700
Subject: [PATCH] filter group accordion open if present in route.query

---
 .../SearchFilterGroup/SearchFilterGroup.vue   | 19 +++++++++++++++++++
 .../SearchFilterGroupAccordionItem.vue        | 16 ++++++++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
index 815dc516..657ed693 100644
--- a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
+++ b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
@@ -21,6 +21,7 @@
         <SearchFilterGroupAccordionItem
           v-if="hasSubFilters(bucket.key_as_string || bucket.key)"
           class="w-auto"
+          :init-open="subFilterIsInQueryParams(bucket.key_as_string || bucket.key)"
         >
           <template #header>
             <!-- correct for zero based index -->
@@ -175,6 +176,10 @@ export default {
     subFilters: {
       type: Object as PropType<SubFiltersObject>,
       default: undefined
+    },
+    subFilterAggKey: {
+      type: String,
+      default: undefined
     }
   },
   emits: ['update:filterBy'],
@@ -268,6 +273,20 @@ export default {
       }
       return undefined
     },
+    subFilterIsInQueryParams(bucketKey) {
+      const subFilters = this.getSubFilters(bucketKey)
+      let state = false
+      if (subFilters?.length) {
+        subFilters.forEach((subFilter) => {
+          const agg = subFilter.agg
+          const key = subFilter.key
+          if (agg && key && this.$route.query[agg]?.includes(key)) {
+            state = true
+          }
+        })
+      }
+      return state
+    },
     getSubFilters(filterKey) {
       const lookupKey = this.getSubFilterParentKey(filterKey)
       // check if any of the keys are populated in subFilters
diff --git a/packages/vue/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue b/packages/vue/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue
index 167936ba..f6470f96 100644
--- a/packages/vue/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue
+++ b/packages/vue/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue
@@ -1,9 +1,21 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { uniqueId } from 'lodash'
 import IconPlus from './../Icons/IconPlus.vue'
+
+export interface SearchFilterGroupAccordionItemProps {
+  initOpen?: boolean
+}
+
+// define props
+const props = withDefaults(defineProps<SearchFilterGroupAccordionItemProps>(), {
+  initOpen: false
+})
+
+const { initOpen } = reactive(props)
+
 const ariaExpanded = ref(false)
-const isHidden = ref(true)
+const isHidden = ref(!initOpen)
 const itemId = ref(uniqueId())
 
 const panelId = computed(() => {