templates/job_board/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% set extendClass = 'offer-page' %}
  3. {% block page_contents %}
  4. <section class="section section-page-title bg-gradient py-xl-5 py-4" data-aos='fade-down'>
  5.   <div class="container">
  6.     <div class="row">
  7.       <div class="col-12 text-center text-white">
  8.         <h1 class="page-name font-weight-bold my-2">
  9.           {% trans %}Offres d’emploi{% endtrans %}<br/>
  10.           {% trans %}Alternances et stages{% endtrans %}
  11.         </h1>
  12.         <div class='font-weight-bold'>{{ totalJob }} {% trans %}offres{% endtrans %}</div>
  13.       </div>
  14.     </div>
  15.   </div>
  16. </section>
  18. <section class="section section-form section-form-2 mb-2 mt-4">
  19.   <div class="container">
  20.     <div class="row">
  21.       <div class="col-12 mx-auto mb-4" data-aos='fade-up'>
  22.         <div class="offres-search-box py-3 px-xl-5 px-lg-4 px-3">
  23.           <div class="font-20 font-weight-bold mb-3 text-black text-uppercase text-center line-height-normal">{% trans %}RECHERCHEZ UNE OFFRE QUI CORRESPOND AVEC VOTRE PROFIL{% endtrans %}</div>
  24.           
  25.             <form id="filter-form" data-aos='fade-up'>
  26.               <div class="d-flex align-items-lg-start align-items-end">
  27.                 <div class="mr-4 flex-grow-1">
  28.                   <div class="row">
  29.                     <div class="col-lg-4">
  30.                       <div class="form-group">
  31.                         <select data-none-selected-text="{% trans %}Type de contrat{% endtrans %}" class="select-multiple form-control submit-change" name="contract[]" multiple="multiple">
  32.                           {% for contract in contracts %}
  33.                             <option value="{{ contract.id }}">{{ contract.name }}</option>
  34.                           {% endfor %}
  35.                         </select>
  36.                       </div>
  37.                     </div>
  38.                     <div class="col-lg-4">
  39.                       <div class="form-group">
  40.                         <select data-none-selected-text="{% trans %}Domaine/Expertise{% endtrans %}" class="select-multiple form-control submit-change" name="expertise[]" multiple="multiple">
  41.                           {% for expertise in expertises %}
  42.                             <option value="{{ expertise.id }}">{{ expertise.name }}</option>
  43.                           {% endfor %}
  44.                         </select>
  45.                       </div>
  46.                     </div>
  47.                     <div class="col-lg-4">
  48.                       <div class="form-group">
  49.                         <select data-none-selected-text="{% trans %}À proximité du campus{% endtrans %}" class="select-multiple form-control submit-change" name="campuses[]" multiple="multiple">
  50.                           {% for campus in campuses %}
  51.                             <option value="{{ campus.id }}">{{ campus.name }}</option>
  52.                           {% endfor %}
  53.                         </select>
  54.                       </div>
  55.                     </div>
  56.                   </div>
  57.                 </div>
  58.                 <div class="ml-auto">
  59.                   <div class="font-30 cursor mb-lg-0 mb-3" id="clear-filter" title="{% trans %}Annuler toutes les recherches{% endtrans %}" data-toggle="tooltip" data-placement="top"><i class="fa-solid fa-arrows-rotate"></i></div>
  60.                 </div>
  61.               </div>
  62.               <div class="text-dark-purple mb-2">{% trans %}Recherche par compétences{% endtrans %}</div>
  63.               <div class="list-offre-checkbox submit-checkbox">
  64.                 {% for i,skill in skills %}
  65.                 <label class="switch">
  66.                   <input type="checkbox" name="skill[{{ i }}]" value="{{ skill.id }}">
  67.                   <span class="slider">{{ skill.name }}</span>
  68.                 </label>
  69.                 {% endfor %}
  70.               </div>
  71.               <div class="show-all text-center mt-2">
  72.                 <a id="show-all"><i class="fal fa-angles-down bounce"></i></a>
  73.                 <a id="hide-all" style="display: none;"><i class="fal fa-angles-up bounce"></i></a>
  74.               </div>
  75.             </form>
  76.             
  77.         </div>
  78.       </div>
  79.     </div>
  80.   </div>
  81. </section>
  83. <section class="section section-offer mb-4">
  84.   <div class="container">
  85.   
  86.     <div class="row">
  87.       <div class="col-12 mb-4">
  88.         <div class="text-dark-purple" data-aos='fade-up'>(<span id="total-job">{{ totalJob }}</span>) {% trans %}résultat(s) trouvé(s){% endtrans %}</div>
  89.       </div>
  90.     </div>
  92.     <div class="row" id="result-data">
  93.       {% for job in jobs %}
  94.         {% include 'job_board/_item_job.html.twig' %}
  95.       {% endfor %}
  96.     </div>
  97.     
  98.   </div>
  99. </section>
  100. {% endblock %}
  102. {% block custom_javascripts %}
  103. <script src="{{ asset('assets/js/multiselect.js') }}"></script>
  104. <script type="text/javascript">
  105. $(document).ready(function(){
  106.   $('.select-multiple').each(function(){
  107.     var none_text = $(this).attr('data-none-selected-text');
  108.     $(this).multiselect({
  109.       afterSelect: function(values){
  110.         alert("Select value: "+values);
  111.       },
  112.       buttonTextAlignment: 'left',
  113.       nonSelectedText: none_text,
  114.       nSelectedText: '{% trans %}sélectionné(s){% endtrans %}'
  115.     });
  116.   });
  118.   $('.submit-change,.submit-checkbox input').change(function(){
  119.     filterData();
  120.   });
  122.   function filterData(){
  123.     let data = $('#filter-form').serialize(); console.log(data);
  124.     $.ajax({
  125.       url: "{{ path('job.filter') }}",
  126.       type: "POST",
  127.       dataType: 'json',
  128.       data : data,
  129.       success: function(result) {
  130.         $('#result-data').html(result.data);
  131.         $('#total-job').text(result.total);
  132.       }
  133.     }).always(function () {});
  134.   }
  136.   $('#clear-filter').click(function(){
  137.     $('.select-multiple').val('').multiselect('refresh');
  138.     $('.submit-checkbox input').prop('checked', false);
  139.     filterData();
  140.   });
  141. });
  142. </script>
  144. {% endblock %}