ressources pedagogiques

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">