fixing date metadata in edu event search results (#612)

* fixing date metadata in edu event search results * adjusting metadata text size in compact BlockLinkCard * further tweaks to metadata text size * small spacing adjustment to edu event target audience in compact BlockLinkCard * resetting page to 1 when updating SearchFilterGroups
nasa-jpl · Sep 10, 2024 · a9b6a98 · a9b6a98
1 parent 0958baf
commit a9b6a98
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 13 deletions.
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js
@@ -10,9 +10,9 @@ export default {
   argTypes: {
     size: {
       control: {
-        type: 'select',
-        options: ['sm', 'md', 'lg']
-      }
+        type: 'select'
+      },
+      options: ['sm', 'md', 'lg']
     },
     headingLevel: {
       description:
@@ -152,6 +152,29 @@ export const EventItemWithChip = {
     }
   }
 }
+export const EventWithDateNoTime = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  args: {
+    ...BlockLinkCardData,
+    showCalendarChip: true,
+    data: {
+      page: {
+        ...BlockLinkCardData.data,
+        __typename: 'EDUEventPage',
+        startDate: '2021-11-11',
+        startDatetime: null,
+        endDatetime: null,
+        endDate: '2021-11-12',
+        ongoing: false,
+        eventType: 'Workshop'
+      }
+    }
+  }
+}
 export const EduLesson = {
   decorators: [
     () => ({
@@ -160,6 +183,7 @@ export const EduLesson = {
   ],
   args: {
     ...BlockLinkCardData,
+    size: 'sm',
     data: {
       page: {
         __typename: 'EDULessonPage',
@@ -172,7 +196,10 @@ export const EduLesson = {
           { gradeLevel: '1' },
           { gradeLevel: '2' },
           { gradeLevel: '8' }
-        ]
+        ],
+        time: {
+          time: '1-2 hrs'
+        }
       }
     }
   }

diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -98,7 +98,7 @@
       </component>
       <p
         v-if="(theItem as EventCardObject).targetAudience"
-        :class="{ 'mt-2': !large, 'mt-4': large }"
+        :class="{ 'mt-1': !large, 'mt-4': large }"
       >
         <strong>Target Audience:</strong> {{ (theItem as EventCardObject).targetAudience }}
       </p>

diff --git a/packages/vue/src/components/MetadataEduResource/MetadataEduResource.vue b/packages/vue/src/components/MetadataEduResource/MetadataEduResource.vue
@@ -42,7 +42,7 @@ const time = computed(() => {
 <template>
   <div
     class="MetadataEduResource"
-    :class="{ '-compact text-body-sm': props.compact, 'text-body-lg': !props.compact }"
+    :class="{ '-compact text-sm xl:text-base': props.compact, 'text-body-lg': !props.compact }"
   >
     <div
       v-if="primarySubject"
@@ -69,6 +69,7 @@ const time = computed(() => {
     <div
       v-if="time && showTime"
       class="MetadataEduResourceItem"
+      :class="primarySubject && audience && time ? '-xlScreensOnly' : ''"
     >
       <IconTime
         class="MetadataEduResourceIcon text-[1.15em]"
@@ -102,10 +103,14 @@ const time = computed(() => {
   }
 
   &.-compact {
-    @apply flex flex-grow;
+    @apply flex flex-grow flex-wrap;
     .MetadataEduResourceItem {
+      @apply whitespace-nowrap;
       @apply max-w-none min-w-[4em];
       @apply mr-6 mb-0;
+      &.-xlScreensOnly {
+        @apply hidden xl:flex;
+      }
     }
   }
 }

diff --git a/packages/vue/src/components/MetadataEvent/MetadataEvent.vue b/packages/vue/src/components/MetadataEvent/MetadataEvent.vue
@@ -76,7 +76,7 @@ const location = computed(() => {
   <div
     class="MetadataEvent"
     :class="{
-      '-compact text-body-sm': props.compact,
+      '-compact text-sm xl:text-base': props.compact,
       'text-body-lg': !props.compact,
       '-allow-break': props.allowBreak
     }"
@@ -173,8 +173,9 @@ const location = computed(() => {
   }
 
   &.-compact {
-    @apply flex flex-grow;
+    @apply flex flex-grow flex-wrap;
     .MetadataEventItem {
+      @apply whitespace-nowrap;
       @apply max-w-none min-w-[4em];
       @apply mr-6 mb-0;
     }

diff --git a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
@@ -139,6 +139,7 @@ export default {
           if (newVal.length > 0) {
             query = {
               ...this.$route.query,
+              page: 1,
               [this.groupKey]: newVal.toString()
             }
           } else {

diff --git a/packages/vue/src/components/SearchResultCard/SearchResultCard.stories.js b/packages/vue/src/components/SearchResultCard/SearchResultCard.stories.js
@@ -66,9 +66,20 @@ export const PodcastEpisodeCard = {
 export const EduEventCard = {
   args: {
     ...SearchResultCardData,
-    pageContentType: 'eduevents_edueventpage',
+    __typename: 'EDUEventPage',
+    pageType: 'EDUEventPage',
+    contentType: 'EDUEventPage',
+    topic: null,
+    date: null,
+    isEvents: true,
+    type: 'Event',
     startDate: '2021-11-11',
     endDate: '2021-11-11',
-    eventType: 'Internship'
+    eventType: 'Internship',
+    startTime: '00:00:00-08:00',
+    endTime: '23:59:59.999999-08:00',
+    location: 'Hybrid',
+    targetAudience: 'All ages',
+    pageContentType: 'edu_events_edueventpage'
   }
 }
diff --git a/packages/vue/src/components/SearchResultsList/SearchResultsList.vue b/packages/vue/src/components/SearchResultsList/SearchResultsList.vue
@@ -150,20 +150,25 @@ export default defineComponent({
                     : null
               const pageType = page._source[handle + '__label']
               if (handle === 'events_eventpage') {
+                // WWW Events
                 date = 'Event date: ' + parseDate(page._source[handle + '__start_datetime'])
               } else if (handle === 'edu_events_edueventpage') {
+                // EDU Events
                 date = null
                 location = page._source[handle + '__location_filter']
               } else if (handle === 'missions_mission') {
+                // WWW Missions
                 date = page._source.display_date_filter
                   ? 'Launch date: ' + page._source.display_date_filter
                   : typeof page._source.publication_date_filter !== 'undefined'
                     ? 'Published: ' + parseDate(page._source.publication_date_filter)
                     : 'Published: ' + parseDate(page._source.first_published_at_filter)
               } else if (handle === 'profiles_profilepage') {
+                // WWW Profiles
                 topic = page._source[handle + '__go_site_name']
                 date = null
               } else if (handle.startsWith('edu_resources')) {
+                // EDU Resources
                 date = null
                 primarySubject = page._source[handle + '__primary_subject'] as PrimarySubjectObject
                 if (
@@ -178,6 +183,7 @@ export default defineComponent({
                 }
                 time = { time: page._source.activity_time_label_filter } as EduResourcesTime
               } else {
+                // Fallback publication date
                 date =
                   typeof page._source.publication_date_filter !== 'undefined'
                     ? parseDate(page._source.publication_date_filter)
@@ -195,11 +201,11 @@ export default defineComponent({
                 handle === 'events_eventpage' ? page._source[handle + '__location'] : location
               page.startDate =
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
-                  ? page._source[handle + '__start_datetime']
+                  ? page._source[handle + '__start_date']
                   : null
               page.endDate =
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
-                  ? page._source[handle + '__end_datetime']
+                  ? page._source[handle + '__end_date']
                   : null
               page.startTime =
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'