bachir/drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MODIFS CONFIGS : fetch ressources content

Browse Source
This commit is contained in:
Valentin Le Moign
2025-03-11 23:53:31 +01:00
parent 2ca44f2550
commit 9093caa557
24 changed files with 281 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
web/themes/custom/caravane/assets/js/stores/content.js
View File

@@ -4,58 +4,27 @@ import { defineStore } from 'pinia';
import REST from '../api/rest-axios';
import { findContentByPath } from '../utils/content/findContentByPath';
import {
getCleanDate,
fetchFromRelationships,
getRelatedEtape,
} from '../utils/content/contentFetchUtils';
import {
getCarteSensible,
getTitreTexte,
getChiffresCles,
getDiaporama,
getEntretien,
getVideos,
} from '../utils/content/cleanParties';
import {
getPartenaires,
getGouvernance,
} from '../utils/content/multiItemPages';
import { getCleanDate, fetchFromRelationships, getRelatedEtape } from '../utils/content/contentFetchUtils';
import { getCarteSensible, getTitreTexte, getChiffresCles, getDiaporama, getEntretien, getVideos } from '../utils/content/cleanParties';
import { getPartenaires, getGouvernance, getRessources } from '../utils/content/multiItemPages';
export const useContentStore = defineStore('content', {
state: () => ({
contentType: '',
pageTitle: '',
content: {
contentTitle: '',
coordinates: {},
adresse: {},
etape_number: '',
couleur: '',
dates: {},
previous: {},
next: {},
vignette: {},
parties: [],
liens: [],
pieces_jointes: [],
intro: '',
partenaires: [],
gouvernances: [],
},
content: {},
loading: false,
error: null,
}),
actions: {
async fetchContentData(path) {
this.resetStore(false);
const contentTypes = ['etape', 'static', 'gouvernance', 'partenaire'];
const contentTypes = ['etape', 'static', 'gouvernance', 'partenaire', 'ressource'];
try {
const { contentType, rawContent } = await findContentByPath(contentTypes, path);
this.contentType = contentType;
if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire') {
if (this.contentType === 'etape' || this.contentType === 'static') {
const vignettePromise = fetchFromRelationships('field_vignette', rawContent.relationships);
const partiesPromise = fetchFromRelationships('field_parties', rawContent.relationships);
@@ -85,12 +54,7 @@ export const useContentStore = defineStore('content', {
}
// pageTitle
for (let tag of rawContent.attributes.metatag) {
if (tag.tag === "meta") {
this.pageTitle = tag.attributes.content;
break;
}
}
this.pageTitle = rawContent.attributes.metatag.find(tag => tag.tag === "meta")?.attributes.content;
// contentTitle
this.content.contentTitle = rawContent.attributes.title;
@@ -152,26 +116,33 @@ export const useContentStore = defineStore('content', {
this.content.next = nextContent;
}
} else {
// pages gouvernance (contact) et partenaire
// ont plusieurs items par pages
// pages gouvernance (contact), ressources 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}`;
`${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;
let multiItemPageArray = [];
let multiItemPageArray = [];
if (this.contentType === 'partenaire') {
multiItemPageArray = await getPartenaires(rawContent);
} else if (this.contentType === 'gouvernance') {
multiItemPageArray = await getGouvernance(rawContent);
switch (this.contentType) {
case 'ressource':
multiItemPageArray = await getRessources(rawContent);
break;
case 'partenaire':
multiItemPageArray = await getPartenaires(rawContent);
break;
case 'gouvernance':
multiItemPageArray = await getGouvernance(rawContent);
break;
}
this.content[`${this.contentType}s`] = multiItemPageArray;
console.log(this.content);
}
} catch (error) {
this.error = 'Failed to fetch data';

4
web/themes/custom/caravane/assets/js/utils/content/findContentByPath.js
View File

@@ -17,8 +17,8 @@ export async function findContentByPath(contentTypes, path) {
};
}
// Handle special case for governance/partners (multiple items per page)
const pageRequested = window.location.href.split('/').pop().replace(/s?$/, '');
// Handle special case for gouvernance, ressources, partenaires (multiple items per page)
let pageRequested = window.location.href.split('/').pop().replace(/s?$/, '');
if (type === pageRequested
|| (type === 'gouvernance' && pageRequested === 'contact')
) {

76
web/themes/custom/caravane/assets/js/utils/content/multiItemPages.js
View File

@@ -1,4 +1,5 @@
import REST from '../../api/rest-axios';
import { getCleanDate } from './contentFetchUtils';
export async function getPartenaires(rawContent) {
const logoPromises = rawContent.map(item =>
@@ -51,4 +52,79 @@ export async function getGouvernance(rawContent) {
);
return await Promise.all(itemPromises);
}
export async function getRessources(rawContent) {
const ressourcesPromises = rawContent.map(item =>
REST.get(item.links.self.href)
.then(async ressourceFetch => {
const partiesPromises = REST.get(item.relationships.field_parties_ressource.links.related.href)
.then(async partiesFetch => {
const parties = partiesFetch.data.data;
const vignettePartie = parties.find(parties => parties.type !== "paragraph--titre_texte");
if (vignettePartie) {
let vignettePromise;
let alt;
switch (vignettePartie.type) {
case 'paragraph--diaporama':
alt = vignettePartie.relationships.field_diaporama.data[0].meta.alt;
vignettePromise = REST.get(vignettePartie.relationships.field_diaporama.links.related.href)
.then(diaporamaFetch => {
return {
url: diaporamaFetch.data.data[0].attributes.image_style_uri.content_small,
alt
}
});
break;
case 'paragraph--video':
const videoId = vignettePartie.attributes.field_videos[0].split('?v=')[1];
vignettePromise = {
url: `https://img.youtube.com/vi/${videoId}/0.jpg`,
alt: item.attributes.title
}
break;
case 'paragraph--galleries':
vignettePromise = REST.get(vignettePartie.relationships.field_gallerie.links.related.href)
.then(gallerieFetch => {
alt = gallerieFetch.data.data.relationships.field_images.data[0].meta.alt;
const galleriePromise = REST.get(gallerieFetch.data.data.relationships.field_images.links.related.href)
.then(gallerieImageFetch => {
return {
url: gallerieImageFetch.data.data[0].attributes.image_style_uri.content_small,
alt
}
});
return galleriePromise;
});
break;
case 'paragraph--document':
alt = vignettePartie.relationships.field_vignette.data.meta.alt;
vignettePromise = REST.get(vignettePartie.relationships.field_vignette.links.related.href)
.then(documentFetch => {
return {
url: documentFetch.data.data.attributes.image_style_uri.content_small,
alt
}
});
break;
default:
vignettePromise = Promise.resolve(null);
}
return vignettePromise;
}
});
return partiesPromises.then(vignette => ({
ressourceType: item.attributes.field_type_de_ressource,
title: item.attributes.title,
auteurice: item.attributes.field_autheurice,
date: getCleanDate(item.attributes.field_date_ressource),
url: ressourceFetch.data.data.attributes.metatag.find(tag => tag.tag === "link")?.attributes.href,
vignette
}));
})
);
return await Promise.all(ressourcesPromises);
}

24
web/themes/custom/caravane/assets/js/vuejs/Modale.vue
View File

@@ -3,12 +3,7 @@
:enter-active-class="animationsAreEnabled ? 'v-enter-active' : 'no-transition'"
:leave-active-class="animationsAreEnabled ? 'v-leave-active' : 'no-transition'"
>
<div v-if="!loading && (
contentType === 'etape'
|| contentType === 'static'
|| contentType === 'gouvernance'
|| contentType === 'partenaire'
)">
<div v-if="!loading && contentType != ''">
<div class="content-wrapper">
<ModaleHeader
:contentType="contentType"
@@ -46,20 +41,22 @@
<EquipeContent
v-if="contentType === 'gouvernance'"
:content="content"
:couleur="content.couleur || brandColor" />
:couleur="brandColor" />
<PartenairesContent
v-if="contentType === 'partenaire'"
:content="content" />
<CentreDeRessource
v-if="contentType === 'ressource'"
:content="content"
:couleur="brandColor" />
</main>
<PiecesJointes
:content="content"
:couleur="content.couleur || brandColor"
/>
:couleur="content.couleur || brandColor" />
<ModaleFooter
:contentType="contentType"
:content="content"
:couleur="content.couleur || brandColor"
/>
:contentType="contentType"
:content="content"
:couleur="content.couleur || brandColor" />
</div>
</div>
</Transition>
@@ -76,6 +73,7 @@ import ModaleHeader from './components/ModaleHeader.vue';
import ModaleFooter from './components/ModaleFooter.vue';
import EquipeContent from './components/EquipeContent.vue';
import PartenairesContent from './components/PartenairesContent.vue';
import CentreDeRessource from './components/CentreDeRessource.vue';
import PiecesJointes from './components/PiecesJointes.vue';
import ModaleCarteSensible from './components/parties/ModaleCarteSensible.vue';

14
web/themes/custom/caravane/assets/js/vuejs/components/CentreDeRessource.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div id="centre-de-ressource">
<div v-if="content.intro" class="intro">
<p v-html="content.intro"></p>
</div>
</div>
</template>
<script setup>
const props = defineProps({
content: Object,
couleur: String,
});
</script>

19
web/themes/custom/caravane/assets/scss/main.scss
View File

@@ -773,6 +773,22 @@ body{
font-size: $labeur-font-size-desktop;
width: $modale-width-desktop;
}
&:has(#centre-de-ressource) {
@media screen and (min-width: $tablet-min-width) {
left: 8vw;
width: 84vw;
.locality-title {
width: 42vw;
margin-left: 21vw;
}
}
@media screen and (min-width: $desktop-min-width) {
.locality-title {
width: 30vw;
margin-left: 27vw;
}
}
}
img {
width: 100%;
height: auto;
@@ -1157,6 +1173,9 @@ body{
margin-top: 10vh;
}
}
#centre-de-ressource {
background-color: red;
}
}
> .pieces-jointes {
z-index: 1;