feat: fixed fragment image issue and combined the queries and fixed u…

…ndefined errors in the template
UCLALibrary · Jul 3, 2024 · ccf3e5b · ccf3e5b
1 parent 4a10f4e
commit ccf3e5b
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 98 deletions.
diff --git a/gql/queries/FTVAEventDetail.gql b/gql/queries/FTVAEventDetail.gql
@@ -1,6 +1,6 @@
 #import "../gql/fragments/Image.gql"
 query FTVAEventDetail($slug: [String!]) {
-  entry(section: "ftvaEvent", slug: $slug) {
+  ftvaEvent: entry(section: "ftvaEvent", slug: $slug) {
     id
     typeHandle
     title:eventTitle
@@ -59,4 +59,26 @@ query FTVAEventDetail($slug: [String!]) {
       }
     }
   }
+  ftvaEventSeries: entries(
+    section: "ftvaEventSeries"
+    relatedToEntries: {section: "ftvaEvent", slug: $slug}) {
+    ... on ftvaEventSeries_eventSeries_Entry {
+      id
+      slug
+      typeHandle
+      title
+      ftvaEvent {
+        ... on ftvaEvent_ftvaEvent_Entry {
+        id
+        title
+        startDate: startDateWithTime @formatDateTime(format: "Y-m-d", timezone: "America/Los_Angeles")
+        startTime: startDateWithTime @formatDateTime(format: "TH:i:s", timezone: "America/Los_Angeles")
+
+          ftvaImage {
+            ...Image
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/gql/queries/FTVAEventDetailSeries.gql b/gql/queries/FTVAEventDetailSeries.gql
@@ -21,13 +21,3 @@ query FTVADetailSeries($slug: [String!]) {
     }
   }
 }
-
-fragment Image on AssetInterface {
-  id
-  src: url(transform: "fullscreen")
-  height(transform: "fullscreen")
-  width(transform: "fullscreen")
-  srcset(sizes: ["375", "960", "1280", "1920", "2560"])
-  alt: altText
-  focalPoint
-}
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -47,29 +47,9 @@ export default defineNuxtConfig({
         } */
         console.log('prerender:generate', route)
       },
-      async 'prerender:routes'(routes) {
-        const allRoutes = []
-
-        const response = await fetch(process.env.CRAFT_ENDPOINT, {
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          method: 'POST',
-          body: JSON.stringify({ query: 'query AllPages { entries { uri, sectionHandle } }' })
-        })
-
-        const postPages = await response.json()
-        // console.log('All pages', JSON.stringify(postPages.data.entries))
-        if (postPages && postPages.data && postPages.data.entries) {
-          const postWithoutPayloadRoutes = postPages.data.entries.filter(item => item.sectionHandle.includes('ftva')).map(entry => '/' + entry.uri.replace(/^ftva\//, ''))
-          allRoutes.push(...postWithoutPayloadRoutes)
-        }
-
-        if (allRoutes.length) {
-          for (const route of allRoutes) {
-            routes.add(route)
-          }
-        }
+      'prerender:routes'(routes) {
+        // const allRoutes = []
+
         console.log('prerender:routes ctx.routes', routes)
       }
     },

diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
@@ -8,8 +8,6 @@ import _get from 'lodash/get'
 // GQL
 import FTVAEventDetail from '../gql/queries/FTVAEventDetail.gql'
 
-import FTVAEventDetailSeries from '../gql/queries/FTVAEventDetailSeries.gql'
-
 const { $graphql } = useNuxtApp()
 
 const route = useRoute()
@@ -18,14 +16,27 @@ const route = useRoute()
 const { data, error } = await useAsyncData(`events-detail-${route.params.slug}`, async () => {
   const data = await $graphql.default.request(FTVAEventDetail, { slug: route.params.slug })
 
-  // const ftvaEventSeries = await $graphql.default.request(FTVAEventDetailSeries, { slug: route.params.slug })
   // return { data, ftvaEventSeries }
   return data
 })
+if (error.value) {
+  throw createError({
+    ...error.value, statusMessage: 'Page not found.' + error.value, fatal: true
+  })
+}
+
+if (!data.value.ftvaEvent) {
+  // console.log('no data')
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page Not Found',
+    fatal: true
+  })
+}
 
 // const breadcrumbs = page.title
 // const page = ref(_get(data.value.single, 'entry', {}))
-const page = data.value.entry
+const page = data.value.ftvaEvent
 
 // Banner Header
 const imageCarousel = page.imageCarousel
@@ -41,26 +52,11 @@ const blockInfo = page.ftvaTicketInformation
 const eventDetailDateTime = page.startDateWithTime
 const eventDetailLocation = page.location
 
-if (error.value) {
-  throw createError({
-    ...error.value, statusMessage: 'Page not found.' + error.value, fatal: true
-  })
-}
-
-if (!data.value.entry) {
-  // console.log('no data')
-  throw createError({
-    statusCode: 404,
-    statusMessage: 'Page Not Found',
-    fatal: true
-  })
-}
-
 // const page = ref(data.value)
-// watch(data, (newVal, oldVal) => {
-//   console.log('In watch preview enabled, newVal, oldVal', newVal, oldVal)
-//   page.value = newVal
-// })
+watch(data, (newVal, oldVal) => {
+  console.log('In watch preview enabled, newVal, oldVal', newVal, oldVal)
+  page.value = newVal
+})
 
 </script>
 
@@ -69,23 +65,23 @@ if (!data.value.entry) {
     id="main"
     class="page page-event-detail"
   >
-    <h3>ftvaEventSeries:::{{ ftvaEventSeries }}</h3>
-    <!-- SERIES {{ data }} -->
+    <h3>ftvaEventSeries</h3>
+    <code> {{ data.ftvaEventSeries }} </code>
 
     <!-- <h5>PAGE {{ page }}</h5> -->
 
     <!--section-->
 
     <h2>NavBreadcrumb</h2>
-    <!--
-    <nav-breadcrumb
+
+    <NavBreadcrumb
       v-if="page"
       :title="page.title"
       class="breadcrumb"
-      :to="parseParentPageURL"
-      :parent-title="parseParentTitle"
+      to="/events"
+      parent-title="All Events"
     />
-     -->
+
     <h3>eventTitle: {{ eventTitle }}</h3>
 
     <!-- ********** -->
@@ -102,9 +98,12 @@ if (!data.value.entry) {
     />
     -->
     <p><strong>Image:</strong> </p>
-    {{ imageCarousel[0].image }}
-    <p><strong>Credit:</strong> {{ imageCarousel[0].creditText }}</p>
-    <!-- if {{ imageCarousel.length > 1}} -->
+    {{ imageCarousel && imageCarousel.length > 0 ? imageCarousel[0]?.image : "No Image" }}
+    <p>
+      <strong>Credit:</strong> {{ imageCarousel && imageCarousel.length > 0 ? imageCarousel[0]?.creditText : "No Image"
+      }}
+    </p>
+    <!-- if {{ imageCarousel?.length > 1}} -->
     <h2>ImageCarousel</h2>
     <p>{{ imageCarousel }}</p>
 
@@ -125,33 +124,50 @@ if (!data.value.entry) {
 
     <!-- screeningDetails is an Array
       One event can have ONE screening OR multiple Screenings -->
-
-    <h4>screeningDetails{{ screeningDetails }}</h4>
-    <p><strong>Title: </strong> {{ screeningDetails[0].screeningTitle }}</p>
-    <p><strong>AlternativeTitle: </strong> {{ screeningDetails[0].alternateTitle }}</p>
-
-    <p><strong>Inline value of lang atribute for alternateTitle: </strong> {{ screeningDetails[0].languageTranslated }}
-    </p>
-
-    <p><strong>Year: </strong> {{ screeningDetails[0].year }}</p>
-
-    <p><strong>Country: </strong> {{ screeningDetails[0].country }}</p>
-    <p><strong>Language: </strong> {{ screeningDetails[0].languageInfo }}</p>
-    <p><strong>Runtime: </strong> {{ screeningDetails[0].runtime }}</p>
-
-    <p><strong>ScreeningTags: </strong> {{ screeningDetails[0].screeningTags[0].title }}</p> Array
-    <p><strong>descriptionOfScreening: </strong> {{ screeningDetails[0].descriptionOfScreening }}</p>
-
-
+    <h4>screeningDetails</h4>
+    <div v-if="screeningDetails && screeningDetails.length > 0">
+      <p>
+        <strong>Title: </strong> {{ screeningDetails && screeningDetails.length > 0 ?
+          screeningDetails[0].screeningTitle
+          :
+          "No screening title" }}
+      </p>
+      <p>
+        <strong>AlternativeTitle: </strong> {{ screeningDetails && screeningDetails.length > 0 ?
+          screeningDetails[0].alternateTitle : "No screening details" }}
+      </p>
+
+      <p>
+        <!-- use  a v-for for avoinding undefined errors-->
+        <strong>Inline value of lang atribute for alternateTitle: </strong> {{ screeningDetails &&
+          screeningDetails.length
+          > 0 ? screeningDetails[0].languageTranslated : "No screening detail for this event" }}
+      </p>
+
+      <p><strong>Year: </strong> {{ screeningDetails[0].year }}</p>
+
+      <p><strong>Country: </strong> {{ screeningDetails[0].country }}</p>
+      <p><strong>Language: </strong> {{ screeningDetails[0].languageInfo }}</p>
+      <p><strong>Runtime: </strong> {{ screeningDetails[0].runtime }}</p>
+
+      <p>
+        <strong>ScreeningTags: </strong>
+      <p v-if="screeningDetails[0].screeningTags && screeningDetails[0].screeningTags.length > 0">
+        {{ screeningDetails[0].screeningTags[0].title }}
+      </p>
+      </p> Array
+      <p><strong>descriptionOfScreening: </strong> {{ screeningDetails[0].descriptionOfScreening }}</p>
+    </div>
     <h2>SideBar</h2>
     <h3>BlockEventDetailDateTime</h3>
-    <h4>Date: {{ startDate }}</h4>
-    <h4>Time: {{ startTime }}</h4>
-
-    <h3>eventDetailLocation: {{ eventDetailLocation }}</h3>// title/uri
-    <h4>eventDetailLocation Title: {{ eventDetailLocation[0].title }}</h4>
-    <h4>eventDetail Uri: {{ eventDetailLocation[0].uri }}</h4>
+    <div v-if="eventDetailLocation && eventDetailLocation.length > 0">
+      <h4>Date: {{ startDate }}</h4>
+      <h4>Time: {{ startTime }}</h4>
 
+      <h3>eventDetailLocation: {{ eventDetailLocation }}</h3>// title/uri
+      <h4>eventDetailLocation Title: {{ eventDetailLocation[0].title }}</h4>
+      <h4>eventDetail Uri: {{ eventDetailLocation[0].uri }}</h4>
+    </div>
     <!------>
     <h3>InfoBlock</h3>
     <h4>blockInfo: {{ blockInfo }}</h4>Arrray
@@ -160,7 +176,8 @@ if (!data.value.entry) {
 
     If this event is part of an EventSeries display other events in the same series.
     <!-- {{ series }} -->
-    <div>More in this series
+    <div>
+      More in this series
       <div>CardWithImage</div>
       <div>
         <!-- {{ series }} Array -->
@@ -184,6 +201,5 @@ if (!data.value.entry) {
         "typeHandle": "screeningDetails"
       }
     -->
-
   </main>
 </template>
diff --git a/pages/events/index.vue b/pages/events/index.vue
@@ -11,7 +11,6 @@ const { data, error } = await useAsyncData('event-list', async () => {
   return data
 })
 
-
 if (error.value) {
   throw createError({
     ...error.value, statusMessage: 'Page not found.' + error.value, fatal: true
@@ -27,7 +26,6 @@ if (!data.value.entries) {
   })
 }
 
-
 </script>
 <template>
   <div
@@ -40,10 +38,10 @@ if (!data.value.entries) {
       v-for="event in data.entries"
       :key="event.id"
     >
-      <NuxtLink :to="event.to">{{ event.title }}</NuxtLink> <br />
+      <NuxtLink :to="event.to">
+        {{ event.title }}
+      </NuxtLink> <br>
     </div>
-
-
   </div>
 </template>
 <style scoped>