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

<template>
  <Transition>
    <div v-if="isEtapeValid">
      <header>
        <h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
        <h2>{{etape.title}}</h2>
        <div>
          <p>Étape n°{{etape.etape_number}}</p>
          <p>Du {{etape.dates.value}} au {{ etape.dates.end_value }}</p>
        </div>
        <img :src="etape.vignette.url" :alt="etape.vignette.alt">
      </header>
      <main>
        <div v-for="partie in etape.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>{{etape.geofield}}</pre></div>
      <div><pre><b>GALERIES</b>{{etape.galeries}}</pre></div>
      <div><pre><b>PARTIES</b>{{etape.parties}}</pre></div>
      <div><pre><b>SAISON</b>{{etape.saison}}</pre></div>
      <div><pre><b>THEMATIQUES</b>{{etape.thematiques}}</pre></div>
  
  
      <div>
      </div>
    </div>
  </Transition>
  <Transition>
    <div v-if="isPageValid">
      <header>
        <h1>{{ page.title }}</h1>
      </header>
      <main>
        <div v-html="page.text"></div>
      </main>
    </div>
  </Transition>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useContentStore } from '../stores/content';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const store = useContentStore();
const route = useRoute();

const { loading, error, href, etape, page } = storeToRefs(store);

watch(() => route.params.id, (newId) => {
  store.fetchEtapeData(newId);
  if (!etape.value.data) {
    store.fetchStaticData(newId);
  }
});

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>
.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.v-leave-from {
  transform: translateY(0%);
  opacity: 1;
}
</style>