affichage des pièces jointes et liens

web/themes/custom/caravane/assets/js/stores/content.js

@@ -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,
@@ -63,14 +68,17 @@ export const useContentStore = defineStore('content', {
                 };                
                 
                 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;                                    
 
@@ -172,6 +207,8 @@ export const useContentStore = defineStore('content', {
                                         }
                                     }
                                     
+                                    
+                                    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,17 +550,60 @@ 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 REST.get(contentLink)
-                return contentFetch.data.data;
+                    .then(contentFetch => contentFetch.data.data)
-              } catch (error) {
+                    .catch(error => {
                         this.error = 'Failed to fetch data';
                         console.error('Issue with getNodeData', error);
+                    });
             }
-            }
+            return null;
         },        
         resetStore(forFrontDisplay) {
             this.contentType = '';

web/themes/custom/caravane/assets/js/utils/handle-navigation.js

@@ -23,6 +23,8 @@ export function handleClickableElements(clickableElements, store, router, baseUr
         if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
 
         link.onclick = async function (e) {
+            console.log('click on link, route push');
+            
             router.push(href);
             if (href !== window.location.pathname) {
               pageChange(href, store, siteName, mapStore, baseUrl);
@@ -38,6 +40,7 @@ export async function handleBrowserNavigation(store, baseUrl, siteName, mapStore
 }
 
 export async function pageChange(href, store, siteName, mapStore, baseUrl) {
+  console.log('trigger page change');
   if (href === '/') {
       store.resetStore(true);
       document.title = siteName;

web/themes/custom/caravane/assets/js/vuejs/Modale.vue

@@ -51,6 +51,10 @@
                         v-if="contentType === 'partenaire'"
                         :content="content" />
                 </main>
+                <PiecesJointes
+                  :content="content"
+                  :couleur="content.couleur || brandColor"
+                  />
                 <ModaleFooter
                 :contentType="contentType"
                 :content="content"
@@ -72,6 +76,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 PiecesJointes from './components/PiecesJointes.vue';
 
 import ModaleCarteSensible from './components/parties/ModaleCarteSensible.vue';
 import ModaleTitreTexte from './components/parties/ModaleTitreTexte.vue';
@@ -113,6 +118,7 @@ const handleMapMovement = () => {
     () => loading.value,
     () => {
         if (!loading.value) {
+          console.log('loading done');
           isModaleEtape = contentType.value === 'etape';
 
           // Define helper functions in variables
@@ -171,6 +177,7 @@ const handleMapMovement = () => {
 };
 
 onMounted(() => {
+  console.log('modale mounted');
   isModaleEtape = contentType.value === 'etape';
   wasModaleEtape = isModaleEtape;
   handleColorChange();

web/themes/custom/caravane/assets/js/vuejs/components/PiecesJointes.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="pieces-jointes">
+        <div v-for="pj in content.pieces_jointes">
+          <a class="pj-link" :href="pj.url" target="_blank" rel="noopener noreferrer" :style="{ backgroundColor: couleur }">{{ pj.title }}</a>
+        </div>
+        <div v-for="lien in content.liens">
+          <a class="lien-link" :href="lien.url" target="_blank" rel="noopener noreferrer" :style="{ backgroundColor: couleur }">{{ lien.title }}</a>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  content: Object,
+  couleur: String,
+});
+</script>

web/themes/custom/caravane/assets/pictograms/arrow_forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>

web/themes/custom/caravane/assets/pictograms/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>

web/themes/custom/caravane/assets/scss/main.scss

@@ -1177,12 +1177,71 @@ body{
                       }
                     }
                   }
+                  > .pieces-jointes {
+                    z-index: 1;
+                    position: relative;
+                    padding: 0 $modale-x-padding;
+                    box-sizing: border-box;
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 1.8rem 1rem;
+                    justify-content: space-between;
+                    padding-bottom: 3rem;
+                    > div {
+                      padding-top: 5px;
+                      > a {
+                        background-color: white;
+                        padding: 0.8rem 1rem;
+                        padding-left: 1.2rem;
+                        border-radius: 10rem;
+                        text-decoration: none;
+                        color: $main-color;
+                        display: flex;
+                        transition: transform 0.2s ease-in-out;
+                        transform: translateY(0px);
+                        &:hover {
+                          transform: translateY(-4px);
+                        }
+                      }
+                      > a.pj-link {
+                        &::after {
+                          mask: url('/themes/custom/caravane/assets/pictograms/download.svg') no-repeat center;
+                          content: '';
+                          mask-size: contain;
+                          background-color: $main-color;
+                          display: inline-block;
+                          width: 1rem;
+                          height: 1rem;
+                          margin-top: 0.3rem;
+                          margin-left: 0.5rem;
+                        }
+                      }
+                      > a.lien-link {
+                        &::after {
+                          mask: url('/themes/custom/caravane/assets/pictograms/arrow_forward.svg') no-repeat center;
+                          content: '';
+                          mask-size: contain;
+                          background-color: $main-color;
+                          display: inline-block;
+                          width: 1rem;
+                          height: 1rem;
+                          margin-top: 0.3rem;
+                          margin-left: 0.5rem;
+                        }
+                      }
+                    }
+                  }
                   > footer {
+                    z-index: 0;
                     .pattern-bottom {
                       mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
                       height: $modale-bottom-padding;
                       position: absolute;
                       bottom: 0;
+                      width: 100%;
+                      background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
+                      background-size: 300px;
+                      background-size: repeat;
                     }
                     .related-etape-links {
                       position: absolute;