From f69991be14b1f78695ca5878ceec23c9ef55d4ac Mon Sep 17 00:00:00 2001
From: Helen Root <helenroot1@gmail.com>
Date: Mon, 6 May 2024 17:14:30 +0200
Subject: [PATCH] Fix remaining cases of outdated use of accordion component

---
 .../QualityMeasureSummary.vue                 | 120 +++++++++---------
 frontend/src/components/GraphComponent.vue    |   8 +-
 .../components/MultiYearSummaryStatistics.vue |  44 ++++---
 .../CanteenEditor/PublicationForm/index.vue   |   2 +-
 .../BadgesExplanation.vue                     |  58 +++++----
 5 files changed, 120 insertions(+), 112 deletions(-)

diff --git a/frontend/src/components/DiagnosticSummary/QualityMeasureSummary.vue b/frontend/src/components/DiagnosticSummary/QualityMeasureSummary.vue
index 632b2e1e6..a5e7b50f3 100644
--- a/frontend/src/components/DiagnosticSummary/QualityMeasureSummary.vue
+++ b/frontend/src/components/DiagnosticSummary/QualityMeasureSummary.vue
@@ -68,69 +68,71 @@
       class="mt-10"
       :items="[{ title: 'Données détaillées', titleLevel: 'h5' }]"
     >
-      <QualityDiagnosticValue
-        v-for="(field, idx) in totalFields"
-        :key="`total-${idx}`"
-        :text="field.text"
-        :value="diagnostic[field.key]"
-      />
-      <div class="my-8">
+      <template v-slot:content>
         <QualityDiagnosticValue
-          text="Mode de saisie des données"
-          :value="isDetailedDiagnostic ? 'Détaillée' : 'Simplifiée'"
-        />
-      </div>
-      <div class="my-8">
-        <QualityDiagnosticValue
-          v-for="(field, idx) in egalimFields"
-          :key="`egalim-${idx}`"
-          :text="field.text"
-          :value="diagnostic[field.key]"
-        />
-      </div>
-      <div class="my-8 mb-0">
-        <QualityDiagnosticValue
-          v-for="(field, idx) in familyFields"
-          :key="`family-${idx}`"
+          v-for="(field, idx) in totalFields"
+          :key="`total-${idx}`"
           :text="field.text"
           :value="diagnostic[field.key]"
         />
-      </div>
-      <div v-if="isDetailedDiagnostic">
-        <h6 class="font-weight-bold fr-text grey--text text--darken-3 mt-4">
-          Catégories EGAlim par famille de produit
-        </h6>
-        <FamiliesGraph :diagnostic="diagnostic" :height="$vuetify.breakpoint.xs ? '440px' : '380px'" />
-      </div>
-      <v-btn
-        v-if="hasActiveTeledeclaration"
-        outlined
-        small
-        color="primary"
-        class="fr-btn--tertiary px-2"
-        :disabled="true"
-      >
-        <v-icon small class="mr-2">$check-line</v-icon>
-        Données télédéclarées
-      </v-btn>
-      <v-btn
-        v-else-if="showEditButton"
-        outlined
-        small
-        color="primary"
-        class="fr-btn--tertiary px-2 mb-6"
-        :to="{
-          name: 'DiagnosticTunnel',
-          params: {
-            canteenUrlComponent: this.canteenUrlComponent,
-            year: diagnostic.year,
-            measureId: 'qualite-des-produits',
-          },
-        }"
-      >
-        <v-icon small class="mr-2">$pencil-line</v-icon>
-        Modifier mes données
-      </v-btn>
+        <div class="my-8">
+          <QualityDiagnosticValue
+            text="Mode de saisie des données"
+            :value="isDetailedDiagnostic ? 'Détaillée' : 'Simplifiée'"
+          />
+        </div>
+        <div class="my-8">
+          <QualityDiagnosticValue
+            v-for="(field, idx) in egalimFields"
+            :key="`egalim-${idx}`"
+            :text="field.text"
+            :value="diagnostic[field.key]"
+          />
+        </div>
+        <div class="my-8 mb-0">
+          <QualityDiagnosticValue
+            v-for="(field, idx) in familyFields"
+            :key="`family-${idx}`"
+            :text="field.text"
+            :value="diagnostic[field.key]"
+          />
+        </div>
+        <div v-if="isDetailedDiagnostic">
+          <h6 class="font-weight-bold fr-text grey--text text--darken-3 mt-4">
+            Catégories EGAlim par famille de produit
+          </h6>
+          <FamiliesGraph :diagnostic="diagnostic" :height="$vuetify.breakpoint.xs ? '440px' : '380px'" />
+        </div>
+        <v-btn
+          v-if="hasActiveTeledeclaration"
+          outlined
+          small
+          color="primary"
+          class="fr-btn--tertiary px-2"
+          :disabled="true"
+        >
+          <v-icon small class="mr-2">$check-line</v-icon>
+          Données télédéclarées
+        </v-btn>
+        <v-btn
+          v-else-if="showEditButton"
+          outlined
+          small
+          color="primary"
+          class="fr-btn--tertiary px-2 mb-6"
+          :to="{
+            name: 'DiagnosticTunnel',
+            params: {
+              canteenUrlComponent: this.canteenUrlComponent,
+              year: diagnostic.year,
+              measureId: 'qualite-des-produits',
+            },
+          }"
+        >
+          <v-icon small class="mr-2">$pencil-line</v-icon>
+          Modifier mes données
+        </v-btn>
+      </template>
     </DsfrAccordion>
   </div>
   <div class="fr-text" v-else-if="usesCentralDiagnostic">
diff --git a/frontend/src/components/GraphComponent.vue b/frontend/src/components/GraphComponent.vue
index 9434f4601..1bab29025 100644
--- a/frontend/src/components/GraphComponent.vue
+++ b/frontend/src/components/GraphComponent.vue
@@ -3,9 +3,11 @@
     <component v-if="heading" :is="headingLevel" :id="headingId" :class="headingClasses">{{ heading }}</component>
     <VueApexCharts v-bind="$attrs" />
     <DsfrAccordion :items="[{ title: 'Description du graphique' }]" class="mb-2">
-      <div :id="descriptionId">
-        <slot name="description"></slot>
-      </div>
+      <template v-slot:content>
+        <div :id="descriptionId">
+          <slot name="description"></slot>
+        </div>
+      </template>
     </DsfrAccordion>
   </div>
 </template>
diff --git a/frontend/src/components/MultiYearSummaryStatistics.vue b/frontend/src/components/MultiYearSummaryStatistics.vue
index c1377ce12..f6ad446f4 100644
--- a/frontend/src/components/MultiYearSummaryStatistics.vue
+++ b/frontend/src/components/MultiYearSummaryStatistics.vue
@@ -12,27 +12,29 @@
         :width="width || '100%'"
       />
       <DsfrAccordion :items="[{ title: 'Description du graphique' }]" :style="`width: ${width}`" class="mb-2">
-        <div id="multi-year-graph-description">
-          <p>
-            Les pourcentages d'achats par année pour cette cantine sont :
-          </p>
-          <ol class="mb-4">
-            <li v-for="(year, idx) in years" :key="year">
-              {{ year }} : {{ seriesData.bio[idx] }} % bio, {{ seriesData.sustainable[idx] }} % de qualité et durable
-              (hors bio), {{ 100 - seriesData.bio[idx] - seriesData.sustainable[idx] }} % hors EGAlim
-            </li>
-          </ol>
-          <p class="mb-0">
-            Rappel de l'objectif : Les repas servis comportent au moins {{ applicableRules.qualityThreshold }} % de
-            produits de qualité et durables dont au moins {{ applicableRules.bioThreshold }} % issus de l'agriculture
-            biologique ou en conversion, pour les cantines
-            {{
-              applicableRules.hasQualityException
-                ? `dans la région « ${regionDisplayName} »`
-                : "en France métropolitaine"
-            }}.
-          </p>
-        </div>
+        <template v-slot:content>
+          <div id="multi-year-graph-description">
+            <p>
+              Les pourcentages d'achats par année pour cette cantine sont :
+            </p>
+            <ol class="mb-4">
+              <li v-for="(year, idx) in years" :key="year">
+                {{ year }} : {{ seriesData.bio[idx] }} % bio, {{ seriesData.sustainable[idx] }} % de qualité et durable
+                (hors bio), {{ 100 - seriesData.bio[idx] - seriesData.sustainable[idx] }} % hors EGAlim
+              </li>
+            </ol>
+            <p class="mb-0">
+              Rappel de l'objectif : Les repas servis comportent au moins {{ applicableRules.qualityThreshold }} % de
+              produits de qualité et durables dont au moins {{ applicableRules.bioThreshold }} % issus de l'agriculture
+              biologique ou en conversion, pour les cantines
+              {{
+                applicableRules.hasQualityException
+                  ? `dans la région « ${regionDisplayName} »`
+                  : "en France métropolitaine"
+              }}.
+            </p>
+          </div>
+        </template>
       </DsfrAccordion>
     </div>
     <p v-else class="my-4 text-left">Données non renseignées</p>
diff --git a/frontend/src/views/CanteenEditor/PublicationForm/index.vue b/frontend/src/views/CanteenEditor/PublicationForm/index.vue
index f4c0ec7b3..b2023da32 100644
--- a/frontend/src/views/CanteenEditor/PublicationForm/index.vue
+++ b/frontend/src/views/CanteenEditor/PublicationForm/index.vue
@@ -86,7 +86,7 @@
         <ImagesField :canteen="canteen" :start="imageHeaderLimit" :end="additionalImagesMax" class="mt-0 mb-4" />
       </div>
       <DsfrAccordion v-if="isPublished" :items="[{ title: 'Ajouter un aperçu sur votre site' }]" class="my-6">
-        <template>
+        <template v-slot:content>
           <AddPublishedCanteenWidget :canteen="canteen" />
         </template>
       </DsfrAccordion>
diff --git a/frontend/src/views/PublicCanteenStatisticsPage/BadgesExplanation.vue b/frontend/src/views/PublicCanteenStatisticsPage/BadgesExplanation.vue
index 2d922526c..fbac4b7d4 100644
--- a/frontend/src/views/PublicCanteenStatisticsPage/BadgesExplanation.vue
+++ b/frontend/src/views/PublicCanteenStatisticsPage/BadgesExplanation.vue
@@ -1,34 +1,36 @@
 <template>
   <DsfrAccordion :items="[{ title: 'Comment réussir les objectifs EGAlim ?' }]">
-    <div v-for="measure in keyMeasures" :key="measure.id">
-      <v-row class="mb-2 mt-4 mx-0" align="center">
-        <v-img
-          width="30"
-          max-width="30"
-          contain
-          :src="`/static/images/badges/${measure.badgeId}.svg`"
-          class="mr-2"
-          alt=""
-        ></v-img>
-        <h4>{{ measure.title }}</h4>
-      </v-row>
-      <div v-if="measure.id === 'qualite-des-produits'">
-        <p>
-          Les repas servis dans la cantine comportent au moins 50 % de produits de qualité et durables dont au moins 20
-          % issus de l'agriculture biologique ou en conversion en France continentale. Consultez
-          <a
-            href="https://ma-cantine.agriculture.gouv.fr/blog/16"
-            target="_blank"
-            title="notre blog - ouvre une nouvelle fenêtre"
-          >
-            notre blog
-            <v-icon color="primary" small>mdi-open-in-new</v-icon>
-          </a>
-          pour le seuil des autres régions.
-        </p>
+    <template v-slot:content>
+      <div v-for="measure in keyMeasures" :key="measure.id">
+        <v-row class="mb-2 mt-4 mx-0" align="center">
+          <v-img
+            width="30"
+            max-width="30"
+            contain
+            :src="`/static/images/badges/${measure.badgeId}.svg`"
+            class="mr-2"
+            alt=""
+          ></v-img>
+          <h4>{{ measure.title }}</h4>
+        </v-row>
+        <div v-if="measure.id === 'qualite-des-produits'">
+          <p>
+            Les repas servis dans la cantine comportent au moins 50 % de produits de qualité et durables dont au moins
+            20 % issus de l'agriculture biologique ou en conversion en France continentale. Consultez
+            <a
+              href="https://ma-cantine.agriculture.gouv.fr/blog/16"
+              target="_blank"
+              title="notre blog - ouvre une nouvelle fenêtre"
+            >
+              notre blog
+              <v-icon color="primary" small>mdi-open-in-new</v-icon>
+            </a>
+            pour le seuil des autres régions.
+          </p>
+        </div>
+        <p v-else style="white-space: break-spaces;">{{ measure.successExplanation }}</p>
       </div>
-      <p v-else style="white-space: break-spaces;">{{ measure.successExplanation }}</p>
-    </div>
+    </template>
   </DsfrAccordion>
 </template>