From 5fe1819d8d63e4f4264cdfdd7a9614bf785bfd50 Mon Sep 17 00:00:00 2001
From: JenDiamond <thejendiamond@gmail.com>
Date: Thu, 8 Aug 2024 09:51:36 -0700
Subject: [PATCH 1/5] update query to fix the link (#17)

---
 gql/queries/FTVAEventDetail.gql | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gql/queries/FTVAEventDetail.gql b/gql/queries/FTVAEventDetail.gql
index 4d43c92..5d0e5fc 100644
--- a/gql/queries/FTVAEventDetail.gql
+++ b/gql/queries/FTVAEventDetail.gql
@@ -87,7 +87,7 @@ query FTVAEventDetail($slug: [String!]) {
       ftvaEvent {
         ... 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")

From c630b3ecca943ae589ecd9e310695861ee6a57bb Mon Sep 17 00:00:00 2001
From: Tinuola 'Tinu' Awopetu <24995224+tinuola@users.noreply.github.com>
Date: Thu, 8 Aug 2024 12:40:14 -0700
Subject: [PATCH 2/5] fix: remove fixed sizer height for embedded videos (#20)

Co-authored-by: tinuola <tinuola@users.noreply.github.com>
---
 pages/events/[slug].vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
index b187786..57c6cbe 100644
--- a/pages/events/[slug].vue
+++ b/pages/events/[slug].vue
@@ -187,10 +187,7 @@ const parsedFTVAEventScreeningDetails = computed(() => {
   </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 +250,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%;

From 5b145011dcc37b49cf9aa4b4b129a3215a6a845a Mon Sep 17 00:00:00 2001
From: JenDiamond <thejendiamond@gmail.com>
Date: Fri, 9 Aug 2024 10:51:55 -0700
Subject: [PATCH 3/5] chore: Update library components to version 3.6.4 (#24)

* update library components to version 3.6.4

* update breadcrum component with thetitle field
---
 package.json            |  2 +-
 pages/events/[slug].vue | 10 +++++--
 pnpm-lock.yaml          | 60 +++++++++++++++++++++++++++++++++++++----
 3 files changed, 64 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 665f06f..fad1566 100644
--- a/package.json
+++ b/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"
 	}
 }
diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
index 57c6cbe..1598823 100644
--- a/pages/events/[slug].vue
+++ b/pages/events/[slug].vue
@@ -98,7 +98,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"
@@ -187,7 +190,10 @@ const parsedFTVAEventScreeningDetails = computed(() => {
   </main>
 </template>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 // VARS - TO DO move to global? reference tokens?
 // WIDTH, HEIGHT, SPACING
 $max-width: 1160px;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5e81ae..50d4bad 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,8 +68,8 @@ devDependencies:
     specifier: ^5.20.0
     version: 5.20.0
   ucla-library-website-components:
-    specifier: 3.5.7
-    version: 3.5.7(typescript@5.4.5)(vue@3.4.31)
+    specifier: 3.6.4
+    version: 3.6.4(typescript@5.4.5)(vue@3.4.31)
 
 packages:
 
@@ -3839,6 +3839,17 @@ packages:
       - vue
     dev: true
 
+  /@vueuse/components@10.11.1(vue@3.4.31):
+    resolution: {integrity: sha512-ThcreQCX/eq61sLkLKjigD4PQvs3Wy4zglICvQH9tP6xl87y5KsQEoizn6OI+R3hrOgwQHLJe7Y0wLLh3fBKcg==}
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.4.31)
+      '@vueuse/shared': 10.11.1(vue@3.4.31)
+      vue-demi: 0.14.8(vue@3.4.31)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@vueuse/core@10.10.0(vue@3.4.31):
     resolution: {integrity: sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==}
     dependencies:
@@ -3851,6 +3862,18 @@ packages:
       - vue
     dev: true
 
+  /@vueuse/core@10.11.1(vue@3.4.31):
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.4.31)
+      vue-demi: 0.14.8(vue@3.4.31)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@vueuse/integrations@10.10.0(focus-trap@7.5.4)(vue@3.4.31):
     resolution: {integrity: sha512-vHGeK7X6mkdkpcm1eE9t3Cpm21pNVfZRwrjwwbrEs9XftnSgszF4831G2rei8Dt9cIYJIfFV+iyx/29muimJPQ==}
     peerDependencies:
@@ -3905,6 +3928,10 @@ packages:
     resolution: {integrity: sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==}
     dev: true
 
+  /@vueuse/metadata@10.11.1:
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+    dev: true
+
   /@vueuse/nuxt@10.10.0(nuxt@3.12.3)(vue@3.4.31):
     resolution: {integrity: sha512-l8uFNuFASmcjPEaKAbigUrQZDtVQ9wRTfbuIBEpr3oAGnYtXGwBoQqYGnZopUR1Kdh8qiurpKuwvzVQnrzDjyw==}
     peerDependencies:
@@ -3932,6 +3959,15 @@ packages:
       - vue
     dev: true
 
+  /@vueuse/shared@10.11.1(vue@3.4.31):
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+    dependencies:
+      vue-demi: 0.14.8(vue@3.4.31)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@webassemblyjs/ast@1.12.1:
     resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==}
     dependencies:
@@ -4108,6 +4144,13 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  /add-to-calendar-button@2.6.18:
+    resolution: {integrity: sha512-GFQma8kcmE50fGXh1P5yv1MyILa8MJj/Wvr8w9y9JsDqVXPUAYjOP0c3AvENzKOSV2HgxtKxwSUfub8odklKhQ==}
+    engines: {node: '>=18.17.0', npm: '>=9.6.7'}
+    dependencies:
+      timezones-ical-library: 1.8.3
+    dev: true
+
   /agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -9791,6 +9834,11 @@ packages:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     dev: true
 
+  /timezones-ical-library@1.8.3:
+    resolution: {integrity: sha512-aXpr/l5Vxfrpf2s9OUoS8Qoj+DG9ykq1YWMzWk4tG1TwxKLnrFWiAgOKrQbBtPEynVtkU1aB1TftTX/SkvSzdQ==}
+    engines: {node: '>=18.17.0', npm: '>=9.6.7'}
+    dev: true
+
   /tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -9954,13 +10002,15 @@ packages:
     resolution: {integrity: sha512-dQv1OVx8RBSep08AvCI3Tu6F73iuPk98bYrjYnmJh22dOTj9zpF4b7e/iuPLr7413egZjGJ5jzLb9WbR8DjZOw==}
     dev: true
 
-  /ucla-library-website-components@3.5.7(typescript@5.4.5)(vue@3.4.31):
-    resolution: {integrity: sha512-I77MvmHqio/fZij0SHMkNMCxdXn3JPM/syXxXISPCWLyrZzOvw4J42xDJ5By+s/ILUxFIQoddnShvvbfxEKezg==}
+  /ucla-library-website-components@3.6.4(typescript@5.4.5)(vue@3.4.31):
+    resolution: {integrity: sha512-RkAJl3XLDK6e226B69ozVvyBicXGoNbVMGTEWpqhL7xazxyyho/eHwCp/rpeE9Bi/Ldh43O7c9JIcbPloXOY1w==}
     peerDependencies:
       vue: ^3.4.29
     dependencies:
       '@vuepic/vue-datepicker': 8.7.0(vue@3.4.31)
-      '@vueuse/core': 10.10.0(vue@3.4.31)
+      '@vueuse/components': 10.11.1(vue@3.4.31)
+      '@vueuse/core': 10.11.1(vue@3.4.31)
+      add-to-calendar-button: 2.6.18
       date-fns: 2.30.0
       lodash: 4.17.21
       pinia: 2.1.7(typescript@5.4.5)(vue@3.4.31)

From b5d5021a51db7c325abdc51d621985b4ff1a6044 Mon Sep 17 00:00:00 2001
From: Tinuola 'Tinu' Awopetu <24995224+tinuola@users.noreply.github.com>
Date: Fri, 9 Aug 2024 12:33:01 -0700
Subject: [PATCH 4/5] fix: APPS-2878 Show Only Upcoming Events in a Series
 (#25)

* update gql query

* update series logic to only show upcoming events

---------

Co-authored-by: tinuola <tinuola@users.noreply.github.com>
---
 gql/queries/FTVAEventDetail.gql |  2 +-
 pages/events/[slug].vue         | 52 ++++++++++++++++++---------------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/gql/queries/FTVAEventDetail.gql b/gql/queries/FTVAEventDetail.gql
index 5d0e5fc..63863d2 100644
--- a/gql/queries/FTVAEventDetail.gql
+++ b/gql/queries/FTVAEventDetail.gql
@@ -84,7 +84,7 @@ query FTVAEventDetail($slug: [String!]) {
       slug
       typeHandle
       title
-      ftvaEvent {
+      ftvaEvent(startDateWithTime: ">= now") {
         ... on ftvaEvent_ftvaEvent_Entry {
           id
           to: slug
diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
index 1598823..883d114 100644
--- a/pages/events/[slug].vue
+++ b/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(() => {
@@ -177,12 +184,12 @@ 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>
@@ -190,10 +197,7 @@ const parsedFTVAEventScreeningDetails = computed(() => {
   </main>
 </template>
 
-<style
-  lang="scss"
-  scoped
->
+<style lang="scss" scoped>
 // VARS - TO DO move to global? reference tokens?
 // WIDTH, HEIGHT, SPACING
 $max-width: 1160px;

From 3560fc19db32a595cb8df7fde747854bd4cd0fbc Mon Sep 17 00:00:00 2001
From: Tinuola 'Tinu' Awopetu <24995224+tinuola@users.noreply.github.com>
Date: Fri, 9 Aug 2024 13:35:28 -0700
Subject: [PATCH 5/5] temporarily disable image query (#26)

Co-authored-by: tinuola <tinuola@users.noreply.github.com>
---
 gql/queries/FTVAEventList.gql       | 8 ++++----
 gql/queries/FTVAEventSeriesList.gql | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/gql/queries/FTVAEventList.gql b/gql/queries/FTVAEventList.gql
index 01487d5..19aeaf6 100644
--- a/gql/queries/FTVAEventList.gql
+++ b/gql/queries/FTVAEventList.gql
@@ -1,4 +1,4 @@
-#import "../gql/fragments/Image.gql"
+# import "../gql/fragments/Image.gql"
 
 query FTVAEventList {
   entries(section: ["ftvaEvent"], orderBy: "postDate") {
@@ -6,9 +6,9 @@ query FTVAEventList {
     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")
diff --git a/gql/queries/FTVAEventSeriesList.gql b/gql/queries/FTVAEventSeriesList.gql
index 7e2655e..8392438 100644
--- a/gql/queries/FTVAEventSeriesList.gql
+++ b/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")
     }