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()