From b55237e0f193a177422b1fc4d0e2fcb227751a56 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephiescastle@users.noreply.github.com>
Date: Sun, 15 Sep 2024 07:03:11 -0700
Subject: [PATCH] feature: edu resource subjects accordion filter group (#617)

* adding dynamic slots to SearchFilterGroup

* prepping for adding accordion to SearchFilterGroup

* tweaking styles of accordion filters

* more tweaks to styles

* filter group accordion open if present in route.query

* fixing accessibility test on SearchFilterGroup

* spacing adjustments
---
 .../SearchFilterGroup.stories.js              |  89 ++++++++
 .../SearchFilterGroup/SearchFilterGroup.vue   | 190 +++++++++++++++---
 .../SearchFilterGroupAccordionItem.vue        |  88 ++++++++
 packages/vue/src/interfaces.ts                |  21 ++
 .../PageImageDetail/PageImageDetail.vue       |   2 +-
 5 files changed, 364 insertions(+), 26 deletions(-)
 create mode 100644 packages/vue/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue

diff --git a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.stories.js b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.stories.js
index 61c384ad..58454169 100644
--- a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.stories.js
+++ b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.stories.js
@@ -58,3 +58,92 @@ export const DateFilter = {
     truncateFilters: true
   }
 }
+export const SubFilters = {
+  decorators: [
+    () => ({
+      template: '<div id="storyRoot" class="md:w-1/2 lg:w-1/3"><story /></div>'
+    })
+  ],
+  args: {
+    filterBy: [],
+    buckets: [
+      { key: 'Solar System', doc_count: 3308 },
+      { key: 'Earth', doc_count: 1179 },
+      { key: 'Stars and Galaxies', doc_count: 979 },
+      { key: 'Technology', doc_count: 480 }
+    ],
+    groupKey: 'topics',
+    groupTitle: 'Topic',
+    truncateFilters: false,
+    subFilters: {
+      solar_system: [
+        {
+          key: 'Sun',
+          agg: 'solar_system_area',
+          doc_count: 20
+        },
+        {
+          key: 'Mercury',
+          agg: 'solar_system_area',
+          doc_count: 21
+        },
+        {
+          key: 'Venus',
+          agg: 'solar_system_area',
+          doc_count: 22
+        }
+      ],
+      earth: [
+        {
+          key: 'Sea Level',
+          agg: 'solar_system_area',
+          doc_count: 20
+        },
+        {
+          key: 'Pollution',
+          agg: 'solar_system_area',
+          doc_count: 21
+        },
+        {
+          key: 'Climate Change',
+          agg: 'solar_system_area',
+          doc_count: 22
+        }
+      ],
+      stars_and_galaxies: [
+        {
+          key: 'Sea Level',
+          agg: 'solar_system_area',
+          doc_count: 20
+        },
+        {
+          key: 'Pollution',
+          agg: 'solar_system_area',
+          doc_count: 21
+        },
+        {
+          key: 'Climate Change',
+          agg: 'solar_system_area',
+          doc_count: 22
+        }
+      ],
+      technology: [
+        {
+          key: 'Sea Level',
+          agg: 'solar_system_area',
+          doc_count: 20
+        },
+        {
+          key: 'Pollution',
+          agg: 'solar_system_area',
+          doc_count: 21
+        },
+        {
+          key: 'Climate Change',
+          agg: 'solar_system_area',
+          doc_count: 22
+        }
+      ]
+    }
+  }
+}
diff --git a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
index 9f2efe40..657ed693 100644
--- a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
+++ b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
@@ -18,27 +18,98 @@
         ref="buckets"
         class="form-group form-check"
       >
-        <!-- correct for zero based index -->
-        <div
-          v-if="!truncateFilters || index <= checkbox.checkboxLimit - 1"
-          class="flex my-2"
+        <SearchFilterGroupAccordionItem
+          v-if="hasSubFilters(bucket.key_as_string || bucket.key)"
+          class="w-auto"
+          :init-open="subFilterIsInQueryParams(bucket.key_as_string || bucket.key)"
         >
-          <input
-            :id="bucket.key_as_string ? generateId(bucket.key_as_string) : generateId(bucket.key)"
-            v-model="filterByHandler"
-            type="checkbox"
-            :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
-            class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
-          />
-          <!-- 'key_as_string' exists for dates to have a human readable version -->
-          <label
-            :for="bucket.key_as_string ? generateId(bucket.key_as_string) : generateId(bucket.key)"
-            class="form-check-label pl-2 tracking-normal align-middle"
+          <template #header>
+            <!-- correct for zero based index -->
+            <div
+              v-if="!truncateFilters || index <= checkbox.checkboxLimit - 1"
+              class="flex flex-grow"
+            >
+              <input
+                :id="
+                  bucket.key_as_string
+                    ? generateId(bucket.key_as_string, groupKey)
+                    : generateId(bucket.key, groupKey)
+                "
+                v-model="filterByHandler"
+                type="checkbox"
+                :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
+                class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
+              />
+              <!-- 'key_as_string' exists for dates to have a human readable version -->
+              <label
+                :for="
+                  bucket.key_as_string
+                    ? generateId(bucket.key_as_string, groupKey)
+                    : generateId(bucket.key, groupKey)
+                "
+                class="form-check-label pl-2 tracking-normal align-middle"
+              >
+                <span class="font-extrabold">{{
+                  prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key)
+                }}</span>
+                <span class="text-gray-mid-dark font-normal text-sm">
+                  ({{ bucket.doc_count.toLocaleString() }})
+                </span>
+              </label>
+            </div>
+          </template>
+          <template #default>
+            <!-- dynamic slots for subFilters -->
+            <div
+              v-if="
+                (bucket.key_as_string || bucket.key) &&
+                getSubFilters(bucket.key_as_string || bucket.key) &&
+                subFilterParentKeys?.length
+              "
+              class="block"
+            >
+              <div
+                v-if="hasSubFilters(bucket.key_as_string || bucket.key)"
+                class="SubFilters"
+              >
+                <slot :name="`slot_${getSubFilterParentKey(bucket.key_as_string || bucket.key)}`" />
+              </div>
+            </div>
+          </template>
+        </SearchFilterGroupAccordionItem>
+        <template v-else>
+          <!-- correct for zero based index -->
+          <div
+            v-if="!truncateFilters || index <= checkbox.checkboxLimit - 1"
+            class="flex my-2"
           >
-            {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
-            <span class="text-gray-mid-dark"> ({{ bucket.doc_count.toLocaleString() }}) </span>
-          </label>
-        </div>
+            <input
+              :id="
+                bucket.key_as_string
+                  ? generateId(bucket.key_as_string, groupKey)
+                  : generateId(bucket.key, groupKey)
+              "
+              v-model="filterByHandler"
+              type="checkbox"
+              :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
+              class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
+            />
+            <!-- 'key_as_string' exists for dates to have a human readable version -->
+            <label
+              :for="
+                bucket.key_as_string
+                  ? generateId(bucket.key_as_string, groupKey)
+                  : generateId(bucket.key, groupKey)
+              "
+              class="form-check-label pl-2 tracking-normal align-middle"
+            >
+              {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
+              <span class="text-gray-mid-dark text-sm">
+                ({{ bucket.doc_count.toLocaleString() }})
+              </span>
+            </label>
+          </div>
+        </template>
       </div>
     </div>
     <div v-else><span class="text-sm text-gray-mid-dark">No matching filters</span></div>
@@ -63,16 +134,28 @@
 </template>
 <script lang="ts">
 // @ts-nocheck
+import { PropType } from 'vue'
 import isEqual from 'lodash/isEqual.js'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 import { lookupContentType } from './../../utils/lookupContentType'
+import { SubFiltersObject } from './../../interfaces'
+import SearchFilterGroupAccordionItem from './../SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue'
 
 export default {
   name: 'SearchFilterGroup',
+  components: {
+    SearchFilterGroupAccordionItem
+  },
   props: {
-    filterBy: Array,
-    buckets: null,
+    filterBy: {
+      type: Array,
+      default: undefined
+    },
+    buckets: {
+      type: Object,
+      default: undefined
+    },
     hideFilterGroups: {
       type: Array,
       default: () => []
@@ -83,12 +166,20 @@ export default {
     },
     groupTitle: {
       type: String,
-      required: false
+      default: ''
     },
     truncateFilters: {
       type: Boolean,
       required: false,
       default: false
+    },
+    subFilters: {
+      type: Object as PropType<SubFiltersObject>,
+      default: undefined
+    },
+    subFilterAggKey: {
+      type: String,
+      default: undefined
     }
   },
   emits: ['update:filterBy'],
@@ -118,7 +209,10 @@ export default {
     },
     showFilterGroup() {
       if (this.themeStore.isEdu) {
-        return this.groupTitle && !this.hideFilterGroups.includes(this.groupKey)
+        return (
+          (this.groupTitle || this.buckets?.length) &&
+          !this.hideFilterGroups.includes(this.groupKey)
+        )
       } else {
         return (
           typeof this.groupKey !== 'undefined' &&
@@ -127,6 +221,9 @@ export default {
           !this.hideFilterGroups.includes(this.groupKey)
         )
       }
+    },
+    subFilterParentKeys() {
+      return this.subFilters ? Object.keys(this.subFilters) : undefined
     }
   },
   watch: {
@@ -152,11 +249,51 @@ export default {
       }
     }
   },
+
   methods: {
-    generateId(value) {
+    generateId(value, group) {
       let valueString = String(value)
       valueString = valueString.split(' ').join('')
-      return `filter_${this.groupKey}_${valueString}`
+      return `filter_${group}_${valueString}`
+    },
+    // used to match sub-filters to their parent
+    getSubFilterParentKey(value) {
+      let key = value
+      if (key) {
+        key = key.toLowerCase()
+        key = key.replaceAll(' ', '_')
+      }
+      return key
+    },
+    hasSubFilters(filterKey) {
+      const lookupKey = this.getSubFilterParentKey(filterKey)
+      // check if any of the keys are populated in subFilters
+      if (this.subFilters && lookupKey && this.subFilters[lookupKey]) {
+        return true
+      }
+      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
+      if (this.subFilters && lookupKey && this.subFilters[lookupKey]) {
+        return this.subFilters[lookupKey]
+      }
+      return undefined
     },
     toggleShowMoreFilters() {
       if (this.checkbox.checkboxLimit === this.checkbox.initialLimit) {
@@ -178,6 +315,9 @@ export default {
         name = name.replace('EDU ', '')
       }
       return name ? name : key
+    },
+    getSlotName(key) {
+      return `slot_${key}`
     }
   }
 }
diff --git a/packages/vue/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue b/packages/vue/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue
new file mode 100644
index 00000000..e1928f5e
--- /dev/null
+++ b/packages/vue/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+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(!initOpen)
+const itemId = ref(uniqueId())
+
+const panelId = computed(() => {
+  return `filterGroup_accordion_panel_${itemId.value}`
+})
+
+const headingId = computed(() => {
+  return `filterGroup_accordion_heading_${itemId.value}`
+})
+
+const handleClick = () => {
+  ariaExpanded.value = !ariaExpanded.value
+  isHidden.value = !isHidden.value
+  if (isHidden.value) {
+    emit('filterGroupAccordionItemClosed')
+  } else {
+    emit('filterGroupAccordionItemOpened')
+  }
+}
+
+const emit = defineEmits(['filterGroupAccordionItemOpened', 'filterGroupAccordionItemClosed'])
+</script>
+<template>
+  <div
+    class="SearchFilterGroupAccordionItem border-t pt-2.5"
+    :class="{
+      '-open border-gray-light-mid  -mb-px': !isHidden,
+      'border-transparent mb-3': isHidden
+    }"
+  >
+    <div class="SearchFilterGroupAccordionItemHeader flex flex-row w-full content-between">
+      <template v-if="$slots.header">
+        <slot name="header"></slot>
+        <button
+          v-bind-once="{ id: headingId, 'aria-controls': panelId }"
+          :aria-expanded="ariaExpanded"
+          aria-label="Expand"
+          class="SearchFilterGroupAccordionItem-trigger group block w-auto text-body-lg pl-4 pr-1 -my-2"
+          @click="handleClick()"
+        >
+          <span
+            class="SearchFilterGroupAccordionItem-icon inline-block text-xs text-action flex-shrink-0 transform transition-transform"
+            :class="{ '!rotate-45': !isHidden }"
+          >
+            <IconPlus />
+          </span>
+        </button>
+      </template>
+    </div>
+    <div
+      v-show="!isHidden"
+      class="SearchFilterGroupAccordionItemContent text-sm"
+    >
+      <div
+        v-bind-once="{ id: panelId, 'aria-labelledby': headingId }"
+        role="region"
+        class="SearchFilterGroupAccordionItem-panel border-b border-gray-light-mid"
+      >
+        <slot name="default" />
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.SearchFilterGroupAccordionItemContent {
+  input.mt-px {
+    @apply mt-0 #{!important};
+  }
+}
+</style>
diff --git a/packages/vue/src/interfaces.ts b/packages/vue/src/interfaces.ts
index e7416ad0..d3a3709b 100644
--- a/packages/vue/src/interfaces.ts
+++ b/packages/vue/src/interfaces.ts
@@ -185,6 +185,27 @@ export interface FooterResponse {
   footer: any
 }
 
+export interface EDUSubjectArea {
+  id: number
+  primarySubject: EduResourcesSubject
+  subjectArea: string
+}
+
+export interface SubFiltersObject {
+  [key: string]: {
+    parentBucketKey: string
+    aggParentKey: string
+    aggMapKey: string
+    subFilterKey: string
+  }
+}
+
+export interface EduSubjectAreasResponse {
+  eduSubjectAreas: {
+    eduSubjectAreas: EDUSubjectArea[]
+  }
+}
+
 export type Explorer1Theme = 'defaultTheme' | 'ThemeInternal' | 'ThemeEdu'
 
 export interface Attributes {
diff --git a/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue b/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue
index 390fc02a..29198335 100755
--- a/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue
+++ b/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue
@@ -159,7 +159,7 @@
                 <BaseLink
                   variant="none"
                   link-class="font-primary text-jpl-red hover:text-jpl-red-light w-full py-3 text-lg"
-                  to="/missions/?mission_target={{ item.target }}"
+                  :to="`/missions/?mission_target=${item.target}`"
                 >
                   {{ item.target }}
                 </BaseLink>