ressources pedagogiques

2026-06-13 20:44:47 +02:00
parent d7be7756dd
commit 29914a1041
4 changed files with 236 additions and 76 deletions
--- 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>
--- 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">