vue router pour l'history

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

@@ -4,6 +4,7 @@ import '../scss/main.scss'
 import Modale from './vuejs/Modale.vue'
 
 import { useContentStore } from './stores/content';
+import router from './router/router';
 
 // Working with the history API
 // https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API
@@ -47,7 +48,7 @@ import { useContentStore } from './stores/content';
     }
 
     function initVueContentModale(){
-      const app = createApp(Modale).use(createPinia());
+      const app = createApp(Modale).use(createPinia()).use(router);
       const store = useContentStore();
       app.mount('#content-modale');
 

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

@@ -0,0 +1,14 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import ModaleView from '../vuejs/Modale.vue';
+
+const routes = [
+    { path: '/node/:id', component: ModaleView, name: 'modale' },
+    { path: '/', component: ModaleView, name: 'home' },
+  ];
+  
+  const router = createRouter({
+    history: createWebHistory(),
+    routes,
+  });
+  
+  export default router;

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

@@ -92,6 +92,10 @@ export const useContentStore = defineStore('content', {
           this.loading = false;
         }
       },
+      emptyAll() {
+        this.etape = {};
+        this.page = {};
+      },
     },
   });
 

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

@@ -1,6 +1,6 @@
 <template>
   <Transition>
-    <div v-if="etape.etape_number">
+    <div v-if="isEtapeValid">
       <header>
         <h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
         <h2>{{etape.title}}</h2>
@@ -16,10 +16,7 @@
           <p v-html="partie.text"></p>
         </div>
       </main>
-  
-  
-  
-  
+
   <!--     
       <div v-if="loading">Loading...</div>
       <div v-if="error">{{ error }}</div>
@@ -40,7 +37,7 @@
     </div>
   </Transition>
   <Transition>
-    <div v-if="page.title">
+    <div v-if="isPageValid">
       <header>
         <h1>{{ page.title }}</h1>
       </header>
@@ -52,25 +49,66 @@
 </template>
 
 <script setup>
-  import { watch } from 'vue';
-  import { storeToRefs } from 'pinia';
-  import { useContentStore } from '../stores/content';
+import { ref, computed, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useContentStore } from '../stores/content';
+import { useRoute, useRouter } from 'vue-router';
 
-  const store = useContentStore();
+const router = useRouter();
+const store = useContentStore();
+const route = useRoute();
 
-  const { 
-    loading, error,
-    href,
-    etape,
-    page,
+const { loading, error, href, etape, page } = storeToRefs(store);
 
-  } = storeToRefs(store);
+watch(() => route.params.id, (newId) => {
+  store.fetchEtapeData(newId);
+  if (!etape.value.data) {
+    store.fetchStaticData(newId);
+  }
+});
 
-  watch(() => href.value, (newHref) => {
-    if (newHref) {
-      history.pushState(null, '', newHref);
+watch(() => href.value, (newHref) => {
+  const relativePath = newHref.split('.fr')[1];
+  if (relativePath && (relativePath !== '' || relativePath !== '/')) {
+    router.push(relativePath);
+  } else {
+    store.emptyAll();
+  }
+});
+
+
+const isEtapeValid = computed(() => {
+  return etape.value && !isObjectEmpty(etape.value);
+});
+
+const isPageValid = computed(() => {
+  return page.value && !isObjectEmpty(page.value);
+});
+
+// Utility function to check if an object and its children are empty
+function isObjectEmpty(obj) {
+  if (obj === null || obj === undefined || typeof obj !== 'object') {
+    return true;
+  }
+  for (const key in obj) {
+    if (Object.hasOwnProperty.call(obj, key)) {
+      const value = obj[key];
+      if (Array.isArray(value)) {
+        if (value.length > 0) {
+          return false;
+        }
+      } else if (typeof value === 'object') {
+        if (!isObjectEmpty(value)) {
+          return false;
+        }
+      } else if (value !== null && value !== undefined && value !== '') {
+        return false;
+      }
     }
-  });
+  }
+  return true;
+}
+
 </script>
 
 <style>