mAj

parcoursup/components/result-list.riot

@@ -1,14 +1,36 @@
 <result-list>
+  <!--
+    ==========================================================================
+    COMPOSANT <result-list>
+
+    RÔLE : afficher la liste des formations retournées par l'API sous forme de cartes.
+
+    PROPS reçues depuis <app> :
+      - results    : tableau de formations (objets creerFormation)
+      - hasSearched: boolean → true si l'utilisateur a lancé au moins une recherche
+      - loading    : boolean → true pendant un appel API
+      - ondetail   : callback(index) → ouvrir la fiche détail de la formation
+      - onselect   : callback(index) → ajouter la formation au comparateur
+
+    Ce composant est "passif" : il ne fait aucun appel API, il affiche
+    uniquement les données transmises par le parent.
+    ==========================================================================
+  -->
+
   <div class="results">
 
+    <!-- Message "aucun résultat" : affiché si la recherche est terminée et vide -->
     <div class="message" if={ props.results.length === 0 && props.hasSearched && !props.loading }>
       Aucun résultat trouvé
     </div>
 
+    <!-- Message de chargement : affiché pendant l'appel API -->
     <div class="message" if={ props.loading }>
       Chargement...
     </div>
 
+    <!-- Boucle sur les formations : "each" est la directive de boucle de Riot -->
+    <!-- key={ formation.id } permet à Riot d'optimiser le rendu (évite les re-rendus inutiles) -->
     <div each={ (formation, index) in props.results } key={ formation.id } class="card">
       <h3>{ formation.nom }</h3>
       <p><b>Établissement :</b> { formation.etablissement }</p>
@@ -16,8 +38,11 @@
       <p><b>Filière :</b> { formation.filiere }</p>
       <p><b>Taux d'accès :</b> { formation.tauxAcces }%</p>
 
+      <!-- bind(this, index) : passe l'index en argument au handler sans créer de closure -->
       <button onclick={ afficherDetail.bind(this, index) }>Voir détail</button>
       <button onclick={ ajouterALaSelection.bind(this, index) }>Ajouter à la sélection</button>
+
+      <!-- Bouton "Localiser" : affiché uniquement si la formation a des coordonnées GPS -->
       <button onclick={ localiserSurCarte.bind(this, formation) } if={ formation.latitude != null }>Localiser</button>
     </div>
 
@@ -26,20 +51,28 @@
   <script>
     export default {
 
-      // Déclencher l'affichage du détail d'une formation
+      // Demande au parent d'afficher la vue détail pour la formation à cet index
       afficherDetail(index) {
         this.props.ondetail(index);
       },
 
-      // Ajouter une formation à la sélection
+      // Demande au parent d'ajouter la formation à la sélection du comparateur
       ajouterALaSelection(index) {
         this.props.onselect(index);
       },
 
-      // Centrer la carte sur la formation
+      // ========================================================================
+      // localiserSurCarte(formation)
+      // RÔLE : centrer la carte Leaflet sur cette formation.
+      //
+      // Communication avec <map-view> via window.mapFocus :
+      // Les composants Riot ne peuvent pas communiquer directement entre eux
+      // (ils ne sont pas parent/enfant ici). On utilise donc une fonction globale
+      // window.mapFocus définie par <map-view> dans son onMounted.
+      // ========================================================================
       localiserSurCarte(formation) {
         if (window.mapFocus) {
-          window.mapFocus(formation.id);
+          window.mapFocus(formation.id); // <map-view> centre la carte sur ce marqueur
         }
       }