From 77817ab74c2b821b955a2e110099070ac5e61cf9 Mon Sep 17 00:00:00 2001 From: Valentin Date: Fri, 15 Nov 2024 13:33:36 +0100 Subject: [PATCH] =?UTF-8?q?ajout=20partenaires=20et=20=C3=A9quipe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../caravane/assets/js/stores/content.js | 338 +++++++++++------- .../assets/js/utils/handle-navigation.js | 2 +- .../caravane/assets/js/vuejs/Modale.vue | 26 +- .../js/vuejs/components/EquipeContent.vue | 18 + .../js/vuejs/components/ModaleFooter.vue | 27 +- .../js/vuejs/components/ModaleHeader.vue | 4 +- .../vuejs/components/PartenairesContent.vue | 17 + .../custom/caravane/assets/scss/main.scss | 180 ++++++---- 8 files changed, 386 insertions(+), 226 deletions(-) create mode 100644 web/themes/custom/caravane/assets/js/vuejs/components/EquipeContent.vue create mode 100644 web/themes/custom/caravane/assets/js/vuejs/components/PartenairesContent.vue diff --git a/web/themes/custom/caravane/assets/js/stores/content.js b/web/themes/custom/caravane/assets/js/stores/content.js index 186d9ce..72154d1 100644 --- a/web/themes/custom/caravane/assets/js/stores/content.js +++ b/web/themes/custom/caravane/assets/js/stores/content.js @@ -25,157 +25,227 @@ export const useContentStore = defineStore('content', { actions: { async fetchContentData(path) { this.resetStore(false); - const contentTypes = [ 'etape', 'static' ]; + const contentTypes = [ 'etape', 'static', 'equipe', 'partenaires' ]; try { let rawContent, contentType, response; - - contentTypesLoop: - for (let type of contentTypes) { - response = await REST.get(`/jsonapi/node/${type}/`); - for (let content of response.data.data) { - for (let tag of content.attributes.metatag) { - if (tag.tag === "link" && tag.attributes.href === path) { - this.contentType = type; - rawContent = content; - contentType = type; - break contentTypesLoop; + contentTypesLoop: + for (let type of contentTypes) { + if (type !== 'partenaires') { + response = await REST.get(`/jsonapi/node/${type}/`); + for (let content of response.data.data) { + for (let tag of content.attributes.metatag) { + if (tag.tag === "link" && tag.attributes.href === path) { + this.contentType = type; + rawContent = content; + contentType = type; + break contentTypesLoop; + } + } + // pour les pages équipes + if (!rawContent) { + const baseUrl = window.location.protocol + "//" + window.location.host; + if (path.startsWith(baseUrl)) { + const shortenPath = path.slice(baseUrl.length + 1); + if (content.attributes.title.toLowerCase() === shortenPath) { + this.contentType = type; + rawContent = content; + contentType = type; + break contentTypesLoop; + } + } } } + } else { + console.log("partenaires"); + + // pour les pages partenaires + rawContent = await REST.get('/rest/partenaires/'); + contentType = type; + this.contentType = type; + } } - } - // pageTitle - for (let tag of rawContent.attributes.metatag) { - if (tag.tag === "meta") { - this.pageTitle = tag.attributes.content; - break; + + if (this.contentType !== 'equipe' && this.contentType !== 'partenaires') { + // pageTitle + for (let tag of rawContent.attributes.metatag) { + if (tag.tag === "meta") { + this.pageTitle = tag.attributes.content; + break; + } } - } - // contentTitle - this.content.contentTitle = rawContent.attributes.title; + // contentTitle + this.content.contentTitle = rawContent.attributes.title; - // vignette - const vignetteFetch = await this.fetchDeeperContent('field_vignette', rawContent.relationships); - if (vignetteFetch) { - this.content.vignette = { - url: vignetteFetch.attributes.uri.url, - alt: rawContent.relationships.field_vignette.data.meta.alt - }; - } - - if (contentType === 'etape') { - // coordinates - this.content.coordinates = { - lat: rawContent.attributes.field_geofield.lat, - lon: rawContent.attributes.field_geofield.lon, - }; - // adresse - this.content.adresse = rawContent.attributes.field_adresse; - // étape number - this.content.etape_number = rawContent.attributes.field_arret_numero; - // couleur - this.content.couleur = rawContent.attributes.field_couleur; - // dates - this.content.dates = { - start: this.getCleanDate(rawContent.attributes.field_dates.value), - end: this.getCleanDate(rawContent.attributes.field_dates.end_value), - } - // previous / next - await this.getRelatedEtape('previous', response.data.data, path); - await this.getRelatedEtape('next', response.data.data, path); - } - - // parties - const fieldParties = contentType === 'etape' ? 'field_parties' : 'field_parties_static'; - const partiesFetch = await this.fetchDeeperContent(fieldParties, rawContent.relationships); - - if (partiesFetch) { - this.content.parties = []; - for (let partie of partiesFetch) { - const partieType = partie.type.replace(/^paragraph--/, ""); - let partieContent = { - type: partieType, + // vignette + const vignetteFetch = await this.fetchFromRelationships('field_vignette', rawContent.relationships); + if (vignetteFetch) { + this.content.vignette = { + url: vignetteFetch.attributes.uri.url, + alt: rawContent.relationships.field_vignette.data.meta.alt }; + } - switch (partieType) { - case 'carte_sensible': - const carteSensibleFetch = await this.fetchDeeperContent('field_image_carte', partie.relationships); - if (carteSensibleFetch) { - partieContent.carteSensible = { - url: carteSensibleFetch.attributes.uri.url, - alt: partie.relationships.field_image_carte.data.meta.alt, - }; - } - break; - case 'titre_texte': - partieContent.titre = partie.attributes.field_titre; - partieContent.texte = partie.attributes.field_texte.value; - break; - case 'chiffres_cles': - const chiffresClesFetch = await this.fetchDeeperContent('field_chiffres_clefs', partie.relationships); - if (chiffresClesFetch) { - partieContent.chiffresCles = []; - for (let chiffre of chiffresClesFetch) { - partieContent.chiffresCles.push({ - chiffre: chiffre.attributes.field_chiffre, - description: chiffre.attributes.field_description, - }); + if (contentType === 'etape') { + // coordinates + this.content.coordinates = { + lat: rawContent.attributes.field_geofield.lat, + lon: rawContent.attributes.field_geofield.lon, + }; + // adresse + this.content.adresse = rawContent.attributes.field_adresse; + // étape number + this.content.etape_number = rawContent.attributes.field_arret_numero; + // couleur + this.content.couleur = rawContent.attributes.field_couleur; + // dates + this.content.dates = { + start: this.getCleanDate(rawContent.attributes.field_dates.value), + end: this.getCleanDate(rawContent.attributes.field_dates.end_value), + } + // previous / next + await this.getRelatedEtape('previous', response.data.data, path); + await this.getRelatedEtape('next', response.data.data, path); + } + + // parties + const fieldParties = contentType === 'etape' ? 'field_parties' : 'field_parties_static'; + const partiesFetch = await this.fetchFromRelationships(fieldParties, rawContent.relationships); + + if (partiesFetch) { + this.content.parties = []; + for (let partie of partiesFetch) { + const partieType = partie.type.replace(/^paragraph--/, ""); + let partieContent = { + type: partieType, + }; + + switch (partieType) { + case 'carte_sensible': + const carteSensibleFetch = await this.fetchFromRelationships('field_image_carte', partie.relationships); + if (carteSensibleFetch) { + partieContent.carteSensible = { + url: carteSensibleFetch.attributes.uri.url, + alt: partie.relationships.field_image_carte.data.meta.alt, + }; } - } - break; - case 'diaporama': - const diaporamaFetch = await this.fetchDeeperContent('field_diaporama', partie.relationships); - if (diaporamaFetch) { - partieContent.diaporama = []; - for (let [index, image] of diaporamaFetch.entries()) { - partieContent.diaporama.push({ - url: image.attributes.uri.url, - alt: partie.relationships.field_diaporama.data[index].meta.alt, - }); - } - } - break; - case 'entretien': - partieContent.entretien = {}; - const personnesFetch = await this.fetchDeeperContent('field_personne_s', partie.relationships); - const questionsReponsesFetch = await this.fetchDeeperContent('field_questions_reponses', partie.relationships); - if (personnesFetch && questionsReponsesFetch) { - partieContent.entretien.personnes = []; - for (let personne of personnesFetch) { - const portraitFetch = await this.fetchDeeperContent('field_portrait', personne.relationships); - if (portraitFetch) { - partieContent.entretien.personnes.push({ - portrait: portraitFetch.attributes.uri.url, - alt: personne.relationships.field_portrait.data.meta.alt, - description: personne.attributes.field_description, + break; + case 'titre_texte': + partieContent.titre = partie.attributes.field_titre; + partieContent.texte = partie.attributes.field_texte.value; + break; + case 'chiffres_cles': + const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships); + if (chiffresClesFetch) { + partieContent.chiffresCles = []; + for (let chiffre of chiffresClesFetch) { + partieContent.chiffresCles.push({ + chiffre: chiffre.attributes.field_chiffre, + description: chiffre.attributes.field_description, }); } } - partieContent.entretien.questionsReponses = []; - for (let qr of questionsReponsesFetch) { - partieContent.entretien.questionsReponses.push({ - question: qr.attributes.field_question, - reponse: qr.attributes.field_reponse.value, - }); + break; + case 'diaporama': + const diaporamaFetch = await this.fetchFromRelationships('field_diaporama', partie.relationships); + if (diaporamaFetch) { + partieContent.diaporama = []; + for (let [index, image] of diaporamaFetch.entries()) { + partieContent.diaporama.push({ + url: image.attributes.uri.url, + alt: partie.relationships.field_diaporama.data[index].meta.alt, + }); + } } - } - break; - case 'exergue': - partieContent.exergue = partie.attributes.field_texte_exergue.value; - break; - case 'video': - partieContent.videos = []; - for (let video of partie.attributes.field_videos) { - const videoId = video.split('?v=')[1]; - const videoUrl = `https://www.youtube.com/embed/${videoId}`; - partieContent.videos.push(videoUrl); - } - break; + break; + case 'entretien': + partieContent.entretien = {}; + const personnesFetch = await this.fetchFromRelationships('field_personne_s', partie.relationships); + const questionsReponsesFetch = await this.fetchFromRelationships('field_questions_reponses', partie.relationships); + if (personnesFetch && questionsReponsesFetch) { + partieContent.entretien.personnes = []; + for (let personne of personnesFetch) { + const portraitFetch = await this.fetchFromRelationships('field_portrait', personne.relationships); + if (portraitFetch) { + partieContent.entretien.personnes.push({ + portrait: portraitFetch.attributes.uri.url, + alt: personne.relationships.field_portrait.data.meta.alt, + description: personne.attributes.field_description, + }); + } + } + partieContent.entretien.questionsReponses = []; + for (let qr of questionsReponsesFetch) { + partieContent.entretien.questionsReponses.push({ + question: qr.attributes.field_question, + reponse: qr.attributes.field_reponse.value, + }); + } + } + break; + case 'exergue': + partieContent.exergue = partie.attributes.field_texte_exergue.value; + break; + case 'video': + partieContent.videos = []; + for (let video of partie.attributes.field_videos) { + const videoId = video.split('?v=')[1]; + const videoUrl = `https://www.youtube.com/embed/${videoId}`; + partieContent.videos.push(videoUrl); + } + break; + } + this.content.parties.push(partieContent); } - this.content.parties.push(partieContent); } - } + } else if (this.contentType === 'equipe') { + // pour les pages équipe + for (let tag of rawContent.attributes.metatag) { + if (tag.tag === "meta") { + this.pageTitle = tag.attributes.content; + break; + } + } + this.content.contentTitle = rawContent.attributes.title; + this.content.textIntro = rawContent.attributes.body.value; + const personnesArray = []; + const personnes = await this.fetchFromRelationships('field_personne_s', rawContent.relationships); + for (let personne of personnes) { + const fetchPortrait = await this.fetchFromRelationships('field_portrait', personne.relationships); + personnesArray.push({ + nom: personne.attributes.field_nom, + prenom: personne.attributes.field_prenom, + description: personne.attributes.field_description, + portrait_alt: personne.relationships.field_portrait.data.meta.alt, + portrait_url: fetchPortrait.attributes.uri.url, + }); + } + + this.content.personnes = personnesArray; + + // await this.fetchFromId(bundle, id); + // est peut-être plus lisible que fetchFromRelationships + + } else if (this.contentType === 'partenaires') { + console.log(rawContent); + this.content.contentTitle = "Partenaires"; + const partenairesArray = []; + for (let partenaire of rawContent.data) { + partenairesArray.push({ + title: partenaire.title[0].value, + description: partenaire.body[0].value, + link_url: partenaire.field_lien[0].uri, + link_text: partenaire.field_lien[0].title, + logo_url: partenaire.field_logo[0].url, + logo_alt: partenaire.field_logo[0].alt, + weight: partenaire.field_poid[0].value, + }) + } + + this.content.partenaires = partenairesArray; + + } } catch (error) { this.error = 'Failed to fetch data'; console.error('Issue with getNodeData', error); @@ -236,7 +306,7 @@ export const useContentStore = defineStore('content', { } } }, - async fetchDeeperContent(field, relationships) { + async fetchFromRelationships(field, relationships) { if (relationships[field].data) { try { const contentLink = relationships[field].links.related.href; diff --git a/web/themes/custom/caravane/assets/js/utils/handle-navigation.js b/web/themes/custom/caravane/assets/js/utils/handle-navigation.js index 231c762..d0cb60b 100644 --- a/web/themes/custom/caravane/assets/js/utils/handle-navigation.js +++ b/web/themes/custom/caravane/assets/js/utils/handle-navigation.js @@ -35,7 +35,7 @@ export async function handleBrowserNavigation(store, baseUrl, siteName, mapStore pageChange(href, store, siteName, mapStore, baseUrl) } -async function pageChange(href, store, siteName, mapStore, baseUrl) { +export async function pageChange(href, store, siteName, mapStore, baseUrl) { if (href === '/') { store.resetStore(true); document.title = siteName; diff --git a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue index a37488e..8082041 100644 --- a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue +++ b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue @@ -3,7 +3,12 @@ :enter-active-class="animationsAreEnabled ? 'v-enter-active' : 'no-transition'" :leave-active-class="animationsAreEnabled ? 'v-leave-active' : 'no-transition'" > -
+
+ + diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue b/web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue index d63423c..5a21401 100644 --- a/web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue +++ b/web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue @@ -5,7 +5,7 @@
- -