From ccf3e5b0f3b43f8667165122ff37e8d7dc022de0 Mon Sep 17 00:00:00 2001 From: pghorpade Date: Wed, 3 Jul 2024 09:16:24 -0700 Subject: [PATCH] feat: fixed fragment image issue and combined the queries and fixed undefined errors in the template --- gql/queries/FTVAEventDetail.gql | 24 ++++- gql/queries/FTVAEventDetailSeries.gql | 10 -- nuxt.config.ts | 26 +---- pages/events/[slug].vue | 134 ++++++++++++++------------ pages/events/index.vue | 8 +- 5 files changed, 104 insertions(+), 98 deletions(-) diff --git a/gql/queries/FTVAEventDetail.gql b/gql/queries/FTVAEventDetail.gql index ffef41a..2a1b97b 100644 --- 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 index 475de90..65aa0f6 100644 --- 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 index 008081e..f0f7ba0 100644 --- 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 index f086621..9f8bf37 100644 --- 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 +}) @@ -69,23 +65,23 @@ if (!data.value.entry) { id="main" class="page page-event-detail" > -

ftvaEventSeries:::{{ ftvaEventSeries }}

- +

ftvaEventSeries

+ {{ data.ftvaEventSeries }}

NavBreadcrumb

- +

eventTitle: {{ eventTitle }}

@@ -102,9 +98,12 @@ if (!data.value.entry) { /> -->

Image:

- {{ imageCarousel[0].image }} -

Credit: {{ imageCarousel[0].creditText }}

- + {{ imageCarousel && imageCarousel.length > 0 ? imageCarousel[0]?.image : "No Image" }} +

+ Credit: {{ imageCarousel && imageCarousel.length > 0 ? imageCarousel[0]?.creditText : "No Image" + }} +

+

ImageCarousel

{{ imageCarousel }}

@@ -125,33 +124,50 @@ if (!data.value.entry) { - -

screeningDetails{{ screeningDetails }}

-

Title: {{ screeningDetails[0].screeningTitle }}

-

AlternativeTitle: {{ screeningDetails[0].alternateTitle }}

- -

Inline value of lang atribute for alternateTitle: {{ screeningDetails[0].languageTranslated }} -

- -

Year: {{ screeningDetails[0].year }}

- -

Country: {{ screeningDetails[0].country }}

-

Language: {{ screeningDetails[0].languageInfo }}

-

Runtime: {{ screeningDetails[0].runtime }}

- -

ScreeningTags: {{ screeningDetails[0].screeningTags[0].title }}

Array -

descriptionOfScreening: {{ screeningDetails[0].descriptionOfScreening }}

- - +

screeningDetails

+
+

+ Title: {{ screeningDetails && screeningDetails.length > 0 ? + screeningDetails[0].screeningTitle + : + "No screening title" }} +

+

+ AlternativeTitle: {{ screeningDetails && screeningDetails.length > 0 ? + screeningDetails[0].alternateTitle : "No screening details" }} +

+ +

+ + Inline value of lang atribute for alternateTitle: {{ screeningDetails && + screeningDetails.length + > 0 ? screeningDetails[0].languageTranslated : "No screening detail for this event" }} +

+ +

Year: {{ screeningDetails[0].year }}

+ +

Country: {{ screeningDetails[0].country }}

+

Language: {{ screeningDetails[0].languageInfo }}

+

Runtime: {{ screeningDetails[0].runtime }}

+ +

+ ScreeningTags: +

+ {{ screeningDetails[0].screeningTags[0].title }} +

+

Array +

descriptionOfScreening: {{ screeningDetails[0].descriptionOfScreening }}

+

SideBar

BlockEventDetailDateTime

-

Date: {{ startDate }}

-

Time: {{ startTime }}

- -

eventDetailLocation: {{ eventDetailLocation }}

// title/uri -

eventDetailLocation Title: {{ eventDetailLocation[0].title }}

-

eventDetail Uri: {{ eventDetailLocation[0].uri }}

+
+

Date: {{ startDate }}

+

Time: {{ startTime }}

+

eventDetailLocation: {{ eventDetailLocation }}

// title/uri +

eventDetailLocation Title: {{ eventDetailLocation[0].title }}

+

eventDetail Uri: {{ eventDetailLocation[0].uri }}

+

InfoBlock

blockInfo: {{ blockInfo }}

Arrray @@ -160,7 +176,8 @@ if (!data.value.entry) { If this event is part of an EventSeries display other events in the same series. -
More in this series +
+ More in this series
CardWithImage
@@ -184,6 +201,5 @@ if (!data.value.entry) { "typeHandle": "screeningDetails" } --> - diff --git a/pages/events/index.vue b/pages/events/index.vue index ee27631..fea623c 100644 --- 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) { }) } -