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

affichage des pièces jointes et liens

Browse Source
This commit is contained in:
Valentin Le Moign
2025-02-12 14:42:24 +01:00
parent eeb4702e96
commit 1b88937a6f
7 changed files with 380 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,8 @@ export const useContentStore = defineStore('content', {
next: {},
vignette: {},
parties: [],
liens: [],
pieces_jointes: [],
intro: '',
partenaires: [],
@@ -28,6 +30,7 @@ export const useContentStore = defineStore('content', {
}),
actions: {
async fetchContentData(path) {
console.log('start fetch content');
this.resetStore(false);
const contentTypes = [ 'etape', 'static', 'gouvernance', 'partenaire' ];
try {
@@ -42,6 +45,8 @@ export const useContentStore = defineStore('content', {
);
if (content) {
console.log('content found');
return {
contentType: type,
rawContent: content,
@@ -60,17 +65,20 @@ export const useContentStore = defineStore('content', {
}
}
return null;
};
const { contentType, rawContent } = await findContentByPath(contentTypes, path);
};
const { contentType, rawContent } = await findContentByPath(contentTypes, path);
this.contentType = contentType;
// console.log(`current type: ${contentType}`);
// TO DEBUG
const cleanContentMethod = 'original';
if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire') {
if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire'
&& cleanContentMethod === 'original'
) {
console.time('etape content processing');
// pageTitle
for (let tag of rawContent.attributes.metatag) {
if (tag.tag === "meta") {
@@ -95,6 +103,31 @@ export const useContentStore = defineStore('content', {
};
}
// liens
if (rawContent.attributes.field_liens.length) {
this.content.liens = [];
for (let lien of rawContent.attributes.field_liens) {
this.content.liens.push({
title: lien.title,
url: lien.uri,
});
}
}
// pièces jointes
if (rawContent.relationships.field_pieces_jointes.data.length) {
this.content.pieces_jointes = [];
for (let pieceJointe of rawContent.relationships.field_pieces_jointes.data) {
if (pieceJointe.meta.display) {
const uuid = pieceJointe.id;
const response = await REST.get(`/jsonapi/file/file/${uuid}`);
this.content.pieces_jointes.push({
title: pieceJointe.meta.description,
url: response.data.data.attributes.uri.url,
});
}
}
}
if (contentType === 'etape') {
// coordinates
this.content.coordinates = {
@@ -120,7 +153,8 @@ export const useContentStore = defineStore('content', {
// parties
const fieldParties = contentType === 'etape' ? 'field_parties' : 'field_parties_static';
const partiesFetch = await this.fetchFromRelationships(fieldParties, rawContent.relationships);
console.log(this.content);
console.timeEnd('etape content processing');
if (partiesFetch) {
this.content.parties = [];
for (let partie of partiesFetch) {
@@ -146,6 +180,7 @@ export const useContentStore = defineStore('content', {
}
break;
case 'titre_texte':
console.time('get images from text original')
partieContent.titre = partie.attributes.field_titre;
partieContent.texte = partie.attributes.field_texte.value;
@@ -170,8 +205,10 @@ export const useContentStore = defineStore('content', {
partieContent.texte = partieContent.texte.replace(imgTag, newImgTag);
}
}
}
}
console.timeEnd('get images from text original')
break;
case 'chiffres_cles':
const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships);
@@ -250,6 +287,153 @@ export const useContentStore = defineStore('content', {
this.content.parties.push(partieContent);
}
}
console.log('content cleaned');
} else if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire'
&& cleanContentMethod === 'promise'
) {
console.time('etape content promise processing');
const vignettePromise = this.fetchFromRelationships('field_vignette', rawContent.relationships);
const partiesPromise = this.fetchFromRelationships('field_parties', rawContent.relationships);
const previousEtapePromise = contentType === 'etape'? this.getRelatedEtape('previous', path) : null;
const nextEtapePromise = contentType === 'etape' ? this.getRelatedEtape('next', path) : null;
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),
}
}
// 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;
const [vignetteData, partiesData] = await Promise.all([vignettePromise, partiesPromise]);
if (vignetteData) {
this.content.vignette = {
url: {
original: vignetteData.attributes.uri.url,
small: vignetteData.attributes.image_style_uri.content_small,
medium: vignetteData.attributes.image_style_uri.content_medium,
large: vignetteData.attributes.image_style_uri.content_large,
},
alt: rawContent.relationships.field_vignette.data.meta.alt
};
}
if (partiesData) {
const partiesPromises = partiesData.map(async (partie) => {
const partieType = partie.type.replace(/^paragraph--/, "");
let partieContent = { type: partieType };
switch(partieType) {
case 'carte_sensible':
const carteSensiblePromise = this.fetchFromRelationships('field_image_carte', partie.relationships);
const carteSensibleData = await carteSensiblePromise;
if (carteSensibleData) {
partieContent.carteSensible = {
url: {
original: carteSensibleData.attributes.uri.url,
small: carteSensibleData.attributes.image_style_uri.content_small,
medium: carteSensibleData.attributes.image_style_uri.content_medium,
large: carteSensibleData.attributes.image_style_uri.content_large,
xlarge: carteSensibleData.attributes.image_style_uri.content_x_large,
},
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;
// get the resized images from the text
const imgRegex = /<img[^>]+>/g;
const uuidRegex = /data-entity-uuid="([^"]+)"/;
const imgTags = partieContent.texte.match(imgRegex);
if (imgTags) {
const imagePromises = imgTags.map(imgTag => {
const uuidMatch = imgTag.match(uuidRegex);
if (uuidMatch && uuidMatch[1]) {
return REST.get(`/jsonapi/file/file/${uuidMatch[1]}`)
.then(response => ({
originalTag: imgTag,
imageData: response.data.data
}));
}
});
const images = await Promise.all(imagePromises);
images.forEach(({originalTag, imageData}) => {
const newImgTag = originalTag
.replace(/src="[^"]+"/,`src="${imageData.attributes.image_style_uri.content_medium}"`)
.replace('>',' data-large-src="' + imageData.attributes.image_style_uri.content_large + '">');
partieContent.texte = partieContent.texte.replace(originalTag, newImgTag);
});
}
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,
});
}
}
break;
case 'diaporama':
break;
case 'entretien':
break;
case 'exergue':
break;
case 'video':
break;
}
return partieContent;
});
this.content.parties = await Promise.all(partiesPromises);
}
// related étapes
if (contentType === 'etape') await Promise.all([previousEtapePromise, nextEtapePromise]);
console.log(this.content);
console.timeEnd('etape content promise processing');
} else {
// pages gouvernance (contact) et partenaire
// ont plusieurs items par pages
@@ -366,18 +550,61 @@ export const useContentStore = defineStore('content', {
}
}
},
async getRelatedEtape(direction, path) {
const getRelatedEtapeContent = (relatedEtapeData) => {
if (relatedEtapeData) {
return this.fetchFromRelationships('field_vignette', relatedEtapeData.relationships)
.then(vignetteFetch => {
if (vignetteFetch) {
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: {
original: vignetteFetch.attributes.uri.url,
small: vignetteFetch.attributes.image_style_uri.content_small,
medium: vignetteFetch.attributes.image_style_uri.content_medium,
large: vignetteFetch.attributes.image_style_uri.content_large,
},
alt: relatedEtapeData.relationships.field_vignette.data.meta.alt,
},
}
}
});
}
}
const allEtapesPromise = REST.get('/jsonapi/views/etapes/block_1/');
return allEtapesPromise.then(allEtapesData => {
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;
return getRelatedEtapeContent(allEtapesData.data.data[relatedEtapeIndex]);
}
}
});
},
async fetchFromRelationships(field, relationships) {
if (relationships[field].links) {
try {
const contentLink = relationships[field].links.related.href;
const contentFetch = await REST.get(contentLink);
return contentFetch.data.data;
} catch (error) {
this.error = 'Failed to fetch data';
console.error('Issue with getNodeData', error);
}
return REST.get(contentLink)
.then(contentFetch => contentFetch.data.data)
.catch(error => {
this.error = 'Failed to fetch data';
console.error('Issue with getNodeData', error);
});
}
},
return null;
},
resetStore(forFrontDisplay) {
this.contentType = '';
this.pageTitle = '';