first styling and store for reactive etape modale

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

@@ -1,10 +1,12 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import '../scss/main.scss'
 import Etape from './vuejs/Etape.vue'
 
-import REST from './api/rest-axios'
-
+import { useEtapeStore } from './stores/etape';
 
+// Working with the history API
+// https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API
 
 // /**
 //  * @file
@@ -46,28 +48,30 @@ import REST from './api/rest-axios'
     }
 
     function initVueEtapeModale(){
-      createApp(Etape).mount('#etape-modale');
+      const app = createApp(Etape).use(createPinia());
+      const store = useEtapeStore();
+      app.mount('#etape-modale');
 
-      processEtapeLinks();
+      processEtapeLinks(store);
     }
 
 
-    function onClickEtapeLink(e){
+    function onClickEtapeLink(e, store){
       e.preventDefault();
       
       let a = e.currentTarget;
       let nid = a.dataset.nodeNid;
       console.log(nid);
 
-      getNodeData(nid);
+      store.fetchEtapeData(nid);
 
       return null;
     }
 
 
-    function processEtapeLinks(){
+    function processEtapeLinks(store){
       let etape_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
-      etape_link_fields.forEach((field, index) => {
+      etape_link_fields.forEach((field) => {
         let nid = null;
         let classList = field.classList;
         classList.forEach((classe) => {
@@ -82,26 +86,13 @@ import REST from './api/rest-axios'
         if (nid) {
           let a = field.querySelector('a');
           a.setAttribute('data-node-nid', nid);
-          a.addEventListener('click', onClickEtapeLink);
+          a.addEventListener('click', (e) => onClickEtapeLink(e, store));
         }
         
         
       })
     }
     
-    function getNodeData(nid){
-      const params = {
-      }
-      REST.get(`/node/${nid}?_format=json`, params)
-      .then((data) => {
-        console.log('user REST getUser data', data)
-      })
-      .catch(error => {
-        console.warn('Issue with getNodedata', error)
-        Promise.reject(error)
-      })
-    }
-
     init()
   } // end CaravaneTheme()
 

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

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia';
+import REST from '../api/rest-axios';
+
+export const useEtapeStore = defineStore('etape', {
+    state: () => ({
+      etapeData: null,
+      loading: false,
+      error: null,
+    }),
+    actions: {
+      async fetchEtapeData(nid) {
+        this.loading = true;
+        this.error = null;
+        try {
+          const response = await REST.get(`/node/${nid}?_format=json`);
+          this.etapeData = response.data;
+        } catch (error) {
+          this.error = 'Failed to fetch data';
+          console.error('Issue with getNodeData', error);
+        } finally {
+          this.loading = false;
+        }
+      },
+    },
+  });

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

@@ -1,13 +1,18 @@
 <template>
   <div>
-    hello HMR TROP TROP BIEN \o/
+    <div v-if="loading">Loading...</div>
+    <div v-if="error">{{ error }}</div>
+    <div v-if="etapeData">
+      <pre>{{ etapeData }}</pre>
+    </div>
   </div>
 </template>
 
-<script>
-  
-</script>
+<script setup>
+  import { storeToRefs } from 'pinia';
+  import { useEtapeStore } from '../stores/etape';
 
-<style>
+  const store = useEtapeStore();
 
-</style>
+  const { etapeData, loading, error } = storeToRefs(store);
+</script>