Skip to content

Commit 83f953c

Browse files
farosFreedJess Divers
farosFreed
and
Jess Divers
authored
feat: APPS-3093 finish LA Rebellion Filmmakers Detail page (#100)
* feat: add styles and cypress tests * feat: fix tests & indexing * feat: placeholder index page * fix: lint * feat: rough index page * feat: add links to index for crawling * fix: update test * chore: update package * fix: image gql * fix: style tweaks * chore: remove extra comments * feat: update links * chore: fix typo * fix: update cypress test * chore: restore la-rebellion route for now --------- Co-authored-by: Jess Divers <[email protected]>
1 parent 1a52187 commit 83f953c

File tree

7 files changed

+236
-66
lines changed

7 files changed

+236
-66
lines changed

‎cypress/e2e/larebellionfilmmakers.cy.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
describe('Filmmakers Detail Page', () => {
2+
it('Visits the LA Rebellion Filmmaker Detail page', () => {
3+
cy.visit('/collections/la-rebellion/filmmakers/test-person')
4+
5+
cy.percySnapshot('larebellionfilmmakersdetail', { widths: [768, 992, 1200] })
6+
})
7+
})

‎gql/queries/FTVALARebellionFilmmakersDetail.gql

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
query FTVALARebellionFilmmakersDetail($slug: [String!]) {
44
ftvaLARebellionIndividual: entry(section: "ftvaLARebellionIndividual", slug: $slug) {
55
id
6+
title
67
typeHandle
78
sectionHandle
89
slug
@@ -25,8 +26,10 @@ query FTVALARebellionFilmmakersDetail($slug: [String!]) {
2526
}
2627

2728
associatedFilms {
28-
image {
29-
...Image
29+
... on associatedFilms_film_BlockType {
30+
image {
31+
...Image
32+
}
3033
}
3134
titleGeneral
3235
description

‎gql/queries/FTVALARebellionFilmmakersList.gql

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
query FTVALARebellionFilmmakersList {
2+
entry(section: ["ftvaListingLaRebellionFilmmakers"]) {
3+
id
4+
typeHandle
5+
sectionHandle
6+
titleGeneral
7+
summary
8+
displaySummary
9+
}
10+
entries(section: ["ftvaLARebellionIndividual"], orderBy: "postDate DESC") {
11+
id
12+
to: uri
13+
typeHandle
14+
sectionHandle
15+
title
16+
richText
17+
associatedFilms {
18+
titleGeneral
19+
}
20+
}
21+
}

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@
4242
"nuxt-graphql-request": "^7.0.5",
4343
"sass": "^1.66.1",
4444
"ucla-library-design-tokens": "^5.28.0",
45-
"ucla-library-website-components": "3.43.7"
45+
"ucla-library-website-components": "3.44.0"
4646
},
4747
"engines": {
4848
"pnpm": "^9.12.1"
4949
}
50-
}
50+
}

‎pages/collections/la-rebellion/filmmakers/[slug].vue

Lines changed: 92 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// COMPONENT RE-IMPORTS
33
// TODO: remove when we have implemented component library as a module
44
// https://nuxt.com/docs/guide/directory-structure/components#library-authors
5-
import { BlockTag, ButtonDropdown, CardMeta, DividerWayFinder, FlexibleMediaGalleryNewLightbox, NavBreadcrumb, ResponsiveImage, RichText, SectionScreeningDetails, SectionTeaserCard, SectionStaffSubjectLibrarian, SectionWrapper, TwoColLayoutWStickySideBar } from 'ucla-library-website-components'
5+
import { BlockTag, ButtonDropdown, CardMeta, FlexibleMediaGalleryNewLightbox, NavBreadcrumb, ResponsiveImage, RichText, SectionStaffSubjectLibrarian, SectionWrapper, TwoColLayoutWStickySideBar } from 'ucla-library-website-components'
66
77
// HELPERS
88
import _get from 'lodash/get'
@@ -39,7 +39,7 @@ if (!data.value.ftvaLARebellionIndividual) {
3939
}
4040
4141
// This is creating an index of the content for ES search
42-
if (data.value.ftvaEvent && import.meta.prerender) {
42+
if (data.value.ftvaLARebellionIndividual && import.meta.prerender) {
4343
try {
4444
// Call the composable to use the indexing function
4545
const { indexContent } = useContentIndexer()
@@ -52,13 +52,10 @@ if (data.value.ftvaEvent && import.meta.prerender) {
5252
}
5353
5454
const page = ref(_get(data.value, 'ftvaLARebellionIndividual', {}))
55-
// TODO refactor for filmography data ? Delete if not needed
56-
// const series = ref(_get(data.value, 'ftvaEventSeries', {}))
5755
5856
watch(data, (newVal, oldVal) => {
5957
// console.log('In watch preview enabled, newVal, oldVal', newVal, oldVal)
6058
page.value = _get(newVal, 'ftvaLARebellionIndividual', {})
61-
// series.value = _get(newVal, 'ftvaEventSeries', {})
6259
})
6360
6461
// Get data for Image or Carousel at top of page
@@ -77,13 +74,40 @@ const parsedCarouselData = computed(() => {
7774
})
7875
})
7976
77+
const parsedAssociatedFilms = computed(() => {
78+
if (page.value.associatedFilms.length === 0) return []
79+
return page.value.associatedFilms.map((obj) => {
80+
// console.log('obj link', obj.filmLink)
81+
const newFilmLink = ['/', obj.filmLink[0].uri].join('')
82+
// console.log('newFilmLink', newFilmLink)
83+
// console.log('new obj', {
84+
// ...obj,
85+
// filmLink: [
86+
// {
87+
// ...obj.filmLink[0],
88+
// uri: newFilmLink
89+
// }
90+
// ]
91+
// })
92+
return {
93+
...obj,
94+
filmLink: [
95+
{
96+
...obj.filmLink[0],
97+
uri: newFilmLink
98+
}
99+
]
100+
}
101+
})
102+
})
103+
80104
useHead({
81105
title: page.value ? page.value.title : '... loading',
82106
meta: [
83107
{
84108
hid: 'description',
85109
name: 'description',
86-
content: removeTags(page.value.text)
110+
content: removeTags(page.value.richText)
87111
}
88112
]
89113
})
@@ -92,7 +116,7 @@ useHead({
92116
<template>
93117
<main
94118
id="main"
95-
class="page page-detail page-event-detail"
119+
class="page page-detail page-filmmaker-detail"
96120
>
97121
<div class="one-column">
98122
<NavBreadcrumb
@@ -138,69 +162,80 @@ useHead({
138162
class="two-column"
139163
>
140164
<template #primaryTop>
141-
<!-- <CardMeta
165+
<CardMeta
142166
data-test="text-block"
167+
category="L.A. Rebellion"
143168
:title="page?.title"
144-
> -->
145-
{{ page }}
169+
>
170+
<template #sharebutton>
171+
<ButtonDropdown
172+
data-test="share-button"
173+
button-title="Share"
174+
:has-icon="true"
175+
:dropdown-list="socialList.dropdownList"
176+
/>
177+
</template>
178+
</CardMeta>
179+
<RichText :rich-text-content="page?.richText" />
146180
</template>
147181
</TwoColLayoutWStickySideBar>
148182
149-
<!-- TODO: add conditional render once vars exist
150-
v-if="parsedFilmography && parsedFilmography.length > 0" -->
151183
<SectionWrapper
184+
v-if="parsedAssociatedFilms && parsedAssociatedFilms.length > 0"
152185
section-title="Filmography"
153186
theme="paleblue"
154-
class="series-section-wrapper"
187+
class="filmography-section-wrapper"
155188
>
156-
<!-- <SectionStaffSubjectLibrarian /> -->
189+
<section-staff-subject-librarian
190+
:items="page.associatedFilms"
191+
:table-headers="['', 'Film', 'Role', 'Year']"
192+
/>
157193
</SectionWrapper>
158194
</main>
159195
</template>
160196
161197
<style lang="scss" scoped>
162-
// PAGE STYLES - USE OLD STYLES
163-
// .page-event-detail {
164-
// position: relative;
165-
166-
// .two-column {
167-
168-
// .ftva.button-dropdown {
169-
// margin-top: 30px;
170-
// }
171-
172-
// .ftva.block-info {
173-
// margin-top: 48px;
174-
// }
175-
176-
// // SECTION SCREENING DETAILS
177-
// // TODO when component is patched, remove styles?
178-
// :deep(figure.responsive-video:not(:has(.video-embed))) {
179-
// display: none;
180-
// }
181-
// }
182-
183-
// /* makes all EventSeries same height */
184-
// :deep(.card) {
185-
// min-height: 350px;
186-
// }
187-
188-
// @media (max-width: 1200px) {
189-
// :deep(.primary-column) {
190-
// width: 65%;
191-
// }
192-
// }
193-
194-
// @media (max-width: 899px) {
195-
// :deep(.primary-column) {
196-
// width: inherit;
197-
// }
198-
199-
// :deep(.block-tags) {
200-
// padding-top: 30px;
201-
// }
202-
// }
203-
// }
204-
205198
@import 'assets/styles/slug-pages.scss';
199+
200+
.page-filmmaker-detail {
201+
position: relative;
202+
203+
.two-column {
204+
205+
.ftva.button-dropdown {
206+
margin-top: 30px;
207+
}
208+
209+
.ftva.block-info {
210+
margin-top: 48px;
211+
}
212+
213+
// when two-column div is not followed by a filmography section
214+
&:last-child {
215+
// add 8px of space between the last element in the two-column div and the footer
216+
padding-bottom: 8px;
217+
}
218+
219+
// fix button scrolling over header
220+
:deep(.sharebutton-slot) {
221+
position: relative;
222+
z-index: 1;
223+
}
224+
}
225+
226+
// change filmography section title color
227+
:deep(.section-header) {
228+
229+
// reduce space below title by 12px on desktop (was 40px)
230+
@media #{$large} {
231+
margin-bottom: 28px;
232+
}
233+
234+
.section-title {
235+
color: #2f2f2f;
236+
}
237+
238+
font-weight: 800;
239+
}
240+
}
206241
</style>

‎pages/collections/la-rebellion/filmmakers/index.vue

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<script setup>
2+
// COMPONENTS
3+
import { DividerGeneral, SectionWrapper, RichText } from 'ucla-library-website-components'
4+
import { computed } from 'vue'
5+
6+
// HELPERS & UTILS
7+
import _get from 'lodash/get'
8+
import removeTags from '~/utils/removeTags'
9+
10+
// GQL
11+
import FTVALARebellionFilmmakersList from '~/gql/queries/FTVALARebellionFilmmakersList.gql'
12+
13+
const { $graphql } = useNuxtApp()
14+
15+
const { data, error } = await useAsyncData('la-rebellion-filmmakers', async () => {
16+
const data = await $graphql.default.request(FTVALARebellionFilmmakersList)
17+
// console.log('data', data)
18+
return data
19+
})
20+
21+
if (error.value) {
22+
throw createError({
23+
...error.value, statusMessage: 'Page not found.' + error.value, fatal: true
24+
})
25+
}
26+
27+
if (!data.value.entries) {
28+
// console.log('no data')
29+
throw createError({
30+
statusCode: 404,
31+
statusMessage: 'Page Not Found',
32+
fatal: true
33+
})
34+
}
35+
36+
// TODO This is creating an index of the content for ES search
37+
if (data.value.entry && import.meta.prerender) {
38+
try {
39+
// Call the composable to use the indexing function
40+
const { indexContent } = useContentIndexer()
41+
// Index the event data using the composable during static build
42+
await indexContent(data.value.entry, route.params.slug)
43+
44+
// TODO index entries as well?
45+
// await indexContent(data.value.entries, route.params.slug)
46+
47+
// console.log('Article indexed successfully during static build')
48+
} catch (error) {
49+
console.error('FAILED TO INDEX ARTICLES during static build:', error)
50+
}
51+
}
52+
53+
const page = ref(_get(data.value, 'entry', {}))
54+
const filmmakers = ref(_get(data.value, 'entries', []))
55+
56+
watch(data, (newVal, oldVal) => {
57+
// console.log('In watch preview enabled, newVal, oldVal', newVal, oldVal)
58+
page.value = _get(newVal, 'entry', {})
59+
filmmakers.value = _get(newVal, 'entries', [])
60+
})
61+
62+
const showSummary = computed(() => {
63+
return page.value?.summary && page.value?.displaySummary === 'yes'
64+
})
65+
useHead({
66+
title: page.value?.title || '... loading',
67+
meta: [
68+
{
69+
hid: 'description',
70+
name: 'description',
71+
content: removeTags(page.value.summary)
72+
}
73+
]
74+
})
75+
</script>
76+
77+
<template>
78+
<div
79+
class="page page-filmmakers"
80+
style="padding: 25px 100px;"
81+
>
82+
<section-wrapper section-title="LA Rebellion Filmmakers">
83+
<template v-if="showSummary">
84+
<RichText :rich-text-content="page.summary" />
85+
</template>
86+
<div
87+
v-for="filmmaker in filmmakers"
88+
:key="filmmaker?.id"
89+
>
90+
<NuxtLink :to="`/${filmmaker?.to}`">
91+
{{ filmmaker?.title }}
92+
</NuxtLink> <br>
93+
<h4>to: <code>{{ filmmaker?.to }}</code></h4>
94+
<h4>richText: <code>{{ filmmaker?.richText }}</code></h4>
95+
<h4>associatedFilms: <code>{{ filmmaker?.associatedFilms }}</code></h4>
96+
<divider-general />
97+
</div>
98+
</section-wrapper>
99+
</div>
100+
</template>
101+
102+
<style scoped>
103+
@import 'assets/styles/listing-pages.scss';
104+
</style>

0 commit comments

Comments
 (0)