Concerts

app/pages/concerts/saison.vue

@@ -0,0 +1,71 @@
+<template>
+
+    <div>
+        <PageSection tone="dark" content-size="default">
+          <SectionTitle tone="invert" pad="md">
+            SAISON 2025/2026
+          </SectionTitle>
+        </PageSection>
+        <PageSection padded_size="md" content-size="default" class="">
+          <ConcertCardList :highlight-first="false" :limit-cards-on-breakpoint="false">
+            <ConcertCard
+                v-for="c in concerts"
+                :key="c.id"
+                :id="c.slug_concert"
+                :title="c.titre_concert"
+                :dateISO="c.representation_concert?.[0]?.date_debut_representation"
+                :dateLabel="formatDateLong(c.representation_concert?.[0]?.date_debut_representation)"
+                :lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
+                :adresse_lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
+                :description="c.resume_concert"
+                :imageUrl="c.image_illustration_concert?.url"
+                :imageAlt="c.image_illustration_concert?.alternativeText"
+                :href="`${c.slug_concert}`"
+            />
+          </ConcertCardList>
+        </PageSection>
+    </div>
+</template>
+
+
+
+<script setup>
+
+    import { onMounted } from "vue"
+    import { formatDateLong } from "@/utils/dateFormat.js"
+
+    const { concerts, refresh } = useConcerts({
+        locale: "fr-FR",
+        populate: {
+            saison_concert: true,
+            genre_concert: true,
+            type_audience_concert: true,
+            direction_ondif_concert: { postes_artiste_ondif: true },
+            direction_invite_concert: { postes_artiste_invite: true },
+            artistes_ondif_concert: { postes_artiste_ondif: true },
+            artistes_invite_concert: { postes_artiste_invite: true },
+            image_illustration_concert: true,
+            images_concert: true,
+            videos_concert: true,
+            audios_concert: true,
+            programme_concert: true,
+            representation_concert: { lieu_representation: true },
+            liens_youtube_concert: true,
+        },
+        filters: {
+            saison_concert: {
+                nom_saison: {
+                    $eq: "2025/2026",
+            },
+            },
+        },
+        upcomingOnly: false,
+    })
+
+    onMounted(() => {
+        if (!concerts.value?.length) {
+            refresh()
+        }
+    })
+
+</script>