fixing minor type errors, adding word 'Grades' to rangeifyGrades method

packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -241,7 +241,7 @@ export default defineComponent({
     // to allow for various data shapes and sources
     // use-case: content pages provide this.data.page with non-page siblings (i.e. external link cards)
     // use-case: search and listing pages pass individual props
-    theItem(): Card | EventCardObject | undefined {
+    theItem(): Card | EventCardObject | EduResourceCardObject | undefined {
       if ((this.data as Card)?.page) {
         return (this.data as Card).page
       } else if (this.data) {

packages/vue/src/components/CalendarChip/CalendarChip.vue

@@ -5,9 +5,9 @@ import { mixinFormatSplitEventDates } from './../../utils/mixins'
 const themeStore = useThemeStore()
 
 interface CalendarChipProps {
-  startDate: string
+  startDate?: string
   endDate?: string
-  ongoing: boolean
+  ongoing?: boolean
 }
 
 // define props

packages/vue/src/interfaces.ts

@@ -56,7 +56,7 @@ export interface ElasticSearchPage {
   topic: string
   image: string | any
   date: string
-  startDate: string
+  startDate: string | null | undefined
   endDate: string
   startTime: string
   endTime: string

packages/vue/src/templates/PageEventDetail/PageEventDetail.vue

@@ -213,32 +213,25 @@
 
     <!-- Related Events -->
     <div
-      v-if="data.moreEvents && data.moreEvents.length > 0"
+      v-if="moreEvents?.length > 0"
       class="my-12 lg:my-16 print:!px-4"
     >
       <BlockLinkCarousel
         item-type="cards"
         class="print:!px-4"
         heading="MORE EVENTS"
-        :items="data.moreEvents"
+        :items="moreEvents"
       />
     </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import {
-  mixinFormatEventDates,
-  mixinFormatEventTimeInHoursAndMinutes,
-  mixinFormatSplitEventDates
-} from '../../utils/mixins'
+import type { EventCardObject } from './../../interfaces'
 import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../../components/BaseHeading/BaseHeading.vue'
 import ShareButtons from './../../components/ShareButtons/ShareButtons.vue'
 import EventDetailHero from './../../components/EventDetailHero/EventDetailHero.vue'
-import IconCalendar from './../../components/Icons/IconCalendar.vue'
-import IconLocation from './../../components/Icons/IconLocation.vue'
-import IconTime from './../../components/Icons/IconTime.vue'
 import BaseLink from './../../components/BaseLink/BaseLink.vue'
 import BaseButton from './../../components/BaseButton/BaseButton.vue'
 import CalendarButton from './../../components/CalendarButton/CalendarButton.vue'
@@ -258,9 +251,6 @@ export default defineComponent({
     BaseHeading,
     ShareButtons,
     EventDetailHero,
-    IconCalendar,
-    IconLocation,
-    IconTime,
     BaseLink,
     BaseButton,
     CalendarButton,
@@ -283,22 +273,19 @@ export default defineComponent({
     }
   },
   computed: {
-    displayTime(): string {
-      return this.data
-        ? mixinFormatEventTimeInHoursAndMinutes(
-            this.data.startDatetime,
-            this.data.endDatetime,
-            this.data.endTime
-          )
-        : ''
-    },
-    formattedEventDates(): string {
-      return this.data ? mixinFormatEventDates(this.data.startDatetime, this.data.endDatetime) : ''
-    },
-    formattedSplitEventDates() {
-      return this.data
-        ? mixinFormatSplitEventDates(this.data.startDatetime, this.data.endDatetime)
+    moreEvents(): EventCardObject[] {
+      // mimic the data shape of a PageChooserBlock array
+      const mapped = this.data?.moreEvents
+        ? this.data.moreEvents.map((event: EventCardObject) => {
+            return {
+              page: {
+                __typename: 'EventPage',
+                ...event
+              }
+            }
+          })
         : undefined
+      return mapped
     }
   }
 })

packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue

@@ -99,7 +99,7 @@
         >
           <MetadataEvent :event="data" />
 
-          <div class="PageEduEventDetail__Buttons">
+          <div class="PageEduEventDetail__Buttons max-w-[17rem]">
             <BaseButton
               v-if="
                 data.registerLink &&
@@ -249,14 +249,14 @@
 
     <!-- Related Events -->
     <div
-      v-if="data.relatedEvents?.length"
+      v-if="relatedEvents?.length"
       class="my-12 lg:my-16 px-0"
     >
       <BlockLinkCarousel
         item-type="cards"
         size="h3"
         heading="Related Events"
-        :items="data.relatedEvents"
+        :items="relatedEvents"
       />
     </div>
     <!-- Related Content -->
@@ -275,6 +275,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import type { EventCardObject } from './../../../interfaces'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import BasePill from './../../../components/BasePill/BasePill.vue'
@@ -335,6 +336,18 @@ export default defineComponent({
     },
     heroIsInline(): boolean {
       return this.data?.heroPosition === 'inline'
+    },
+    relatedEvents(): EventCardObject[] {
+      // mimic the data shape of a PageChooserBlock array
+      const mapped = this.data?.relatedEvents
+        ? this.data.relatedEvents.map((event: EventCardObject) => {
+            return {
+              __typename: 'EDUEventPage',
+              page: event
+            }
+          })
+        : undefined
+      return mapped
     }
   }
 })
@@ -364,7 +377,6 @@ export default defineComponent({
     @apply mt-10;
     @apply lg:mt-0;
     @apply text-center;
-    @apply max-w-[17rem];
   }
   .bg-stars .MixinCarousel__Heading {
     @apply text-white;

packages/vue/src/utils/rangeifyGrades.ts

@@ -29,8 +29,8 @@ const numbersAsGrades = computed(
   }
 )
 
-const rangeify = (a: number[]) => {
-  const res = []
+const rangeify = (a: number[]): string[] => {
+  const res: string[] = []
   let run = []
   for (let i = 0; i < a.length; i++) {
     run.push(a[i])
@@ -43,7 +43,7 @@ const rangeify = (a: number[]) => {
       run = []
     }
   }
-  return res.join(', ')
+  return res
 }
 
 export const rangeifyGrades = (gradeLevels: GradeLevelsObject[]) => {
@@ -58,6 +58,15 @@ export const rangeifyGrades = (gradeLevels: GradeLevelsObject[]) => {
     return level
   })
 
-  const audienceArray = [allAges, rangeify(gradesArray.filter(Number.isFinite))]
+  const filteredGrades = rangeify(gradesArray.filter(Number.isFinite))
+  let preparedGrades: string = ''
+  if (filteredGrades?.length) {
+    const gradeString = filteredGrades.length > 1 ? 'Grades: ' : 'Grade: '
+    preparedGrades = filteredGrades
+      .map((grade, index) => (index === 0 ? gradeString + grade : grade))
+      .join(', ')
+  }
+
+  const audienceArray = [allAges, preparedGrades]
   return audienceArray.filter(Boolean).join(', ')
 }