templates/pages/_filter.html.twig line 1

Open in your IDE?
  1. <div class="w-100 d-flex justify-content-center d-block d-md-none">
  2.   <button id="showFilters" class="btn btn-primary m-3 button-responsive">Afficher les filtres</button>
  3.   <button id="hideFilters" class="btn btn-primary m-3 button-responsive d-none">Cacher les filtres</button>
  4. </div>
  6. {{ form_start(form, {attr: {class: 'filter js-filter-form d-none d-md-block'}}) }}
  8.   <div class="filter-tri">
  9.     {{ form_widget(form.ordre, {'attr': {'onchange': 'this.form.submit()'}}) }}
  10.   </div>
  11.   
  12.   <div class="filter-card search-card">
  13.       <p class="filter-title">Recherche :</p>
  14.       {{ form_row(form.nom) }}
  15.   </div>
  17.   {% if form.categories|length > 0 %}
  18.     <div class="filter-card">
  19.       <h4 class="filter-title">Catégorie</h4>
  20.       {% for categorie in form.categories %}
  21.         <div>
  22.           {{ form_widget(categorie) }}
  23.           {{ form_label(categorie) }}
  24.         </div>
  25.       {% endfor %}
  26.     </div>
  27.   {% endif %}
  29.   {% if fromageDisplay or cremerieDisplay %}
  30.     {% if form.laits|length > 0 %}
  31.       <div class="filter-card">
  32.         <h4 class="filter-title">Lait</h4>
  33.         {% for lait in form.laits %}
  34.           <div>
  35.             {{ form_widget(lait) }}
  36.             {{ form_label(lait) }}
  37.           </div>
  38.         {% endfor %}  
  39.       </div>
  40.     {% endif %}
  42.     {% if form.laitsTraitement|length > 0 %}
  43.       <div class="filter-card">
  44.         <h4 class="filter-title">Traitement du lait</h4>
  45.         {% for laitTraitement in form.laitsTraitement %}
  46.           <div>
  47.             {{ form_widget(laitTraitement) }}
  48.             {{ form_label(laitTraitement) }}
  49.           </div>
  50.         {% endfor %}  
  51.       </div>
  52.     {% endif %}
  53.   {% endif %} 
  55.   {% if form.origines|length > 0 %}
  56.     <div class="filter-card">
  57.       <h4 class="filter-title">Provenance</h4>
  58.       {% for origine in form.origines %}
  59.         <div>
  60.           {{ form_widget(origine) }}
  61.           {{ form_label(origine) }}
  62.         </div>
  63.       {% endfor %}  
  64.     </div>
  65.   {% endif %}
  67.   {% if cidreDisplay %}
  68.     {% if form.types|length > 0 %}
  69.       <div class="filter-card">
  70.         <h4 class="filter-title">Cidre</h4>
  71.         {% for type in form.types %}
  72.           <div>
  73.             {{ form_widget(type) }}
  74.             {{ form_label(type) }}
  75.           </div>
  76.         {% endfor %}
  77.       </div>
  78.     {% endif %}
  79.   {% endif %}
  81.   {% if plateauDisplay %}
  82.     {% if form.themesPlateau|length > 0 or nbPersonnesDisplay %}
  83.       <div class="filter-card">
  84.         <h4 class="filter-title">Type du plateau</h4>
  85.         {% if nbPersonnesDisplay %}
  86.           {{ form_label(form.nbPersonnes) }}
  87.           {{ form_widget(form.nbPersonnes) }}
  88.         {% endif %}
  89.         {% for themePlateau in form.themesPlateau %}
  90.           <div>
  91.             {{ form_widget(themePlateau) }}
  92.             {{ form_label(themePlateau) }}
  93.           </div>
  94.         {% endfor %}
  95.       </div>
  96.     {% endif %}
  97.   {% endif %}
  99. <button type="submit" class="btn btn-primary w-100">Filtrer</button>
  101. {{ form_end(form) }}
  103. <script>
  104.   const showFilters = document.getElementById('showFilters');
  105.   const filterForm = document.querySelector('.js-filter-form');
  107.   showFilters.addEventListener('click', () => {
  108.     filterForm.classList.remove('d-none');
  109.     showFilters.classList.add('d-none');
  110.     hideFilters.classList.remove('d-none');
  111.   });
  113.   const hideFilters = document.getElementById('hideFilters');
  114.   hideFilters.addEventListener('click', () => {
  115.     filterForm.classList.add('d-none');
  116.     hideFilters.classList.add('d-none');
  117.     showFilters.classList.remove('d-none');
  118.   });
  119. </script>