From 29914a104109ac7a4c50135c2add3fb101adae5b Mon Sep 17 00:00:00 2001
From: Julie <contact@parisweb.art>
Date: Sat, 13 Jun 2026 20:44:47 +0200
Subject: [PATCH] ressources pedagogiques

---
 README.md                                 |   3 +
 app/components/RessourcesCard.vue         | 207 +++++++++++++++-------
 app/pages/mediation/scolaires.vue         | 101 +++++++++--
 server/api/__strapi__/[collection].get.js |   1 +
 4 files changed, 236 insertions(+), 76 deletions(-)

diff --git a/README.md b/README.md
index 4ddc0db..a361d31 100644
--- a/README.md
+++ b/README.md
@@ -167,6 +167,9 @@ https://bo.orchestre-ile.com/api/home-tous-orchestre?locale=fr-FR&populate[carte
 https://bo.orchestre-ile.com/api/actualites?populate[image_illustration_actu]=true&populate[images_actu]=true&populate[liens_youtube_actu]=true
 ?populate[saison_concert]=true&populate[genre_concert]=true&populate[type_audience_concert]=true&populate[direction_ondif_concert][populate]=postes_artiste_ondif&populate[direction_invite_concert][populate]=postes_artiste_invite&populate[artistes_ondif_concert][populate]=postes_artiste_ondif&populate[artistes_invite_concert][populate]=postes_artiste_invite&populate[image_illustration_concert]=true&populate[images_concert]=true&populate[videos_concert]=true&populate[audios_concert]=true&populate[programme_concert]=true&populate[representation_concert][populate]=lieu_representation&populate[liens_youtube_concert]=true
 
+https://bo.orchestre-ile.com/api/ressources-pedagogiques?populate[illustration_ressource]=true&populate[document_ressource]=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
diff --git a/app/components/RessourcesCard.vue b/app/components/RessourcesCard.vue
index f2b93bd..f3de6bf 100644
--- a/app/components/RessourcesCard.vue
+++ b/app/components/RessourcesCard.vue
@@ -25,86 +25,173 @@
 
     <div class="grid gap-6 p-6">
       <div class="grid gap-3">
-        <h3 class="text-xl font-extrabold leading-tight tracking-tight text-primary">
+        <h3 class="text-xl font-extrabold leading-tight tracking-tight">
           {{ title }}
         </h3>
         <p
           v-if="description"
-          class="text-sm leading-7 text-on-surface-variant"
+          class="text-sm"
         >
           {{ description }}
         </p>
       </div>
 
-      <a
-        v-if="fileUrl"
-        :href="fileUrl"
-        :download="downloadName"
-        class="group flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface transition-colors hover:bg-primary-container"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <span class="min-w-0">
-          <span class="block truncate text-sm font-bold text-primary group-hover:text-on-primary-container">
-            {{ fileLabel }}
-          </span>
-          <span
-            v-if="fileSize"
-            class="block text-xs text-on-surface-variant group-hover:text-on-primary-container/80"
+      <div class="grid gap-3">
+        <template
+          v-for="action in resourceActions"
+          :key="action.id || action.label"
+        >
+          <a
+            v-if="action.url"
+            :href="action.url"
+            :download="getDownloadAttribute(action)"
+            class="group flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface transition-colors hover:bg-primary-container"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            {{ fileSize }}
-          </span>
-        </span>
+            <span class="min-w-0">
+              <span class="block truncate text-sm font-bold text-primary group-hover:text-on-primary-container">
+                {{ action.label }}
+              </span>
+              <span
+                v-if="action.size"
+                class="block text-xs text-on-surface-variant group-hover:text-on-primary-container/80"
+              >
+                {{ action.size }}
+              </span>
+            </span>
 
-        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-primary-container text-primary transition-colors group-hover:bg-primary group-hover:text-on-primary">
-          <span class="material-symbols-outlined text-xl">download</span>
-        </span>
-      </a>
+            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-primary-container text-primary transition-colors group-hover:bg-primary group-hover:text-on-primary">
+              <span class="material-symbols-outlined text-xl">{{ getActionIcon(action) }}</span>
+            </span>
+          </a>
 
-      <div
-        v-else
-        class="flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface opacity-70"
-      >
-        <span>
-          <span class="block text-sm font-bold text-primary">{{ fileLabel }}</span>
-          <span
-            v-if="fileSize"
-            class="block text-xs text-on-surface-variant"
+          <div
+            v-else
+            class="flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface opacity-70"
           >
-            {{ fileSize }}
-          </span>
-        </span>
-        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-surface-container text-outline">
-          <span class="material-symbols-outlined text-xl">download</span>
-        </span>
+            <span>
+              <span class="block text-sm font-bold text-primary">{{ action.label }}</span>
+              <span
+                v-if="action.size"
+                class="block text-xs text-on-surface-variant"
+              >
+                {{ action.size }}
+              </span>
+            </span>
+            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-surface-container text-outline">
+              <span class="material-symbols-outlined text-xl">{{ getActionIcon(action) }}</span>
+            </span>
+          </div>
+        </template>
       </div>
     </div>
   </article>
 </template>
 
-<script lang="ts" setup>
-const props = withDefaults(defineProps<{
-  title: string
-  description?: string
-  imgSrc?: string
-  imgAlt?: string
-  badge?: string
-  fileLabel?: string
-  fileSize?: string
-  fileUrl?: string
-  fileName?: string
-}>(), {
-  description: '',
-  imgSrc: '',
-  imgAlt: '',
-  badge: 'PDF',
-  fileLabel: 'Fiche pédagogique (PDF)',
-  fileSize: '',
-  fileUrl: '',
-  fileName: '',
+<script setup>
+  useHead({
+    link: [
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.googleapis.com',
+      },
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossorigin: '',
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap',
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap',
+      },
+    ],
+  })
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  imgSrc: {
+    type: String,
+    default: '',
+  },
+  imgAlt: {
+    type: String,
+    default: '',
+  },
+  badge: {
+    type: String,
+    default: 'PDF',
+  },
+  fileLabel: {
+    type: String,
+    default: 'Outil pédagogique (PDF)',
+  },
+  fileSize: {
+    type: String,
+    default: '',
+  },
+  fileUrl: {
+    type: String,
+    default: '',
+  },
+  fileName: {
+    type: String,
+    default: '',
+  },
+  linkType: {
+    type: String,
+    default: 'file',
+    validator: (value) => ['file', 'web'].includes(value),
+  },
+  actions: {
+    type: Array,
+    default: () => [],
+  },
 })
 
-const downloadName = computed(() => props.fileName || true)
+const resourceActions = computed(() => {
+  if (props.actions.length) {
+    return props.actions.map((action) => ({
+      id: action.id || action.label,
+      type: action.type || 'file',
+      label: action.label || props.fileLabel,
+      size: action.size || '',
+      url: action.url || '',
+      fileName: action.fileName || '',
+    }))
+  }
+
+  return [
+    {
+      id: 'file',
+      type: props.linkType,
+      label: props.fileLabel,
+      size: props.fileSize,
+      url: props.fileUrl,
+      fileName: props.fileName,
+    },
+  ]
+})
+
+function getDownloadAttribute(action) {
+  if (action.type === 'web') return null
+
+  return action.fileName || true
+}
+
+function getActionIcon(action) {
+  return action.type === 'web' ? 'open_in_new' : 'download'
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/pages/mediation/scolaires.vue b/app/pages/mediation/scolaires.vue
index 5d7b33b..31fc713 100644
--- a/app/pages/mediation/scolaires.vue
+++ b/app/pages/mediation/scolaires.vue
@@ -129,10 +129,13 @@
             ensavoirplus-group="ressources"
           >
             <template #title>
-              TITRE
+              RESSOURCES PÉDAGOGIQUES
             </template>
             <DsText as="p" tone="invert" align="justify">
-             texte
+             Accompagner la préparation des activités musicales et la découverte des concerts.
+            </DsText>
+            <DsText as="p" tone="invert" align="justify">
+             Des outils pour tous les âges de se familiariser avec l'Orchestre, les instruments, la musique symphonique et les compositeurs.
             </DsText>
           </Decalage>
         </PageSection>
@@ -157,6 +160,8 @@
               :file-size="ressource.fileSize"
               :file-url="ressource.fileUrl"
               :file-name="ressource.fileName"
+              :link-type="ressource.linkType"
+              :actions="ressource.actions"
             />
           </section>
         </PageSection>
@@ -222,25 +227,63 @@ et de la programmation jeune public"
     }
   )
 
+  const { items: ressourcesPedagogiquesItems } = useStrapi(
+    "/api/__strapi__/ressources-pedagogiques",
+    {
+      locale: "fr-FR",
+      populate: {
+        illustration_ressource: true,
+        document_ressource: true,
+      },
+      sort: "ordre_ressource:asc",
+      fetchAll: true,
+    }
+  )
+
   // ======================================
   // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
   // ======================================
   const scolaire_donnees_servies = computed(() => scolaires.value?.[0] || {})
   const ressourcesSectionId = "texte_cache_ressources"
-  const ressourcesPedagogiques = [
-    {
-      id: "decouverte-orchestre-symphonique",
-      title: "Découverte de l'orchestre symphonique",
-      description: "Un guide complet pour initier les élèves aux instruments de l'orchestre et à leurs familles. Ce document présente les pupitres, leur rôle et propose des activités d'écoute adaptées au cycle 3.",
-      imgSrc: "/img/photos/orchestre.jpg",
-      imgAlt: "Musiciens de l'orchestre en répétition",
-      badge: "PDF",
-      fileLabel: "Fiche pédagogique (PDF)",
-      fileSize: "2.4 Mo",
-      fileUrl: "",
-      fileName: "",
-    },
-  ]
+  const ressourcesPedagogiques = computed(() =>
+    (ressourcesPedagogiquesItems.value || []).map((ressource) => {
+      const document = ressource.document_ressource
+      const webUrl = ressource.web_ressource || ""
+      const actions = [
+        document?.url
+          ? {
+              id: "pdf",
+              type: "file",
+              label: "Télécharger le document (PDF)",
+              size: formatFileSize(document.size),
+              url: document.url,
+              fileName: document.name || "",
+            }
+          : null,
+        webUrl
+          ? {
+              id: "web",
+              type: "web",
+              label: "Ouvrir la ressource web",
+              url: webUrl,
+            }
+          : null,
+      ].filter(Boolean)
+
+      return {
+        id: ressource.documentId || ressource.id,
+        title: ressource.titre_ressource,
+        description: ressource.description_ressource,
+        imgSrc: ressource.illustration_ressource?.url || "",
+        imgAlt:
+          ressource.illustration_ressource?.alternativeText ||
+          ressource.titre_ressource ||
+          "Ressource pédagogique",
+        badge: getResourceBadge(actions),
+        actions,
+      }
+    })
+  )
 
   const scolairesChiffres = computed(() =>
     (scolaires.value?.[0]?.chiffres_scolaires?.[0]?.chiffres || []).map((item) => ({
@@ -298,6 +341,32 @@ et de la programmation jeune public"
     }
   }
 
+  function getResourceBadge(actions = []) {
+    const hasPdf = actions.some((action) => action.type === "file")
+    const hasWeb = actions.some((action) => action.type === "web")
+
+    if (hasPdf && hasWeb) return "PDF + WEB"
+    if (hasWeb) return "WEB"
+    return "PDF"
+  }
+
+  function formatFileSize(sizeInKo) {
+    const size = Number(sizeInKo)
+    if (!Number.isFinite(size) || size <= 0) return ""
+
+    if (size >= 1024) {
+      return `${formatNumber(size / 1024)} Mo`
+    }
+
+    return `${formatNumber(size)} Ko`
+  }
+
+  function formatNumber(value) {
+    return new Intl.NumberFormat("fr-FR", {
+      maximumFractionDigits: value >= 10 ? 0 : 1,
+    }).format(value)
+  }
+
 </script>
 
 <style lang="scss">
diff --git a/server/api/__strapi__/[collection].get.js b/server/api/__strapi__/[collection].get.js
index 9647549..a052c7c 100644
--- a/server/api/__strapi__/[collection].get.js
+++ b/server/api/__strapi__/[collection].get.js
@@ -24,6 +24,7 @@ const COLLECTION_MAP = {
   "home-partout-pour-tous": "/api/home-partout-pour-tous",
   "home-tous-orchestre": "/api/home-tous-orchestre",
   actualites: "/api/actualites",
+  "ressources-pedagogiques": "/api/ressources-pedagogiques",
 }
 
 export default defineEventHandler(async (event) => {