generated from gitea_admin/default
home tous à l'orchestre
This commit is contained in:
10
README.md
10
README.md
@@ -124,7 +124,15 @@ https://bo.orchestre-ile.com/api/pro-programmer?locale=fr-FR&populate[bios]=true
|
||||
API Instruments
|
||||
https://bo.orchestre-ile.com/api/parc-instruments?locale=fr-FR&populate=illustration_instrument
|
||||
|
||||
https://bo.orchestre-ile.com/api/home-partout-pour-tous?locale=fr-FR&populate[carte]=true&populate[carte][populate]=illustration=true
|
||||
|
||||
https://bo.orchestre-ile.com/api/home-partout-pour-tous?locale=fr-FR&populate[carte][populate][illustration]=true
|
||||
|
||||
https://bo.orchestre-ile.com/api/home-tous-orchestre?locale=fr-FR&populate[carte][populate][illustration]=true
|
||||
|
||||
/api/home-partout-pour-tous?locale=fr-FR&populate[carte][populate][illustration]=true
|
||||
|
||||
|
||||
j'ai créé le endpoint home-tous-orchestre strapi pour saisir le contenu de cards. Donc peux-tu le remplacer par ce contenu strapi ?
|
||||
|
||||
### Afficher les données récupérées ou les erreurs dans la console
|
||||
const { items: scolaires, pending, error } = useStrapi(
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
textColor="invert"
|
||||
size="aplati"
|
||||
borderColor="invert"
|
||||
:aria-pressed="activeFilter === f.key"
|
||||
:class="{ 'is-active': activeFilter === f.key }"
|
||||
:aria-pressed="selectedFilterKey === f.key"
|
||||
:class="{ 'is-active': selectedFilterKey === f.key }"
|
||||
@click="activeFilter = f.key"
|
||||
>
|
||||
{{ f.label }}
|
||||
@@ -34,14 +34,23 @@
|
||||
>
|
||||
|
||||
<DsCard
|
||||
v-for="card in filteredCards"
|
||||
v-for="card in cards"
|
||||
:key="card.id"
|
||||
v-show="isCardVisible(card)"
|
||||
class="theme_tao--cardlist--card"
|
||||
>
|
||||
<div class="theme_tao--cardlist--card--wp">
|
||||
<!-- Image -->
|
||||
<div class="theme_tao--cardlist--card--img">
|
||||
<NuxtImg :src="card.imgSrc" :alt="card.imgAlt" />
|
||||
<NuxtImg
|
||||
v-if="card.imgSrc"
|
||||
:src="card.imgSrc"
|
||||
:alt="card.imgAlt"
|
||||
:width="card.imgWidth"
|
||||
:height="card.imgHeight"
|
||||
loading="lazy"
|
||||
sizes="(max-width: 399px) 280px, 350px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
@@ -51,9 +60,12 @@
|
||||
{{ card.title }}
|
||||
</DsHeading>
|
||||
</NuxtLink>
|
||||
<DsText as="p" tone="default" :clamp="6">
|
||||
<span v-html="card.descriptionHtml" />
|
||||
</DsText>
|
||||
<DsHeading v-else as="h5" tone="default">
|
||||
{{ card.title }}
|
||||
</DsHeading>
|
||||
<div v-if="card.descriptionBlocks" class="theme_tao--cardlist--card--description">
|
||||
<StrapiBlocksConvert :blocks="card.descriptionBlocks" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DsCard>
|
||||
@@ -65,7 +77,7 @@
|
||||
|
||||
<script setup>
|
||||
|
||||
import { ref, computed, watch, nextTick } from 'vue'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import DsCard from '@root/design-system/components/DsCard.vue'
|
||||
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||
import DsButton from '@root/design-system/primitives/DsButton.vue'
|
||||
@@ -77,84 +89,92 @@
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
|
||||
// Variable qui contient les catégories qui permettront de filtrer
|
||||
const filters = [
|
||||
{ key: 'action_culturelle', label: 'Action Culturelle' },
|
||||
]
|
||||
// variable pour donner le filtre actif
|
||||
// filtre par défaut : le premier
|
||||
const activeFilter = ref(filters[0].key)
|
||||
const activeFilter = ref("")
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// CONTENUS DES CARTES
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
const cards = ref([
|
||||
const { items: homeTousOrchestre } = useStrapi(
|
||||
"/api/__strapi__/home-tous-orchestre",
|
||||
{
|
||||
id: 'insta-1',
|
||||
imgSrc: '/contenus/insta_ondif_7.jpg',
|
||||
imgAlt: 'le titre du post',
|
||||
title: "TOUS À VÉRONE LE TEMPS D'UN CONCERT!",
|
||||
descriptionHtml: `✨Tous à l’orchestre !
|
||||
Ces dernières semaines, l’Orchestre a vibré bien au-delà de la scène, au fil d’actions culturelles et éducatives riches en échanges et en découvertes.
|
||||
locale: "fr-FR",
|
||||
populate: {
|
||||
carte: {
|
||||
illustration: true,
|
||||
},
|
||||
},
|
||||
limit: 1,
|
||||
}
|
||||
)
|
||||
|
||||
Entre ateliers d’enregistrement, éveil musical, et rencontres avec les musiciens de l’orchestre, chaque instant a permis de créer du lien et de faire vivre la musique autrement.
|
||||
const homeTousOrchestreContent = computed(() => homeTousOrchestre.value?.[0] || null)
|
||||
|
||||
Des expériences au plus près des publics et des territoires, où la musique devient transmission, curiosité et émotion partagée.
|
||||
const cards = computed(() => {
|
||||
const cartes = homeTousOrchestreContent.value?.carte || []
|
||||
const publishedCards = cartes.filter((carte) => carte.publication !== false)
|
||||
|
||||
Retour en images sur ces instants qui font vivre l’Orchestre.🎶✨`,
|
||||
tags: ['action_culturelle'],
|
||||
url: ""
|
||||
},
|
||||
{
|
||||
id: 'insta-2',
|
||||
imgSrc: '/contenus/insta_ondif_9.jpg',
|
||||
imgAlt: 'le titre du post',
|
||||
title: "LA MUSIQUE POUR LES TOUT-PETITS!",
|
||||
descriptionHtml: `Les petites oreilles explorent l'univers d'un compositeur et découvrent la contrebasse de près, lors d'un atelier 0-3 ans à la médiathèque de Rungis. Un beau moment d'éveil musical, avec le soutien de la Fondation Groupe ADP`,
|
||||
tags: ['action_culturelle'],
|
||||
url: ""
|
||||
},
|
||||
{
|
||||
id: 'insta-3',
|
||||
imgSrc: '/contenus/insta_ondif_6.jpg',
|
||||
imgAlt: 'le titre du post',
|
||||
title: "C'EST L'HISTOIRE D'UN CHIEN MÉLOMANE",
|
||||
descriptionHtml: `✨ Ça c’est fait ! Retour sur février et mars ✨ Ces deux derniers mois, l’Orchestre a surpris son public à chaque instant !<br>
|
||||
Entre concerts symphoniques, spectacles mêlant danse et musique, et concerts commentés, nous avons eu le plaisir d’offrir des expériences inédites et reçu des retours enthousiastes de spectateurs conquis.<br>
|
||||
Retour en images sur ces temps forts qui font vibrer l’Orchestre ! 🎶`,
|
||||
tags: ['action_culturelle'],
|
||||
url: ""
|
||||
},
|
||||
{
|
||||
id: 'insta-4',
|
||||
imgSrc: '/contenus/insta_ondif_8.jpg',
|
||||
imgAlt: 'le titre du post',
|
||||
title: "LEVER DE RIDEAU À MONTEREAU",
|
||||
descriptionHtml: `Les élèves du conservatoire de Montereau-Fault-Yvonne assurent la première partie du concert "La Symphonie des corps" au Majestic, avec une performance de vocal painting débordante d'énergie et de créativité !`,
|
||||
tags: ['action_culturelle'],
|
||||
url: ""
|
||||
},
|
||||
{
|
||||
id: 'insta-5',
|
||||
imgSrc: '/contenus/insta_ondif_2.jpg',
|
||||
imgAlt: 'le titre du post',
|
||||
title: "À LA DÉCOUVERTE DES INSTRUMENTS À VENT",
|
||||
descriptionHtml: `Guidés avec bienveillance par Annouck et Hélène, les enfants explorent les instruments à vent : le cor et la flûte éveillent leur curiosité`,
|
||||
tags: ['action_culturelle'],
|
||||
url: ""
|
||||
},
|
||||
])
|
||||
return publishedCards.map((carte, index) => {
|
||||
const image = getStrapiCardImage(carte)
|
||||
const category = carte.categorie || ""
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Computed : cartes filtrées
|
||||
//--------------------------------------------------------------------------
|
||||
const filteredCards = computed(() => {
|
||||
return cards.value.filter(card =>
|
||||
card.tags.includes(activeFilter.value)
|
||||
)
|
||||
return {
|
||||
id: carte.id || String(index + 1),
|
||||
imgSrc: image?.url || "",
|
||||
imgAlt: image?.alternativeText || image?.caption || carte.titre || "",
|
||||
imgWidth: image?.width || undefined,
|
||||
imgHeight: image?.height || undefined,
|
||||
title: carte.titre || "",
|
||||
descriptionBlocks: carte.description || null,
|
||||
tags: category ? [category] : [],
|
||||
url: carte.url || "",
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const filters = computed(() => {
|
||||
const categories = new Map()
|
||||
|
||||
cards.value.forEach((card) => {
|
||||
card.tags.forEach((tag) => {
|
||||
if (!categories.has(tag)) {
|
||||
categories.set(tag, tag)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
return Array.from(categories, ([key, label]) => ({ key, label }))
|
||||
})
|
||||
|
||||
watch(
|
||||
filters,
|
||||
(availableFilters) => {
|
||||
if (!availableFilters.length) {
|
||||
activeFilter.value = ""
|
||||
return
|
||||
}
|
||||
|
||||
if (!availableFilters.some((filter) => filter.key === activeFilter.value)) {
|
||||
activeFilter.value = availableFilters[0].key
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const selectedFilterKey = computed(() => activeFilter.value || filters.value[0]?.key || "")
|
||||
|
||||
function isCardVisible(card) {
|
||||
return !selectedFilterKey.value || card.tags.includes(selectedFilterKey.value)
|
||||
}
|
||||
|
||||
function getStrapiCardImage(carte) {
|
||||
const image = carte.illustration || null
|
||||
|
||||
return Array.isArray(image) ? image[0] : image
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -193,21 +213,34 @@
|
||||
align-items: center;
|
||||
}
|
||||
&--img {
|
||||
max-width: 280px;
|
||||
width: min(100%, 280px);
|
||||
aspect-ratio: 4 / 5;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #f2f2f2;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
max-height: 280px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (min-width: 400px) {
|
||||
img {
|
||||
max-height: 350px;
|
||||
}
|
||||
width: min(100%, 350px);
|
||||
}
|
||||
}
|
||||
&--content {
|
||||
max-width: 320px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
&--description {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 12;
|
||||
}
|
||||
}
|
||||
&--card {
|
||||
/* base: mobile-first */
|
||||
|
||||
@@ -22,6 +22,7 @@ const COLLECTION_MAP = {
|
||||
"parametres": "/api/parametres",
|
||||
instruments: "/api/parc-instruments",
|
||||
"home-partout-pour-tous": "/api/home-partout-pour-tous",
|
||||
"home-tous-orchestre": "/api/home-tous-orchestre",
|
||||
}
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
Reference in New Issue
Block a user