public-html2/parcoursup/components/search-bar.riot

<search-bar>
  <div class="search-bar">
    <input
      type="text"
      placeholder="Ex : BUT informatique, Licence droit..."
      oninput={ updateQuery }
      value={ state.query }
      onkeydown={ handleKey }
    />
    <button onclick={ submitSearch }>Rechercher</button>
  </div>

  <div class="filters-toggle">
    <button class="btn btn-small btn-outline" onclick={ toggleFilters }>
      { state.labelFiltres }
    </button>
  </div>

  <div class="filters-panel" if={ state.showFilters }>
    <div class="filter-row">
      <div class="filter-item">
        <label>Type de formation</label>
        <select onchange={ updateFiliere }>
          <option value="">Tous</option>
          <option value="BTS">BTS</option>
          <option value="BUT">BUT</option>
          <option value="Licence">Licence</option>
          <option value="Licence_Las">Licence - L.AS</option>
          <option value="CPGE">CPGE</option>
          <option value="Ecole de Commerce">École de Commerce</option>
          <option value="IFSI">IFSI</option>
          <option value="PASS">PASS</option>
          <option value="EFTS">EFTS</option>
        </select>
      </div>

      <div class="filter-item">
        <label>Sélectivité</label>
        <select onchange={ updateSelectivite }>
          <option value="">Toutes</option>
          <option value="formation sélective">Sélective</option>
          <option value="formation non sélective">Non sélective</option>
        </select>
      </div>

      <div class="filter-item">
        <label>Région</label>
        <select onchange={ updateRegion }>
          <option value="">Toutes</option>
          <option value="Auvergne-Rhône-Alpes">Auvergne-Rhône-Alpes</option>
          <option value="Bourgogne-Franche-Comté">Bourgogne-Franche-Comté</option>
          <option value="Bretagne">Bretagne</option>
          <option value="Centre-Val de Loire">Centre-Val de Loire</option>
          <option value="Corse">Corse</option>
          <option value="Grand Est">Grand Est</option>
          <option value="Guadeloupe">Guadeloupe</option>
          <option value="Guyane">Guyane</option>
          <option value="Hauts-de-France">Hauts-de-France</option>
          <option value="Ile-de-France">Île-de-France</option>
          <option value="La Réunion">La Réunion</option>
          <option value="Martinique">Martinique</option>
          <option value="Mayotte">Mayotte</option>
          <option value="Normandie">Normandie</option>
          <option value="Nouvelle-Aquitaine">Nouvelle-Aquitaine</option>
          <option value="Occitanie">Occitanie</option>
          <option value="Pays de la Loire">Pays de la Loire</option>
          <option value="Provence-Alpes-Côte d'Azur">PACA</option>
        </select>
      </div>
    </div>

    <div class="filter-row">
      <div class="filter-item">
        <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" />
      </div>
    </div>
  </div>

  <script>
    export default {
      state: {
        query: '',
        showFilters: false,
        labelFiltres: 'Filtres avancés',
        filiere: '',
        selectivite: '',
        region: '',
        tauxMin: 0,
        tauxMax: 100
      },

      updateQuery(e) {
        this.update({ query: e.target.value });
      },

      handleKey(e) {
        if (e.key === 'Enter') {
          this.submitSearch();
        }
      },

      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) });
      },

      submitSearch() {
        var filters = {
          filiere: this.state.filiere,
          selectivite: this.state.selectivite,
          region: this.state.region,
          tauxMin: this.state.tauxMin,
          tauxMax: this.state.tauxMax
        };

        this.props.onsearch(this.state.query, filters);
      }
    };
  </script>
</search-bar>