Merge branch 'main' into APPS-2870_bug-text-is-truncated

gql/queries/FTVAEventDetail.gql

@@ -84,10 +84,10 @@ query FTVAEventDetail($slug: [String!]) {
       slug
       typeHandle
       title
-      ftvaEvent {
+      ftvaEvent(startDateWithTime: ">= now") {
         ... on ftvaEvent_ftvaEvent_Entry {
           id
-          to: uri
+          to: slug
           title: eventTitle
           startDate: startDateWithTime @formatDateTime(format: "Y-m-d", timezone: "America/Los_Angeles")
           startTime: startDateWithTime @formatDateTime(format: "TH:i:s", timezone: "America/Los_Angeles")

gql/queries/FTVAEventList.gql

@@ -1,14 +1,14 @@
-#import "../gql/fragments/Image.gql"
+# import "../gql/fragments/Image.gql"
 
 query FTVAEventList {
   entries(section: ["ftvaEvent"], orderBy: "postDate") {
     typeHandle
     id
     title: eventTitle
     to: uri
-    image: ftvaImage {
-      ...Image
-    }
+    # image: ftvaImage {
+    #  ...Image
+    # }
     startDateWithTime
     startDate: startDateWithTime @formatDateTime(format: "Y-m-d", timezone: "America/Los_Angeles")
     startTime: startDateWithTime @formatDateTime(format: "TH:i:s", timezone: "America/Los_Angeles")

gql/queries/FTVAEventSeriesList.gql

@@ -1,4 +1,4 @@
-#import "../gql/fragments/Image.gql"
+# import "../gql/fragments/Image.gql"
 
 query FTVAEventSeriesList {
   entries(section: ["ftvaEventSeries"], orderBy: "postDate") {
@@ -9,9 +9,9 @@ query FTVAEventSeriesList {
     ... on ftvaEventSeries_eventSeries_Entry {
       id
       eventDescription
-      image: ftvaImage {
-        ...Image
-      }
+      # image: ftvaImage {
+      #  ...Image
+      # }
       startDate @formatDateTime(format: "Y-m-d", timezone: "America/Los_Angeles")
       endDate @formatDateTime(format: "Y-m-d", timezone: "America/Los_Angeles")
     }

package.json

@@ -39,6 +39,6 @@
 		"nuxt-graphql-request": "^7.0.5",
 		"sass": "^1.66.1",
 		"ucla-library-design-tokens": "^5.20.0",
-		"ucla-library-website-components": "3.5.7"
+		"ucla-library-website-components": "3.6.4"
 	}
 }

pages/events/[slug].vue

@@ -17,7 +17,6 @@ const route = useRoute()
 // DATA
 const { data, error } = await useAsyncData(`events-detail-${route.params.slug}`, async () => {
   const data = await $graphql.default.request(FTVAEventDetail, { slug: route.params.slug })
-  console.log('data', data)
   return data
 })
 if (error.value) {
@@ -27,7 +26,6 @@ if (error.value) {
 }
 
 if (!data.value.ftvaEvent) {
-  // console.log('no data')
   throw createError({
     statusCode: 404,
     statusMessage: 'Page Not Found',
@@ -48,6 +46,7 @@ watch(data, (newVal, oldVal) => {
 const parsedImage = computed(() => {
   return page.value.imageCarousel
 })
+
 // Transform data for Carousel
 const parsedCarouselData = computed(() => {
   // map image to item, map creditText to credit
@@ -61,25 +60,33 @@ const parsedCarouselData = computed(() => {
   })
 })
 
-const pageId = computed(() => {
-  return page.value.id
-})
-
 const parsedFtvaEventSeries = computed(() => {
-  // const series = parsedFtvaEventSeries
-  const seriesEvents = series.value[0].ftvaEvent.map((obj) => {
-    return {
-      ...obj,
-      image: obj.image[0]
-    }
-  })
+  /* Early Returns: If series.value is falsy or empty, or
+    if firstSeries.ftvaEvent is falsy or empty, return
+    an empty array immediately. */
+  if (!series.value || series.value.length === 0) {
+    return []
+  }
+
+  const [firstSeries] = series.value
+
+  if (!firstSeries.ftvaEvent || firstSeries.ftvaEvent.length === 0) {
+    return []
+  }
+
+  // Destructure each series item object and its image object
+  const seriesEvents = firstSeries.ftvaEvent.map(({ image, ...rest }) => ({
+    ...rest,
+    image: image && image.length > 0 ? image[0] : null,
+  }))
 
   const pageId = page.value.id
-  const events = seriesEvents.filter((item) => {
-    return item.id !== pageId // remove this page's event from the series list to avoid duplicate info
-  })
-  // return first 3 events
-  return events.slice(0, 3)
+
+  // Return series without the page's featured event
+  const filteredEvents = seriesEvents.filter(({ id }) => id !== pageId)
+
+  // Return first 3 events
+  return filteredEvents.slice(0, 3)
 })
 
 const parsedFTVAEventScreeningDetails = computed(() => {
@@ -98,7 +105,10 @@ const parsedFTVAEventScreeningDetails = computed(() => {
     class="page page-event-detail"
   >
     <div class="one-column">
-      <NavBreadcrumb class="breadcrumb" />
+      <NavBreadcrumb
+        class="breadcrumb"
+        :title="page.title"
+      />
 
       <ResponsiveImage
         v-if="parsedImage.length === 1"
@@ -174,23 +184,20 @@ const parsedFTVAEventScreeningDetails = computed(() => {
     </div>
     <div class="full-width">
       <SectionWrapper
-        v-if="series && series.length > 0"
+        v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
         section-title="Upcoming events in this series"
         theme="paleblue"
       >
         <SectionTeaserCard
-          v-if="series && series.length > 0"
+          v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
           :items="parsedFtvaEventSeries"
         />
       </SectionWrapper>
     </div>
   </main>
 </template>
 
-<style
-  lang="scss"
-  scoped
->
+<style lang="scss" scoped>
 // VARS - TO DO move to global? reference tokens?
 // WIDTH, HEIGHT, SPACING
 $max-width: 1160px;
@@ -253,12 +260,6 @@ $pale-blue: #E7EDF2;
       display: none;
     }
 
-    :deep(figure.responsive-video) {
-      .sizer {
-        height: 568px; // TODO ask UX if FTVA videos on this page have fixed height or not
-      }
-    }
-
     .sidebar-column {
       min-width: 314px;
       width: 30%;