mAj

parcoursup/components/search-bar.riot

@@ -1,4 +1,9 @@
 <search-bar>
+  <!--
+    Barre de recherche + filtres avancés (toggle)
+    Communique avec le parent via props.onsearch(query, filters)
+  -->
+
   <div class="search-bar">
     <input
       type="text"
@@ -10,6 +15,7 @@
     <button onclick={ submitSearch }>Rechercher</button>
   </div>
 
+  <!-- Bouton pour afficher/masquer les filtres avancés -->
   <div class="filters-toggle">
     <button class="btn btn-small btn-outline" onclick={ toggleFilters }>
       { state.labelFiltres }
@@ -18,6 +24,8 @@
 
   <div class="filters-panel" if={ state.showFilters }>
     <div class="filter-row">
+
+      <!-- Les valeurs correspondent exactement aux champs de l'API Parcoursup -->
       <div class="filter-item">
         <label>Type de formation</label>
         <select onchange={ updateFiliere }>
@@ -74,7 +82,6 @@
         <label>Taux d'accès min (%)</label>
         <input type="number" min="0" max="100" value={ state.tauxMin } oninput={ updateTauxMin } placeholder="0" />
       </div>
-
       <div class="filter-item">
         <label>Taux d'accès max (%)</label>
         <input type="number" min="0" max="100" value={ state.tauxMax } oninput={ updateTauxMax } placeholder="100" />
@@ -84,62 +91,45 @@
 
   <script>
     export default {
+
       state: {
-        query: '',
-        showFilters: false,
+        query:        '',
+        showFilters:  false,
         labelFiltres: 'Filtres avancés',
-        filiere: '',
-        selectivite: '',
-        region: '',
-        tauxMin: 0,
-        tauxMax: 100
+        filiere:      '',
+        selectivite:  '',
+        region:       '',
+        tauxMin:      0,
+        tauxMax:      100
       },
 
-      updateQuery(e) {
-        this.update({ query: e.target.value });
-      },
+      updateQuery(e)     { this.update({ query:       e.target.value }); },
+      updateFiliere(e)   { this.update({ filiere:     e.target.value }); },
+      updateSelectivite(e) { this.update({ selectivite: e.target.value }); },
+      updateRegion(e)    { this.update({ region:      e.target.value }); },
+      updateTauxMin(e)   { this.update({ tauxMin: Number(e.target.value) }); },
+      updateTauxMax(e)   { this.update({ tauxMax: Number(e.target.value) }); },
 
+      // Déclenche la recherche avec la touche Entrée
       handleKey(e) {
-        if (e.key === 'Enter') {
-          this.submitSearch();
-        }
+        if (e.key === 'Enter') { this.submitSearch(); }
       },
 
+      // Affiche ou masque les filtres avancés
       toggleFilters() {
         var visible = !this.state.showFilters;
-        var label   = visible ? 'Masquer les filtres' : 'Filtres avancés';
-        this.update({ showFilters: visible, labelFiltres: label });
-      },
-
-      updateFiliere(e) {
-        this.update({ filiere: e.target.value });
-      },
-
-      updateSelectivite(e) {
-        this.update({ selectivite: e.target.value });
-      },
-
-      updateRegion(e) {
-        this.update({ region: e.target.value });
-      },
-
-      updateTauxMin(e) {
-        this.update({ tauxMin: Number(e.target.value) });
-      },
-
-      updateTauxMax(e) {
-        this.update({ tauxMax: Number(e.target.value) });
+        this.update({ showFilters: visible, labelFiltres: visible ? 'Masquer les filtres' : 'Filtres avancés' });
       },
 
+      // Collecte tous les filtres et appelle le callback du parent
       submitSearch() {
         var filters = {
-          filiere: this.state.filiere,
+          filiere:     this.state.filiere,
           selectivite: this.state.selectivite,
-          region: this.state.region,
-          tauxMin: this.state.tauxMin,
-          tauxMax: this.state.tauxMax
+          region:      this.state.region,
+          tauxMin:     this.state.tauxMin,
+          tauxMax:     this.state.tauxMax
         };
-
         this.props.onsearch(this.state.query, filters);
       }
     };