generated from UCLALibrary/nuxt3-starter-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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]>
- Loading branch information
1 parent
1a52187
commit 83f953c
Showing
7 changed files
with
236 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| describe('Filmmakers Detail Page', () => { | ||
| it('Visits the LA Rebellion Filmmaker Detail page', () => { | ||
| cy.visit('/collections/la-rebellion/filmmakers/test-person') | ||
|
|
||
| cy.percySnapshot('larebellionfilmmakersdetail', { widths: [768, 992, 1200] }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| query FTVALARebellionFilmmakersList { | ||
| entry(section: ["ftvaListingLaRebellionFilmmakers"]) { | ||
| id | ||
| typeHandle | ||
| sectionHandle | ||
| titleGeneral | ||
| summary | ||
| displaySummary | ||
| } | ||
| entries(section: ["ftvaLARebellionIndividual"], orderBy: "postDate DESC") { | ||
| id | ||
| to: uri | ||
| typeHandle | ||
| sectionHandle | ||
| title | ||
| richText | ||
| associatedFilms { | ||
| titleGeneral | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| <script setup> | ||
| // COMPONENTS | ||
| import { DividerGeneral, SectionWrapper, RichText } from 'ucla-library-website-components' | ||
| import { computed } from 'vue' | ||
| // HELPERS & UTILS | ||
| import _get from 'lodash/get' | ||
| import removeTags from '~/utils/removeTags' | ||
| // GQL | ||
| import FTVALARebellionFilmmakersList from '~/gql/queries/FTVALARebellionFilmmakersList.gql' | ||
| const { $graphql } = useNuxtApp() | ||
| const { data, error } = await useAsyncData('la-rebellion-filmmakers', async () => { | ||
| const data = await $graphql.default.request(FTVALARebellionFilmmakersList) | ||
| // console.log('data', data) | ||
| return data | ||
| }) | ||
| if (error.value) { | ||
| throw createError({ | ||
| ...error.value, statusMessage: 'Page not found.' + error.value, fatal: true | ||
| }) | ||
| } | ||
| if (!data.value.entries) { | ||
| // console.log('no data') | ||
| throw createError({ | ||
| statusCode: 404, | ||
| statusMessage: 'Page Not Found', | ||
| fatal: true | ||
| }) | ||
| } | ||
| // TODO This is creating an index of the content for ES search | ||
| if (data.value.entry && import.meta.prerender) { | ||
| try { | ||
| // Call the composable to use the indexing function | ||
| const { indexContent } = useContentIndexer() | ||
| // Index the event data using the composable during static build | ||
| await indexContent(data.value.entry, route.params.slug) | ||
| // TODO index entries as well? | ||
| // await indexContent(data.value.entries, route.params.slug) | ||
| // console.log('Article indexed successfully during static build') | ||
| } catch (error) { | ||
| console.error('FAILED TO INDEX ARTICLES during static build:', error) | ||
| } | ||
| } | ||
| const page = ref(_get(data.value, 'entry', {})) | ||
| const filmmakers = ref(_get(data.value, 'entries', [])) | ||
| watch(data, (newVal, oldVal) => { | ||
| // console.log('In watch preview enabled, newVal, oldVal', newVal, oldVal) | ||
| page.value = _get(newVal, 'entry', {}) | ||
| filmmakers.value = _get(newVal, 'entries', []) | ||
| }) | ||
| const showSummary = computed(() => { | ||
| return page.value?.summary && page.value?.displaySummary === 'yes' | ||
| }) | ||
| useHead({ | ||
| title: page.value?.title || '... loading', | ||
| meta: [ | ||
| { | ||
| hid: 'description', | ||
| name: 'description', | ||
| content: removeTags(page.value.summary) | ||
| } | ||
| ] | ||
| }) | ||
| </script> | ||
| <template> | ||
| <div | ||
| class="page page-filmmakers" | ||
| style="padding: 25px 100px;" | ||
| > | ||
| <section-wrapper section-title="LA Rebellion Filmmakers"> | ||
| <template v-if="showSummary"> | ||
| <RichText :rich-text-content="page.summary" /> | ||
| </template> | ||
| <div | ||
| v-for="filmmaker in filmmakers" | ||
| :key="filmmaker?.id" | ||
| > | ||
| <NuxtLink :to="`/${filmmaker?.to}`"> | ||
| {{ filmmaker?.title }} | ||
| </NuxtLink> <br> | ||
| <h4>to: <code>{{ filmmaker?.to }}</code></h4> | ||
| <h4>richText: <code>{{ filmmaker?.richText }}</code></h4> | ||
| <h4>associatedFilms: <code>{{ filmmaker?.associatedFilms }}</code></h4> | ||
| <divider-general /> | ||
| </div> | ||
| </section-wrapper> | ||
| </div> | ||
| </template> | ||
| <style scoped> | ||
| @import 'assets/styles/listing-pages.scss'; | ||
| </style> |
Oops, something went wrong.
83f953cThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 Published on https://test-ftva.library.ucla.edu as production
🚀 Deployed on https://679bb1fe5f2a05a863a6dd53--test-ftva.netlify.app