first rest request

web/themes/custom/caravane/assets/dist/main.css

@@ -1 +1 @@
-body{background-color:#00f}
+body{background-color:red}

web/themes/custom/caravane/assets/js/api/json-axios.js

@@ -0,0 +1,32 @@
+import axios from 'axios'
+
+// https://github.com/alvar0hurtad0/drupal-vuejs-todo/blob/master/frontend/src/api/axiosInterceptor.js
+
+// console.log('drupalSettings', drupalSettings)
+console.log(window.location)
+
+const JSONAPI = axios.create({
+  baseURL: `${window.location.origin}/jsonapi`,
+  withCredentials: true,
+  headers: {
+    Accept: 'application/vnd.api+json'
+    // Authorization: 'Basic {token}',
+    // 'Content-Type': 'application/json'
+  }
+})
+
+JSONAPI.interceptors.response.use(
+  response => {
+    return Promise.resolve(response)
+  },
+  error => {
+    const { status } = error.response
+    console.warn('error in json-axios', status)
+    // if (status === 403) {
+    //   window.location = '/'
+    // }
+    return Promise.reject(error)
+  }
+)
+
+export default JSONAPI

web/themes/custom/caravane/assets/js/api/rest-axios.js

@@ -0,0 +1,45 @@
+import axios from 'axios'
+
+// https://github.com/alvar0hurtad0/drupal-vuejs-todo/blob/master/frontend/src/api/axiosInterceptor.js
+
+// console.log('drupalSettings', drupalSettings)
+// console.log('window.location.origin', window.location.origin)
+
+// axios.interceptors.response.use(
+//   response => {
+//     return Promise.resolve(response)
+//   },
+//   error => {
+//     const { status } = error.response
+//     console.warn('error in rest-axios', status)
+//     if (status === 403) {
+//       window.location = '/'
+//     }
+//     return Promise.reject(error)
+//   }
+// )
+
+const REST = axios.create({
+  baseURL: `${window.location.origin}`,
+  withCredentials: true,
+  headers: {
+    // Authorization: 'Bearer {token}',
+    'Content-Type': 'application/json'
+  }
+})
+
+REST.interceptors.response.use(
+  response => {
+    return Promise.resolve(response)
+  },
+  error => {
+    const { status } = error.response
+    console.warn('error in rest-axios', status)
+    // if (status === 403) {
+    //   window.location = '/'
+    // }
+    return Promise.reject(error)
+  }
+)
+
+export default REST

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

@@ -2,22 +2,108 @@ import { createApp } from 'vue'
 import '../scss/main.scss'
 import Etape from './vuejs/Etape.vue'
 
+import REST from './api/rest-axios'
 
 
-/**
- * @file
- * reha behaviors.
- */
-(function (Drupal) {
 
-  'use strict';
+// /**
+//  * @file
+//  * reha behaviors.
+//  * https://www.drupal.org/docs/drupal-apis/javascript-api/javascript-api-overview
+//  */
+// (function (Drupal) {
+
+//   'use strict';
+
+//   Drupal.behaviors.reha = {
+//     attach: function (context, settings) {
+//       console.log('It works!');
+//     }
+//   };
+
+// } (Drupal));
+
+(function (Drupal, drupalSettings) {
+  const CaravaneTheme = function () {
+    const _is_front = drupalSettings.path.isFront
+    console.log('drupalSettings', drupalSettings)
+
+    // let _I18n
+
+    //  ___      _ _
+    // |_ _|_ _ (_) |_
+    //  | || ' \| |  _|
+    // |___|_||_|_|\__|
+    function init () {
+      console.log('CaravaneTheme init()')
+      initVues()
+    }
+
+    function initVues(){
+      initVueEtapeModale();
 
-  Drupal.behaviors.reha = {
-    attach: function (context, settings) {
-      console.log('It works!');
-      createApp(Etape).mount('#etape-modale');
 
     }
-  };
 
-} (Drupal));
+    function initVueEtapeModale(){
+      createApp(Etape).mount('#etape-modale');
+
+      processEtapeLinks();
+    }
+
+
+    function onClickEtapeLink(e){
+      e.preventDefault();
+      
+      let a = e.currentTarget;
+      let nid = a.dataset.nodeNid;
+      console.log(nid);
+
+      getNodeData(nid);
+
+      return null;
+    }
+
+
+    function processEtapeLinks(){
+      let etape_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
+      etape_link_fields.forEach((field, index) => {
+        let nid = null;
+        let classList = field.classList;
+        classList.forEach((classe) => {
+          let reg = /data-node-(\d+)/;
+          let result = classe.match(reg);
+          if (result) {
+            nid = result[1];
+            console.log(nid);
+          }
+        })
+        
+        if (nid) {
+          let a = field.querySelector('a');
+          a.setAttribute('data-node-nid', nid);
+          a.addEventListener('click', onClickEtapeLink);
+        }
+        
+        
+      })
+    }
+    
+    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()
+
+  CaravaneTheme()
+})(Drupal, drupalSettings)

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    hello HMR :)
+    hello HMR TROP TROP BIEN \o/
   </div>
 </template>
 

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

@@ -1,3 +1,3 @@
 body{
-  background-color: red;
+  background-color: purple;
 }