Concerts

app/pages/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
 
     <!-- ================== -->
     <!-- Fond noir -->
@@ -15,40 +16,17 @@
     <PageSection padded_size="md" content-size="default" class="remonter_concert_list">
       <ConcertCardList>
         <ConcertCard
-          id="1"
-          title="TITRE DU CONCERT EN MAJUSCULE"
-          venue="Nom du lieu, éventuellement de la salle"
-          dateISO="2026-01-15T20:30:00+01:00"
-          dateLabel="Jeudi 15 janvier 2026 — 20h30"
-          description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
-          imageUrl="https://picsum.photos/id/56/500/700"
-          imageAlt="Orchestre sur scène"
-          ctaHref="/concert[id]"
-          detailsHref="/concerts/concert_template"
-        />
-        <ConcertCard
-          id="1"
-          title="TITRE DU CONCERT EN MAJUSCULE"
-          venue="Nom du lieu, éventuellement de la salle"
-          dateISO="2026-01-15T20:30:00+01:00"
-          dateLabel="Jeudi 15 janvier 2026 — 20h30"
-          description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
-          imageUrl="https://picsum.photos/id/56/500/700"
-          imageAlt="Orchestre sur scène"
-          ctaHref="/concert[id]"
-          detailsHref="/concerts/concert_template"
-        />
-        <ConcertCard
-          id="1"
-          title="TITRE DU CONCERT EN MAJUSCULE"
-          venue="Nom du lieu, éventuellement de la salle"
-          dateISO="2026-01-15T20:30:00+01:00"
-          dateLabel="Jeudi 15 janvier 2026 — 20h30"
-          description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
-          imageUrl="https://picsum.photos/id/56/500/700"
-          imageAlt="Orchestre sur scène"
-          ctaHref="/concert[id]"
-          detailsHref="/concerts/concert_template"
+          v-for="c in concerts"
+          :key="c.id"
+          :id="c.slug_concert"
+          :title="c.titre_concert"
+          :lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
+          :dateISO="c.representation_concert?.[0]?.date_debut_representation"
+          :dateLabel="formatDateLong(c.representation_concert?.[0]?.date_debut_representation)"
+          :description="c.resume_concert"
+          :imageUrl="c.image_illustration_concert?.url"
+          :imageAlt="c.image_illustration_concert?.alternativeText"
+          :href="`/concerts/${c.slug_concert}`"
         />
       </ConcertCardList>
     </PageSection>
@@ -65,7 +43,7 @@
           </SectionTitle>
           <SectionContent pad="xs" class="theme_ppt--description">
             <DsText tone="invert" size="lg" class="theme_ppt--txt" >
-              Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions - Ici le texte qui décrit le concept de Tous à l’Orchestre - Dans les régions -
+              Les 95 musiciennes et musiciens proposent chaque saison plus de 120 concerts dans des salles et théâtres, des lieux culturels et des espaces atypiques de la région francilienne. Porté par une forte mission territoriale, l’orchestre s’engage à rendre la musique symphonique accessible à toutes et tous, en la faisant vivre au plus près des habitants grâce notamment à des actions culturelles, pédagogiques et participatives au cœur du territoire.
             </DsText>
             <DsButtonArrow to="/" variant="invert">
                 Carte des événements
@@ -161,12 +139,14 @@
         <BannierePros />
       </SectionContent>
     </PageSection>
+  </div>
 
 </template>
 
 <script setup>
   import { onMounted, computed } from 'vue'
   import { clientLog } from '~/utils/clientLog'
+  import { formatDateLong } from "@/utils/dateFormat.js"
   import SectionContent from '../components/section/SectionContent.vue'
   import DsHeading from '@root/design-system/primitives/DsHeading.vue'
   import DsText from '@root/design-system/primitives/DsText.vue'
@@ -181,7 +161,6 @@
   const runtimeConfig = useRuntimeConfig()
 
   const STRAPI_URL = runtimeConfig.public.strapiUrl
-  console.log("STRAPI_URL : ",STRAPI_URL)
   
   // Config app (pour SEO)
   const config = useAppConfig()
@@ -189,38 +168,34 @@
     title: config.title
   })
 
-  // On récupère le fichier le plus récent de la Media Library Strapi
-  const { data, error } = await useFetch(
-    () => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`
-  )
+  const appConfig = useAppConfig()
+  console.log("Bienvenue : ",appConfig.title)
 
-  const imageUrl = computed(() => {
-    const file = data.value?.[0]
-    console.log("file : ",file)
-    if (!file) return null
-
-    // Si Strapi renvoie une URL absolue (S3/OVH)
-    if (file.url?.startsWith('http')) {
-      return file.url
-    }
-
-    // Si jamais c'était une URL relative
-    return `${STRAPI_URL}${file.url}`
+  //--------------------
+  // DONNÉES POUR LES CONCERTS À VENIR …
+  //--------------------
+  const { concerts, refresh } = useConcerts({
+      locale: "fr-FR",
+      populate: {
+          saison_concert: true,
+          image_illustration_concert: true,
+          representation_concert: { lieu_representation: true },
+      },
+      filters: {
+          saison_concert: {
+            nom_saison: {
+                $eq: "2025/2026",
+            },
+          },
+      },
+      upcomingOnly: true,
+      limit: 3,
   })
 
-  if (error.value) {
-    console.error('Erreur en récupérant les fichiers Strapi :', error.value)
-    clientLog('error', 'Erreur en récupérant les fichiers Strapi', {
-      endpoint: `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`,
-      error: error.value?.message || error.value
-    })
-  }
-
-  const appConfig = useAppConfig()
-  console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
   onMounted(() => {
-    clientLog('info', 'test de log depuis vuejs', {  })
-    clientLog('info', `STRAPI_URL : ${STRAPI_URL}`, { strapiUrl: STRAPI_URL })
+      if (!concerts.value?.length) {
+          refresh()
+      }
   })
 
   //--------------------