templates/fronts/list_chercheurs.html.twig line 1

  1. {% extends 'base_front.html.twig' %}
  3. {% block title %}Nos chercheurs{% endblock %}
  5. {% block body %}
  6. <section id="content">
  7.     <div class="col-mt-30">
  10.         <section id="researchers-section" class="py-5">
  11.     <div class="container">
  12.         <!-- Titre -->
  13.         {% if nomStructure %}
  14.          <h2 class="section-title text-center mb-5">{{nomStructure}}</h2>
  15.         {% else  %}
  16.             <h2 class="section-title text-center mb-5">Nos Chercheurs</h2>
  17.         {% endif  %}
  18.         
  19.         <!-- Filtres améliorés -->
  20.         <div class="filter-container mb-5">
  21.             <form id="filterForm" class="filter-form">
  22.                 <div class="row g-3">
  23.                     <div class="col-md-4">
  24.                         <div class="filter-group">
  25.                             <label for="filterEtablissement" class="filter-label">Établissement</label>
  26.                             <select name="filterEtablissement" id="filterEtablissement" class="form-select">
  27.                                 <option value="">Tous les établissements</option>
  28.                                 {% for etablissement in etablissements %}
  29.                                     <option value="{{ etablissement.id }}">{{ etablissement.nomLong }}</option>
  30.                                 {% endfor %}
  31.                             </select>
  32.                         </div>
  33.                     </div>
  34.                     <div class="col-md-4">
  35.                         <div class="filter-group">
  36.                             <label for="filterStructure" class="filter-label">Structure de recherche</label>
  37.                             <select name="filterStructure" id="filterStructure" class="form-select">
  38.                                 <option value="">Toutes les structures</option>
  39.                                 {% for structure in structures %}
  40.                                     <option value="{{ structure.id }}">{{ structure.nomLong }}</option>
  41.                                 {% endfor %}
  42.                             </select>
  43.                         </div>
  44.                     </div>
  45.                     <div class="col-md-4">
  46.                         <div class="filter-group">
  47.                             <label for="filterNom" class="filter-label">Nom du chercheur</label>
  48.                             <div class="input-with-icon">
  49.                                 <input type="text" id="filterNom" class="form-control" placeholder="Rechercher par nom">
  50.                                 <i class="fas fa-search"></i>
  51.                             </div>
  52.                         </div>
  53.                     </div>
  54.                 </div>
  55.             </form>
  56.         </div>
  58.         <!-- Cartes des chercheurs -->
  59.         <div id="chercheurContainer" class="row g-4">
  61.             {% for chercheur in chercheurs %}
  62.                     <div class="col-lg-4 col-md-6 mb-4 chercheur-card"
  63.                          data-etablissement="{% if chercheur.etablissement is not null %}{{ chercheur.etablissement.id }}{% endif %}"
  64.                          data-structure="{{ chercheur.structure.id }}"
  65.                          data-nom="{{ chercheur.nom }} {{ chercheur.prenom }}">
  66.                         <a href="{{ path('app_chercheurs_details', {'idChercheur': chercheur.id}) }}" class="researcher-link">
  67.                             <div class="researcher-card">
  68.                                 <div class="researcher-image">
  69.                                     {% if chercheur.photo is not null %}
  70.                                     <img src="/upload/chercheurs/{{ chercheur.photo }}" alt="{{ chercheur.nom }}" class="img-fluid"
  71.                                      style="width: 100px; height: 100px;">
  72.                                 {% else %}
  73.                                     <img src="/front/icons/utilisateur.png" alt="{{ chercheur.nom }}" class="img-fluid"
  74.                                      style="width: 100px; height: 100px;">
  75.                                 {% endif %}
  77.                                     <div class="researcher-badge">{{chercheur.etablissement.nomCourt}}</div>
  78.                                 </div>
  79.                                 <div class="researcher-info">
  80.                                     <h3 class="researcher-name">{{ chercheur.nom }} {{ chercheur.prenom }}</h3>
  81.                                     <div class="researcher-meta">
  82.                                         <span class="research-structure">{{ chercheur.structure ? chercheur.structure.nomLong : '' }}</span>
  83.                                         <span class="institution">{{ chercheur.etablissement ? chercheur.etablissement.nomLong : '' }}</span>
  84.                                     </div>
  85.                                     <div class="researcher-cta">
  86.                                         <span>Voir profil <i class="fas fa-arrow-right"></i></span>
  87.                                     </div>
  88.                                 </div>
  89.                             </div>
  91.                             
  92.                         </a>
  93.                     </div>
  94.                 {% endfor %}
  98.             
  99.         </div>
  101.         <!-- Pagination -->
  102.         <div id="paginationControls" class="pagination-container text-center mt-5"></div>
  103.         
  104.         
  105.        <!-- <div  class="pagination-container mt-5">
  106.             <nav aria-label="Page navigation">
  107.                 <ul class="pagination justify-content-center">
  108.                     <li class="page-item disabled">
  109.                         <a class="page-link" href="#" tabindex="-1">
  110.                             <i class="fas fa-chevron-left"></i>
  111.                         </a>
  112.                     </li>
  113.                     <li class="page-item active"><a class="page-link" href="#">1</a></li>
  114.                     <li class="page-item"><a class="page-link" href="#">2</a></li>
  115.                     <li class="page-item"><a class="page-link" href="#">3</a></li>
  116.                     <li class="page-item">
  117.                         <a class="page-link" href="#">
  118.                             <i class="fas fa-chevron-right"></i>
  119.                         </a>
  120.                     </li>
  121.                 </ul>
  122.             </nav>
  123.         </div>-->
  124.     </div>
  125. </section>
  132.        
  134. <script>
  135.     document.addEventListener('DOMContentLoaded', function() {
  136.         const filterForm = document.getElementById('filterForm');
  137.         const chercheurCards = document.querySelectorAll('.chercheur-card');
  138.         const paginationControls = document.getElementById('paginationControls');
  139.         const perPage = 15; // Number of items per page
  140.         let currentPage = 1;
  142.         function filterChercheurs() {
  143.             const filterEtablissement = document.getElementById('filterEtablissement').value.toLowerCase();
  144.             const filterStructure = document.getElementById('filterStructure').value.toLowerCase();
  145.             const filterNom = document.getElementById('filterNom').value.toLowerCase();
  147.             let visibleCards = [];
  148.             chercheurCards.forEach(card => {
  149.                 const etablissement = card.getAttribute('data-etablissement').toLowerCase();
  150.                 const structure = card.getAttribute('data-structure').toLowerCase();
  151.                 const nom = card.getAttribute('data-nom').toLowerCase();
  153.                 let isVisible = true;
  155.                 if (filterEtablissement && etablissement !== filterEtablissement) {
  156.                     isVisible = false;
  157.                 }
  158.                 if (filterStructure && structure !== filterStructure) {
  159.                     isVisible = false;
  160.                 }
  161.                 if (filterNom && !nom.includes(filterNom)) {
  162.                     isVisible = false;
  163.                 }
  165.                 card.style.display = isVisible ? 'block' : 'none';
  166.                 if (isVisible) {
  167.                     visibleCards.push(card);
  168.                 }
  169.             });
  171.             paginate(visibleCards);
  172.         }
  176.         function paginate(items) {
  177.             const totalPages = Math.ceil(items.length / perPage);
  178.             paginationControls.innerHTML = '';
  180.             // Create the container structure
  181.             const container = document.createElement('div');
  182.             container.className = 'pagination-container mt-5';
  184.             const nav = document.createElement('nav');
  185.             nav.setAttribute('aria-label', 'Page navigation');
  187.             const ul = document.createElement('ul');
  188.             ul.className = 'pagination justify-content-center';
  190.             // Previous button
  191.             const prevLi = document.createElement('li');
  192.             prevLi.className = 'page-item disabled';
  193.             const prevLink = document.createElement('a');
  194.             prevLink.className = 'page-link';
  195.             prevLink.href = '#';
  196.             prevLink.setAttribute('tabindex', '-1');
  197.             
  198.             const prevIcon = document.createElement('i');
  199.             prevIcon.className = 'fas fa-chevron-left';
  200.             prevLink.appendChild(prevIcon);
  201.             prevLi.appendChild(prevLink);
  202.             ul.appendChild(prevLi);
  204.             // Add click handler for previous button
  205.             prevLink.addEventListener('click', (e) => {
  206.                 e.preventDefault();
  207.                 if (currentPage > 1) {
  208.                     currentPage--;
  209.                     updatePagination(items, totalPages);
  210.                 }
  211.             });
  213.             for (let i = 1; i <= totalPages; i++) {
  214.                 const li = document.createElement('li');
  215.                 li.className = 'page-item' + (i === currentPage ? ' active' : '');
  217.                 const a = document.createElement('a');
  218.                 a.className = 'page-link';
  219.                 a.href = '#';
  220.                 a.textContent = i;
  222.                 a.addEventListener('click', (e) => {
  223.                     e.preventDefault();
  224.                     currentPage = i;
  225.                     updatePagination(items, totalPages);
  226.                 });
  228.                 li.appendChild(a);
  229.                 ul.appendChild(li);
  230.             }
  232.              // Next button
  233.             const nextLi = document.createElement('li');
  234.             nextLi.className = 'page-item';
  235.             const nextLink = document.createElement('a');
  236.             nextLink.className = 'page-link';
  237.             nextLink.href = '#';
  239.             const nextIcon = document.createElement('i');
  240.             nextIcon.className = 'fas fa-chevron-right';
  241.             nextLink.appendChild(nextIcon);
  242.             nextLi.appendChild(nextLink);
  243.             ul.appendChild(nextLi);
  245.     // Add click handler for next button
  246.             nextLink.addEventListener('click', (e) => {
  247.                 e.preventDefault();
  248.                 if (currentPage < totalPages) {
  249.                     currentPage++;
  250.                     updatePagination(items, totalPages);
  251.                 }
  252.             });
  254.     // Build the DOM structure
  255.             nav.appendChild(ul);
  256.             container.appendChild(nav);
  257.             paginationControls.appendChild(container);
  259.             updatePagination(items, totalPages);
  260.         }
  262.         function updatePagination(items, totalPages) {
  264.             items.forEach((item, index) => {
  265.                 item.style.display = (index >= (currentPage - 1) * perPage && index < currentPage * perPage) ? 'block' : 'none';
  266.             });
  268.             // Update pagination controls state
  269.             const pageItems = document.querySelectorAll('.page-item');
  270.             pageItems.forEach((item, index) => {
  271.         // Skip prev/next buttons (first and last elements)
  272.                 if (index > 0 && index < pageItems.length - 1) {
  273.             const pageNum = index; // Because index 0 is prev button
  274.             item.classList.toggle('active', pageNum === currentPage);
  275.                 }
  276.             });
  277.             // Update prev/next button states
  278.             const prevButton = pageItems[0];
  279.             const nextButton = pageItems[pageItems.length - 1];
  281.             prevButton.classList.toggle('disabled', currentPage === 1);
  282.             nextButton.classList.toggle('disabled', currentPage === totalPages);
  283.          }
  284. /* function paginate(items) {
  285.     const totalPages = Math.ceil(items.length / perPage);
  286.     paginationControls.innerHTML = '';
  288.     const container = document.createElement('div');
  289.     container.className = 'pagination-container mt-5';
  291.     const nav = document.createElement('nav');
  292.     nav.setAttribute('aria-label', 'Page navigation');
  294.     const ul = document.createElement('ul');
  295.     ul.className = 'pagination justify-content-center';
  297.     // Bouton Précédent
  298.     const prevLi = document.createElement('li');
  299.     prevLi.className = 'page-item' + (currentPage === 1 ? ' disabled' : '');
  300.     const prevLink = document.createElement('a');
  301.     prevLink.className = 'page-link';
  302.     prevLink.href = '#';
  303.     prevLink.setAttribute('tabindex', currentPage === 1 ? '-1' : '');
  304.     
  305.     const prevIcon = document.createElement('i');
  306.     prevIcon.className = 'fas fa-chevron-left';
  307.     prevLink.appendChild(prevIcon);
  308.     prevLi.appendChild(prevLink);
  309.     ul.appendChild(prevLi);
  311.     prevLink.addEventListener('click', (e) => {
  312.         e.preventDefault();
  313.         if (currentPage > 1) {
  314.             currentPage--;
  315.             updatePagination(items, totalPages);
  316.         }
  317.     });
  319.     // Toujours afficher la première page
  320.     createPageItem(1, ul);
  322.     // Afficher '...' si nécessaire avant la page courante
  323.     if (currentPage > 3) {
  324.         const ellipsisLi = document.createElement('li');
  325.         ellipsisLi.className = 'page-item disabled';
  326.         const ellipsisLink = document.createElement('a');
  327.         ellipsisLink.className = 'page-link';
  328.         ellipsisLink.href = '#';
  329.         ellipsisLink.textContent = '...';
  330.         ellipsisLi.appendChild(ellipsisLink);
  331.         ul.appendChild(ellipsisLi);
  332.     }
  334.     // Afficher la page précédente et la page courante si elles sont dans l'intervalle
  335.     if (currentPage > 2) {
  336.         createPageItem(currentPage - 1, ul);
  337.     }
  338.     if (currentPage !== 1 && currentPage !== totalPages) {
  339.         createPageItem(currentPage, ul);
  340.     }
  342.     // Afficher '...' si nécessaire après la page courante
  343.     if (currentPage < totalPages - 2) {
  344.         const ellipsisLi = document.createElement('li');
  345.         ellipsisLi.className = 'page-item disabled';
  346.         const ellipsisLink = document.createElement('a');
  347.         ellipsisLink.className = 'page-link';
  348.         ellipsisLink.href = '#';
  349.         ellipsisLink.textContent = '...';
  350.         ellipsisLi.appendChild(ellipsisLink);
  351.         ul.appendChild(ellipsisLi);
  352.     }
  354.     // Toujours afficher la dernière page
  355.     if (totalPages > 1) {
  356.         createPageItem(totalPages, ul);
  357.     }
  359.     // Bouton Suivant
  360.     const nextLi = document.createElement('li');
  361.     nextLi.className = 'page-item' + (currentPage === totalPages ? ' disabled' : '');
  362.     const nextLink = document.createElement('a');
  363.     nextLink.className = 'page-link';
  364.     nextLink.href = '#';
  366.     const nextIcon = document.createElement('i');
  367.     nextIcon.className = 'fas fa-chevron-right';
  368.     nextLink.appendChild(nextIcon);
  369.     nextLi.appendChild(nextLink);
  370.     ul.appendChild(nextLi);
  372.     nextLink.addEventListener('click', (e) => {
  373.         e.preventDefault();
  374.         if (currentPage < totalPages) {
  375.             currentPage++;
  376.             updatePagination(items, totalPages);
  377.         }
  378.     });
  380.     nav.appendChild(ul);
  381.     container.appendChild(nav);
  382.     paginationControls.appendChild(container);
  384.     updatePagination(items, totalPages);
  385. }
  387. function createPageItem(pageNum, ul) {
  388.     const li = document.createElement('li');
  389.     li.className = 'page-item' + (pageNum === currentPage ? ' active' : '');
  391.     const a = document.createElement('a');
  392.     a.className = 'page-link';
  393.     a.href = '#';
  394.     a.textContent = pageNum;
  396.     a.addEventListener('click', (e) => {
  397.         e.preventDefault();
  398.         currentPage = pageNum;
  399.         updatePagination();
  400.     });
  402.     li.appendChild(a);
  403.     ul.appendChild(li);
  404. }
  406. function updatePagination(items, totalPages) {
  407.     items.forEach((item, index) => {
  408.         item.style.display = (index >= (currentPage - 1) * perPage && index < currentPage * perPage) ? 'block' : 'none';
  409.     });
  410.     
  411.     // Reconstruire les contrôles de pagination
  412.     paginate(items);
  413. }*/
  415.         document.getElementById('filterEtablissement').addEventListener('change', () => {
  416.             currentPage = 1;
  417.             filterChercheurs();
  418.         });
  420.         document.getElementById('filterStructure').addEventListener('change', () => {
  421.             currentPage = 1;
  422.             filterChercheurs();
  423.         });
  425.         document.getElementById('filterNom').addEventListener('input', () => {
  426.             currentPage = 1;
  427.             filterChercheurs();
  428.         });
  430.         filterChercheurs(); // Initial filter on page load
  431.     });
  432. </script>
  435. {% endblock %}