modifs backoffice : contenu page 'gouvernance' passe sur la page 'contact' / rework du st
ore 'content'
This commit is contained in:
@@ -18,6 +18,10 @@ export const useContentStore = defineStore('content', {
|
||||
next: {},
|
||||
vignette: {},
|
||||
parties: [],
|
||||
|
||||
intro: '',
|
||||
partenaires: [],
|
||||
gouvernances: [],
|
||||
},
|
||||
loading: false,
|
||||
error: null,
|
||||
@@ -25,48 +29,49 @@ export const useContentStore = defineStore('content', {
|
||||
actions: {
|
||||
async fetchContentData(path) {
|
||||
this.resetStore(false);
|
||||
const contentTypes = [ 'etape', 'static', 'equipe', 'partenaires' ];
|
||||
const contentTypes = [ 'etape', 'static', 'gouvernance', 'partenaire' ];
|
||||
try {
|
||||
let rawContent,
|
||||
contentType,
|
||||
response;
|
||||
contentTypesLoop:
|
||||
const findContentByPath = async (contentTypes, path) => {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
const response = await REST.get(`/jsonapi/node/${type}/`);
|
||||
|
||||
const content = response.data.data.find(content =>
|
||||
content.attributes.metatag.some(tag =>
|
||||
tag.tag === "link" && tag.attributes.href === path
|
||||
)
|
||||
);
|
||||
|
||||
if (content) {
|
||||
return {
|
||||
contentType: type,
|
||||
rawContent: content,
|
||||
};
|
||||
}
|
||||
|
||||
// Handle special case for governance/partners (multiple items per page)
|
||||
const pageRequested = window.location.href.split('/').pop().replace(/s?$/, '');
|
||||
if (type === pageRequested
|
||||
|| (type === 'gouvernance' && pageRequested === 'contact')
|
||||
) {
|
||||
return {
|
||||
contentType: type,
|
||||
rawContent: response.data.data,
|
||||
};
|
||||
}
|
||||
} else {
|
||||
// pour les pages partenaires
|
||||
rawContent = await REST.get('/rest/partenaires/');
|
||||
contentType = type;
|
||||
this.contentType = type;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
if (this.contentType !== 'equipe' && this.contentType !== 'partenaires') {
|
||||
// pageTitle
|
||||
const { contentType, rawContent } = await findContentByPath(contentTypes, path);
|
||||
|
||||
this.contentType = contentType;
|
||||
|
||||
// console.log(`current type: ${contentType}`);
|
||||
|
||||
|
||||
|
||||
if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire') {
|
||||
// pageTitle
|
||||
for (let tag of rawContent.attributes.metatag) {
|
||||
if (tag.tag === "meta") {
|
||||
this.pageTitle = tag.attributes.content;
|
||||
@@ -77,7 +82,7 @@ export const useContentStore = defineStore('content', {
|
||||
this.content.contentTitle = rawContent.attributes.title;
|
||||
|
||||
// vignette
|
||||
const vignetteFetch = await this.fetchFromRelationships('field_vignette', rawContent.relationships);
|
||||
const vignetteFetch = await this.fetchFromRelationships('field_vignette', rawContent.relationships);
|
||||
if (vignetteFetch) {
|
||||
this.content.vignette = {
|
||||
url: vignetteFetch.attributes.uri.url,
|
||||
@@ -103,8 +108,8 @@ export const useContentStore = defineStore('content', {
|
||||
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);
|
||||
await this.getRelatedEtape('previous', path);
|
||||
await this.getRelatedEtape('next', path);
|
||||
}
|
||||
|
||||
// parties
|
||||
@@ -197,52 +202,59 @@ export const useContentStore = defineStore('content', {
|
||||
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,
|
||||
});
|
||||
} else {
|
||||
// pages gouvernance (contact) et partenaire
|
||||
// ont plusieurs items par pages
|
||||
const intro = await REST.get(`/jsonapi/config_pages/intro_${this.contentType}/`);
|
||||
const introContent = intro.data.data[0];
|
||||
|
||||
this.pageTitle =
|
||||
`${introContent.attributes.field_titre} ${introContent.attributes.metatag.find(tag => tag.tag === "meta")?.attributes.content}`;
|
||||
|
||||
this.content.contentTitle = introContent.attributes.field_titre;
|
||||
this.content.intro = introContent.attributes.field_intro.value;
|
||||
|
||||
const multiItemPageArray = [];
|
||||
|
||||
if (this.contentType === 'partenaire') {
|
||||
for (let item of rawContent) {
|
||||
const logoFetch = await REST.get(item.relationships.field_logo.links.related.href);
|
||||
|
||||
multiItemPageArray.push({
|
||||
title: item.attributes.title,
|
||||
description: item.attributes.body.value,
|
||||
weight: item.attributes.field_poid,
|
||||
link_url: item.attributes.field_lien.uri ,
|
||||
logo_alt: item.relationships.field_logo.data.meta.alt,
|
||||
logo_url: logoFetch.data.data.attributes.uri.url,
|
||||
});
|
||||
}
|
||||
} else if (this.contentType === 'gouvernance') {
|
||||
for (let item of rawContent) {
|
||||
const personnesFetch = await REST.get(item.relationships.field_personne_s.links.related.href);
|
||||
let personnes = [];
|
||||
for (let personne of personnesFetch.data.data) {
|
||||
const portraitFetch = await REST.get(personne.relationships.field_portrait.links.related.href);
|
||||
personnes.push({
|
||||
nom: personne.attributes.field_nom,
|
||||
prenom: personne.attributes.field_prenom,
|
||||
description: personne.attributes.field_description,
|
||||
photo_meta: personne.relationships.field_portrait.data?.meta.alt,
|
||||
photo_url: portraitFetch.data.data?.attributes.uri.url,
|
||||
});
|
||||
}
|
||||
multiItemPageArray.push({
|
||||
title: item.attributes.title,
|
||||
weight: item.attributes.field_poid,
|
||||
personnes: personnes,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.content.personnes = personnesArray;
|
||||
|
||||
// await this.fetchFromId(bundle, id);
|
||||
// est peut-être plus lisible que fetchFromRelationships
|
||||
|
||||
} else if (this.contentType === 'partenaires') {
|
||||
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;
|
||||
|
||||
}
|
||||
this.content[`${this.contentType}s`] = multiItemPageArray;
|
||||
|
||||
console.log(this.content);
|
||||
}
|
||||
} catch (error) {
|
||||
this.error = 'Failed to fetch data';
|
||||
console.error('Issue with getNodeData', error);
|
||||
@@ -257,59 +269,45 @@ export const useContentStore = defineStore('content', {
|
||||
y: date.split('-')[0],
|
||||
}
|
||||
},
|
||||
async getRelatedEtape(direction, allEtapesData, path) {
|
||||
const getRelatedEtapeContent = async (relatedPath, allEtapesData) => {
|
||||
const baseUrl = window.location.protocol + "//" + window.location.host;
|
||||
for (let etape of allEtapesData) {
|
||||
for (let tag of etape.attributes.metatag) {
|
||||
if (tag.tag === "link" && tag.attributes.href === baseUrl + relatedPath) {
|
||||
const vignetteFetch = await REST.get(etape.relationships.field_vignette.links.related.href);
|
||||
this.content[direction] = {
|
||||
url: tag.attributes.href,
|
||||
couleur: etape.attributes.field_couleur,
|
||||
title: etape.attributes.title,
|
||||
postalCode: etape.attributes.field_adresse.postal_code,
|
||||
dates: {
|
||||
start: this.getCleanDate(etape.attributes.field_dates.value),
|
||||
end: this.getCleanDate(etape.attributes.field_dates.end_value),
|
||||
},
|
||||
vignette: {
|
||||
url: vignetteFetch.data.data.attributes.uri.url,
|
||||
alt: etape.relationships.field_vignette.data.meta.alt,
|
||||
},
|
||||
}
|
||||
async getRelatedEtape(direction, path) {
|
||||
const getRelatedEtapeContent = async (relatedEtapeData) => {
|
||||
if (relatedEtapeData) {
|
||||
const vignetteFetch = await REST.get(relatedEtapeData.relationships.field_vignette.links.related.href);
|
||||
if (vignetteFetch.data.data) {
|
||||
this.content[direction] = {
|
||||
url: relatedEtapeData.attributes.metatag.find(tag => tag.tag === "link")?.attributes.href,
|
||||
couleur: relatedEtapeData.attributes.field_couleur,
|
||||
title: relatedEtapeData.attributes.title,
|
||||
postalCode: relatedEtapeData.attributes.field_adresse.postal_code,
|
||||
dates: {
|
||||
start: this.getCleanDate(relatedEtapeData.attributes.field_dates.value),
|
||||
end: this.getCleanDate(relatedEtapeData.attributes.field_dates.end_value),
|
||||
},
|
||||
vignette: {
|
||||
url: vignetteFetch.data.data.attributes.uri.url,
|
||||
alt: relatedEtapeData.relationships.field_vignette.data.meta.alt,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// TODO :
|
||||
// get the ordered view from here
|
||||
// /jsonapi/views/etapes/block_1?views-argument%5B0%5D=all&views-argument%5B1%5D=all
|
||||
const orderedEtapesList = document.querySelectorAll('#etapes-liste li');
|
||||
if (orderedEtapesList) {
|
||||
for (let li of orderedEtapesList) {
|
||||
const liHref = li.querySelector('a').getAttribute('href');
|
||||
if (path.endsWith(liHref)) {
|
||||
const previousEtapeItemPath = li.previousElementSibling?.querySelector('a').getAttribute('href');
|
||||
const nextEtapeItemPath = li.nextElementSibling?.querySelector('a').getAttribute('href');
|
||||
|
||||
if (previousEtapeItemPath && direction === 'previous') {
|
||||
let prevContent = await getRelatedEtapeContent(previousEtapeItemPath, allEtapesData);
|
||||
return prevContent;
|
||||
}
|
||||
if (nextEtapeItemPath && direction === 'next') {
|
||||
let nextContent = await getRelatedEtapeContent(nextEtapeItemPath, allEtapesData);
|
||||
return nextContent;
|
||||
}
|
||||
}
|
||||
const allEtapesData = await REST.get('/jsonapi/views/etapes/block_1/');
|
||||
for (let [index, etape] of allEtapesData.data.data.entries()) {
|
||||
if (etape.attributes.metatag.some(tag =>
|
||||
tag.tag === "link" && tag.attributes.href === path
|
||||
)) {
|
||||
const relatedEtapeIndex = direction === 'next' ? index + 1 : index - 1;
|
||||
await getRelatedEtapeContent(allEtapesData.data.data[relatedEtapeIndex]);
|
||||
}
|
||||
}
|
||||
},
|
||||
async fetchFromRelationships(field, relationships) {
|
||||
if (relationships[field].data) {
|
||||
if (relationships[field].links) {
|
||||
try {
|
||||
const contentLink = relationships[field].links.related.href;
|
||||
const contentFetch = await REST.get(contentLink);
|
||||
const contentFetch = await REST.get(contentLink);
|
||||
return contentFetch.data.data;
|
||||
} catch (error) {
|
||||
this.error = 'Failed to fetch data';
|
||||
|
||||
@@ -5,8 +5,8 @@ export async function initFirstLoadRouting(store, router, baseUrl, siteName) {
|
||||
const decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin'));
|
||||
|
||||
if(decoupled_origin) {
|
||||
await store.fetchContentData(baseUrl + decoupled_origin.url);
|
||||
router.push(decoupled_origin.url);
|
||||
await store.fetchContentData(baseUrl + decoupled_origin.url);
|
||||
window.localStorage.removeItem("decoupled_origin");
|
||||
document.title = store.pageTitle;
|
||||
setActiveNavItem(store.contentType, decoupled_origin.url);
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
<div v-if="!loading && (
|
||||
contentType === 'etape'
|
||||
|| contentType === 'static'
|
||||
|| contentType === 'equipe'
|
||||
|| contentType === 'partenaires'
|
||||
|| contentType === 'gouvernance'
|
||||
|| contentType === 'partenaire'
|
||||
)">
|
||||
<div class="content-wrapper">
|
||||
<ModaleHeader
|
||||
@@ -44,10 +44,11 @@
|
||||
:partie="partie" />
|
||||
</div>
|
||||
<EquipeContent
|
||||
v-if="contentType === 'equipe'"
|
||||
:content="content" />
|
||||
v-if="contentType === 'gouvernance'"
|
||||
:content="content"
|
||||
:couleur="content.couleur || brandColor" />
|
||||
<PartenairesContent
|
||||
v-if="contentType === 'partenaires'"
|
||||
v-if="contentType === 'partenaire'"
|
||||
:content="content" />
|
||||
</main>
|
||||
<ModaleFooter
|
||||
|
||||
@@ -1,12 +1,24 @@
|
||||
<template>
|
||||
<div id="equipe">
|
||||
<div v-html="content.textIntro"></div>
|
||||
<div v-for="personne in content.personnes" class="personne">
|
||||
<figure>
|
||||
<img :src="personne.portrait_url" :alt="personne.portrait_alt">
|
||||
</figure>
|
||||
<div class="name"><p v-html="personne.prenom + ' ' + personne.nom"></p></div>
|
||||
<div class="description"><p v-html="personne.description"></p></div>
|
||||
<div v-if="content.intro" class="intro">
|
||||
<p v-html="content.intro"></p>
|
||||
</div>
|
||||
<div v-for="equipe in content.gouvernances" class="equipe-item">
|
||||
<div class="partie-title">
|
||||
<h3>
|
||||
<p
|
||||
:style="{ background: `linear-gradient(transparent 70%, ${couleur} 70%)` }">
|
||||
{{ equipe.title }}
|
||||
</p>
|
||||
</h3>
|
||||
</div>
|
||||
<div v-for="personne in equipe.personnes" class="personne">
|
||||
<figure>
|
||||
<img :src="personne.photo_url" :alt="personne.photo_alt">
|
||||
</figure>
|
||||
<div class="name"><p v-html="personne.prenom + ' ' + personne.nom"></p></div>
|
||||
<div class="description"><p v-html="personne.description" style="white-space: pre-wrap;"></p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -14,5 +26,6 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
content: Object,
|
||||
couleur: String,
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<header :style="content.vignette ? '' : { marginTop: '20vh' }">
|
||||
<header :class="{ 'not-etape': contentType !== 'etape' }">
|
||||
<div class="cover">
|
||||
<img v-if="content.vignette" :src="content.vignette.url" :alt="content.vignette.alt">
|
||||
</div>
|
||||
@@ -12,7 +12,7 @@
|
||||
<div class="pattern"></div>
|
||||
</div>
|
||||
<div class="locality">
|
||||
<div class="top-triangle"></div>
|
||||
<div class="top-triangle" v-if="contentType === 'etape'"></div>
|
||||
<div class="locality-title">
|
||||
<h1>{{content.contentTitle}} <em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
<template>
|
||||
<div id="partenaires">
|
||||
<div v-if="content.intro" class="intro">
|
||||
<p v-html="content.intro"></p>
|
||||
</div>
|
||||
<div v-for="partenaire in content.partenaires" class="partenaire">
|
||||
<figure>
|
||||
<img :src="partenaire.logo_url" :alt="partenaire.logo_alt">
|
||||
<a :href="partenaire.link_url" target="_blank">
|
||||
<img :src="partenaire.logo_url" :alt="partenaire.logo_alt">
|
||||
</a>
|
||||
</figure>
|
||||
<div class="title"><p v-html="partenaire.title"></p></div>
|
||||
<div class="description"><p v-html="partenaire.description"></p></div>
|
||||
|
||||
@@ -913,13 +913,21 @@ body{
|
||||
}
|
||||
|
||||
}
|
||||
&.not-etape {
|
||||
> .locality-wrapper {
|
||||
> .locality {
|
||||
max-height: $brand-pattern-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> main {
|
||||
width: 100%;
|
||||
padding: 0 $modale-x-padding;
|
||||
padding-bottom: 5vh;
|
||||
box-sizing: border-box;
|
||||
> .partie {
|
||||
> .partie,
|
||||
> #equipe {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
> .sensible-map {
|
||||
@@ -942,7 +950,7 @@ body{
|
||||
margin-left: calc($modale-x-padding / 2);
|
||||
}
|
||||
}
|
||||
> .partie-title,
|
||||
.partie-title,
|
||||
> .chiffres-cles,
|
||||
> .entretien {
|
||||
> h3 {
|
||||
@@ -1092,25 +1100,34 @@ body{
|
||||
}
|
||||
> #equipe,
|
||||
> #partenaires {
|
||||
margin-top: 5vh;
|
||||
> div:not(.personne) {
|
||||
margin-top: 3vh;
|
||||
> div.intro {
|
||||
margin-bottom: 6vh;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
margin: 10vh 0;
|
||||
}
|
||||
}
|
||||
> div.personne,
|
||||
> div.equipe-item {
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
margin-bottom: 7vh;
|
||||
}
|
||||
> .partie-title {
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
}
|
||||
> div.equipe-item > div.personne,
|
||||
> div.partenaire {
|
||||
display: grid;
|
||||
grid-template-columns: 0.4fr 1fr;
|
||||
column-gap: 3rem;
|
||||
grid-template-rows: auto;
|
||||
justify-items: start;
|
||||
margin: 5vh 0;
|
||||
margin-bottom: 6vh;
|
||||
> figure {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
> img {
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 50%;
|
||||
|
||||
Reference in New Issue
Block a user