@explorer-1/vue 0.2.56 → 0.2.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.56",
+  "version": "0.2.58",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue

@@ -46,7 +46,7 @@
         :initial-slide="
           activeSeasonId === initialSeasonId && initialEpisodeIndex ? initialEpisodeIndex : 0
         "
-        :slides="activeTabData.episodes"
+        :slides="activeTabData.episodes as Partial<Slide>[]"
       />
     </keep-alive>
   </div>
@@ -61,9 +61,10 @@ import ThumbnailCarousel from './../ThumbnailCarousel/ThumbnailCarousel.vue'
 
 const route = useRoute()
 
-interface ActiveTab {
+interface Slide {
+  url: string
   title: string
-  episodes: Episode[]
+  thumbnailImage: Partial<ImageObject>
 }
 
 interface Episode {
@@ -72,19 +73,25 @@ interface Episode {
   publicationDate: any
   thumbnailImage: Partial<ImageObject>
 }
+
+interface ActiveTab {
+  title?: string
+  episodes?: Episode[] | Season
+}
+
 interface Season {
   id: string
-  url: string
-  title: string
-  seasonNumber: number
-  episodes: Episode[]
+  url?: string
+  title?: string
+  seasonNumber?: number
+  episodes?: Episode[]
 }
 
 interface Series {
   id: string
-  title: string
-  url: string
-  seasons: Season[]
+  title?: string
+  url?: string
+  seasons?: Season[]
 }
 export default defineComponent({
   name: 'PodcastSeriesCarousel',
@@ -111,11 +118,17 @@ export default defineComponent({
     }
   },
   computed: {
-    sortedSeasons(): Season[] | null {
-      let seasons = null
+    sortedSeasons(): Season[] | undefined {
+      let seasons = undefined
       if (this.series && this.series.seasons) {
         seasons = this.series.seasons
-        return seasons.sort((a: Season, b: Season) => a.seasonNumber - b.seasonNumber)
+        // @ts-expect-error seasons is an array
+        seasons = seasons.toSorted((a: Season, b: Season) => {
+          if (a.seasonNumber && b.seasonNumber) {
+            return a.seasonNumber - b.seasonNumber
+          }
+        })
+        return seasons
       }
       return seasons
     },
@@ -142,9 +155,9 @@ export default defineComponent({
       }
       return null
     },
-    activeTabData(): ActiveTab | undefined {
-      let season: Season | undefined = undefined
-      if (this.series?.seasons) {
+    activeTabData(): ActiveTab | Season | undefined {
+      let season
+      if (this.series?.seasons?.length) {
         if (this.activeSeasonId) {
           season = this.series.seasons.find((o: Season) => {
             return o.id === this.activeSeasonId
@@ -152,14 +165,21 @@ export default defineComponent({
         } else {
           season = this.series.seasons[0]
         }
-        if (season?.episodes) {
-          season.episodes.sort(
-            (a: Episode, b: Episode) =>
-              new Date(a.publicationDate).getTime() - new Date(b.publicationDate).getTime()
-          )
+        if (season?.episodes?.length) {
+          let episodes: Episode[] = season.episodes
+          // @ts-expect-error episodes is an array
+          episodes = episodes.toSorted((a: Episode, b: Episode) => {
+            if (a.publicationDate && b.publicationDate) {
+              return new Date(a.publicationDate).getTime() - new Date(b.publicationDate).getTime()
+            }
+          })
+          season = {
+            ...season,
+            episodes: episodes
+          }
         }
       }
-      return season ? season : undefined
+      return season
     }
   },
   methods: {

package/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
+        }
+      ]
+    }
+  }
+}

package/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}`
     }
   }
 }

package/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>

package/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 {

package/src/templates/PageAudioDetail/PageAudioDetail.vue

@@ -204,6 +204,7 @@
     </LayoutHelper>
 
     <PodcastSeriesCarousel
+      v-if="data?.series"
       :series="data.series"
       :initial-season-id="data.parent ? data.parent.id : null"
       class="mb-12 lg:mb-24"