feat: APPS-2865 Create EventSeries detail page / slug template to verify gql query data (#31)

* get the data on the page!

* image carousel and responsive image working

* Card Meta working

* add link to series list page

* update component-library, design tokens & linting

* update the slug page name

* update query

* fix input of data

* update watch

* update page date visually on the page for clarity

* update breadcrumb with screening dettails

* recommended updates

* add h3 to to index

* cleanup

* cleanup

* resonsive image update

* fixed the page.value = _get(newVal

* update library components & linting

Author: jendiamond

gql/queries/FTVAEventDetailSeries.gql

@@ -0,0 +1,91 @@
+#import "../gql/fragments/Image.gql"
+
+query FTVAEventSeriesDetail ($slug: [String!]) {
+  ftvaEventSeries: entry(section: "ftvaEventSeries", slug: $slug) {
+    imageCarousel {
+      ... on imageCarousel_imageCarousel_BlockType {
+        image {
+          ...Image
+        }
+        creditText
+      }
+    }
+    title
+    guestSpeaker
+    ftvaEventIntroduction
+    eventDescription
+    richText
+    startDate
+    endDate
+    ongoing
+    location {
+      title
+      campusMapId
+      publicUrl
+      address {
+        addressLine1
+        addressLine2
+        addressCity
+        addressState
+        addressZipCode
+        addressCountry
+      }
+    }
+    ftvaTicketInformation {
+      title
+    }
+    ftvaEvent {
+      uri
+      eventTitle
+      startDateWithTime
+      ftvaImage {
+        ...Image
+      }
+      ftvaEventFilters {
+        title
+      }
+    }
+  }
+  upcomingEvents: entries(section: "ftvaEvent", relatedToEntries: { section: "ftvaEventSeries", slug: $slug }, startDateWithTime: ">= now", orderBy: "startDateWithTime ASC") {
+      uri
+      eventTitle
+      startDateWithTime
+      ftvaImage {
+        ...Image
+      }
+      ftvaEventFilters {
+        title
+      }
+  }
+  pastEvents: entries(section: "ftvaEvent", relatedToEntries: { section: "ftvaEventSeries", slug: $slug }, startDateWithTime: "< now", orderBy: "startDateWithTime ASC") {
+    uri
+    eventTitle
+    startDateWithTime
+    ftvaImage {
+      ...Image
+    }
+    ftvaEventFilters {
+      title
+    }
+  }
+  otherSeriesOngoing: entries(section: "ftvaEventSeries", limit: 3, ongoing: true) {
+    uri
+    title
+    startDate
+    endDate
+    ongoing
+    ftvaImage {
+      ...Image
+    }
+  }
+  otherSeriesUpcoming: entries(section: "ftvaEventSeries", limit: 3, endDate: ">=now", orderBy: "startDate ASC") {
+    uri
+    title
+    startDate
+    endDate
+    ongoing
+    ftvaImage {
+      ...Image
+    }
+  }
+}

gql/queries/FTVAEventSeriesDetail.gql

@@ -38,7 +38,7 @@
 		"lodash": "^4.17.21",
 		"nuxt-graphql-request": "^7.0.5",
 		"sass": "^1.66.1",
-		"ucla-library-design-tokens": "^5.20.0",
-		"ucla-library-website-components": "3.9.0"
+		"ucla-library-design-tokens": "^5.22.0",
+		"ucla-library-website-components": "3.10.0"
 	}
 }

package.json

@@ -132,7 +132,10 @@ onMounted(() => {
   </main>
 </template>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 .page-general-content {
   .section-banner {
     margin-top: 0;

pages/[...slug].vue.bak

@@ -38,8 +38,8 @@ const series = ref(_get(data.value, 'ftvaEventSeries', {}))
 
 watch(data, (newVal, oldVal) => {
   console.log('In watch preview enabled, newVal, oldVal', newVal, oldVal)
-  page.value = _get(data.value, 'ftvaEvent', {})
-  series.value = _get(data.value, 'ftvaEventSeries', {})
+  page.value = _get(newVal, 'ftvaEvent', {})
+  series.value = _get(newVal, 'ftvaEventSeries', {})
 })
 
 // Get data for Image or Carousel at top of page
@@ -219,7 +219,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;