fetch and display etape data

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

@@ -3,7 +3,17 @@ import REST from '../api/rest-axios';
 
 export const useEtapeStore = defineStore('etape', {
     state: () => ({
-      etapeData: null,
+      href: '',
+      title: '',
+      adresse: {},
+      etape_number: '',
+      dates: {},
+      geofield: {},
+      galeries: [],
+      parties: [],
+      saison: {},
+      thematiques: [],
+      vignette: {},
       loading: false,
       error: null,
     }),
@@ -12,8 +22,35 @@ export const useEtapeStore = defineStore('etape', {
         this.loading = true;
         this.error = null;
         try {
-          const response = await REST.get(`/node/${nid}?_format=json`);
-          this.etapeData = response.data;
+//          const response = await REST.get(`/node/${nid}?_format=json`);
+          const response = await REST.get(`/jsonapi/node/etape/`);
+          for (let etape of response.data.data) {
+            if (etape.attributes.drupal_internal__nid == nid) {
+              for (let metatag of etape.attributes.metatag) {
+                if (metatag.tag === "link") {
+                  this.href = metatag.attributes.href;
+                }
+              }
+              this.title = etape.attributes.title;
+              this.adresse = etape.attributes.field_adresse;
+              this.etape_number = etape.attributes.field_arret_numero;
+              this.dates = etape.attributes.field_dates;
+              this.geofield = etape.attributes.field_geofield;
+              this.galeries = await fetchEtapeContent('field_galleries', etape.relationships);
+              const partiesFetch = await fetchEtapeContent('field_parties', etape.relationships);
+              let partiesArray = []
+              for (let partie of partiesFetch) {
+                partiesArray.push({ title: partie.attributes.field_titre, text: partie.attributes.field_texte.value });
+              }
+              this.parties = partiesArray;
+              this.saison = await fetchEtapeContent('field_saison', etape.relationships);
+              this.saison = await fetchEtapeContent('field_saison', etape.relationships);
+              this.thematiques = await fetchEtapeContent('field_thematiques', etape.relationships);
+              const vignetteFetch = await fetchEtapeContent('field_vignette', etape.relationships);
+              this.vignette = { url: vignetteFetch.attributes.uri.url, alt: etape.attributes.field_vignette_alt };
+              break;
+            }
+          }
         } catch (error) {
           this.error = 'Failed to fetch data';
           console.error('Issue with getNodeData', error);
@@ -22,4 +59,17 @@ export const useEtapeStore = defineStore('etape', {
         }
       },
     },
-  });
+  });
+
+async function fetchEtapeContent(field, relationships) {
+  if (relationships[field].data) {
+    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);
+    }
+  }
+}

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

@@ -1,11 +1,40 @@
 <template>
-  <div v-if="etapeData">
+  <div v-if="etape_number">
+    <header>
+      <h1>{{adresse.locality}}, {{ adresse.postal_code }}</h1>
+      <h2>{{title}}</h2>
+      <div>
+        <p>Étape n°{{etape_number}}</p>
+        <p>Du {{dates.value}} au {{ dates.end_value }}</p>
+      </div>
+      <img :src="vignette.url" :alt="vignette.alt">
+    </header>
+    <main>
+      <div v-for="partie in parties">
+        <h3 v-html="partie.title"></h3>
+        <p v-html="partie.text"></p>
+      </div>
+    </main>
+
+
+
+
 <!--     
     <div v-if="loading">Loading...</div>
     <div v-if="error">{{ error }}</div>
- -->    
+ -->
+
+    <div><pre>{{href}}</pre></div>
+
+    
+    <div><pre><b>GEOFIELD</b>{{geofield}}</pre></div>
+    <div><pre><b>GALERIES</b>{{galeries}}</pre></div>
+    <div><pre><b>PARTIES</b>{{parties}}</pre></div>
+    <div><pre><b>SAISON</b>{{saison}}</pre></div>
+    <div><pre><b>THEMATIQUES</b>{{thematiques}}</pre></div>
+
+
     <div>
-      <pre>{{ etapeData }}</pre>
     </div>
   </div>
 </template>
@@ -16,5 +45,28 @@
 
   const store = useEtapeStore();
 
-  const { etapeData, loading, error } = storeToRefs(store);
-</script>
+  const { 
+    loading, error,
+
+    href,
+    title,
+    adresse,
+    etape_number,
+    dates,
+    geofield,
+    galeries,
+    parties,
+    saison,
+    thematiques,
+    vignette,
+
+  } = storeToRefs(store);
+</script>
+
+<style lang="scss">
+  header {
+    img {
+      width: 100%;
+    }
+  }
+</style>

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

@@ -15,7 +15,7 @@ body{
   color: $main-color;
   margin: 0;
   padding: 0;
-  header {
+  .layout-container > header {
     z-index: 2;
     position: relative;
     > div {
@@ -89,7 +89,7 @@ body{
       }
     }
   }
-  main {
+  .layout-container > main {
     z-index: 1;
     position: absolute;
     top: 0;