templates/index/fragments/elite/recherche_par_profil.html.twig line 1

Open in your IDE?
  1. <link rel="stylesheet" href="{{ asset('build/css/annonces/elite/list_recherche_standard.css') }}">
  2. <link rel="stylesheet" href="{{ asset('build/css/annonces/elite/liste_profils_strategiques.css') }}">
  4. <input type="hidden" id="identifiant_profil" name="identifiant_profil" value=""/>
  6. <script>
  7.     function toggleDropdown(dropdownId) {
  8.         const dropdown = document.getElementById(dropdownId);
  9.         const header = dropdown ? dropdown.previousElementSibling : null;
  11.         // Fermer toutes les autres dropdowns
  12.         document.querySelectorAll('.dropdown-list').forEach(otherDropdown => {
  13.             if (otherDropdown.id !== dropdownId) {
  14.                 otherDropdown.classList.remove('active');
  15.                 const otherHeader = otherDropdown.previousElementSibling;
  16.                 if (otherHeader && otherHeader.classList.contains('select-header')) {
  17.                     otherHeader.classList.remove('active');
  18.                 }
  19.             }
  20.         });
  22.         // Toggle la dropdown ciblée
  23.         if (dropdown) {
  24.             dropdown.classList.toggle('active');
  25.         }
  26.         if (header && header.classList.contains('select-header')) {
  27.             header.classList.toggle('active');
  28.         }
  29.     }
  31.     function selectOption(element, dropdownId) {
  32.         const dropdown = document.getElementById(dropdownId);
  33.         if (!dropdown) {
  34.             return;
  35.         }
  38.         if (element) {
  39.             let identifiantProfil = element.getAttribute('data-key');
  40.             const inputHidden = document.getElementById("identifiant_profil");
  41.             if (inputHidden) {
  42.                 inputHidden.value = identifiantProfil;
  43.             }
  45.         }
  46.         // Retirer la sélection précédente dans cette dropdown uniquement
  47.         dropdown.querySelectorAll('.option-item').forEach(item => {
  48.             item.classList.remove('selected');
  49.         });
  51.         // Ajouter la sélection à l'élément cliqué
  52.         element.classList.add('selected');
  54.         // Trouver le header correspondant à cette dropdown
  55.         const header = dropdown.previousElementSibling;
  56.         if (header && header.classList.contains('select-header')) {
  57.             const text = element.textContent.trim().replace('→', '').trim();
  58.             header.innerHTML = `<span class="selected-value">${text}</span>`;
  59.         }
  61.         // Fermer la dropdown
  62.         toggleDropdown(dropdownId);
  63.     }
  65.     // Fermer les dropdowns si on clique ailleurs
  66.     document.addEventListener('click', function (event) {
  67.         const customSelects = document.querySelectorAll('.custom-select');
  68.         let clickedInsideAnySelect = false;
  70.         // Vérifier si le clic est à l'intérieur d'une des custom-select
  71.         customSelects.forEach(customSelect => {
  72.             if (customSelect.contains(event.target)) {
  73.                 clickedInsideAnySelect = true;
  74.             }
  75.         });
  77.         // Si le clic est en dehors de toutes les custom-select, fermer toutes les dropdowns
  78.         if (!clickedInsideAnySelect) {
  79.             document.querySelectorAll('.dropdown-list').forEach(dropdown => {
  80.                 dropdown.classList.remove('active');
  81.                 const header = dropdown.previousElementSibling;
  82.                 if (header && header.classList.contains('select-header')) {
  83.                     header.classList.remove('active');
  84.                 }
  85.             });
  86.         }
  88.         if (!clickedInsideAnySelect) {
  89.             let   dropdownId = null;
  90.             dropdownId = document.getElementById('dropdown2');
  91.             if (dropdownId) {
  92.                 dropdownId.classList.remove('active');
  93.             }
  94.             dropdownId = document.getElementById('dropdown3');
  95.             if (dropdownId) {
  96.                 dropdownId.classList.remove('active');
  97.             }
  98.         }
  100.     });
  102.     // Fonction utilitaire pour obtenir la valeur sélectionnée d'une dropdown
  103.     function getSelectedValue(dropdownId) {
  104.         const dropdown = document.getElementById(dropdownId);
  105.         if (!dropdown)
  106.         {
  107.             return null;
  108.         }
  110.         const selectedOption = dropdown.querySelector('.option-item.selected');
  111.         return selectedOption ? selectedOption.textContent.trim().replace('→', '').trim() : null;
  112.     }
  114.     // Fonction utilitaire pour définir la valeur sélectionnée d'une dropdown
  115.     function setSelectedValue(dropdownId, value) {
  116.         const dropdown = document.getElementById(dropdownId);
  117.         if (!dropdown)
  118.         {
  119.             return;
  120.         }
  122.         const options = dropdown.querySelectorAll('.option-item');
  123.         const header = dropdown.previousElementSibling;
  125.         options.forEach(option => {
  126.             const optionText = option.textContent.trim().replace('→', '').trim();
  127.             if (optionText === value) {
  128.                 // Retirer les sélections précédentes
  129.                 dropdown.querySelectorAll('.option-item').forEach(item => {
  130.                     item.classList.remove('selected');
  131.                 });
  133.                 // Sélectionner cette option
  134.                 option.classList.add('selected');
  136.                 // Mettre à jour le header
  137.                 if (header && header.classList.contains('select-header')) {
  138.                     header.innerHTML = `<span class="selected-value">${value}</span>`;
  139.                 }
  140.             }
  141.         });
  142.     }
  144.     function resetSelection(selectId) {
  145.         // Retirer toutes les sélections
  146.         document.querySelectorAll(`#${selectId} .option-item`).forEach(item => {
  147.             item.classList.remove('selected');
  148.         });
  150.         // Réinitialiser le header avec le texte par défaut
  151.         const header = document.querySelector(`#${selectId} .select-header`);
  152.         const placeholderText = selectId === 'select1'
  153.                 ? 'Voir tous les critères disponibles'
  154.                 : 'Voir tous les profils stratégiques';
  155.         header.innerHTML = `<span class="placeholder">${placeholderText}</span>`;
  157.         const inputHidden = document.getElementById("identifiant_profil");
  158.         if (inputHidden) {
  159.             inputHidden.value = "";
  160.         }
  162.         toggleDropdown("dropdown2");
  163.     }
  165. </script>
  168. {% if    app.user|default     %}  
  169.     {% if  app.user is hasService(elite_provider.codeServices)  %} 
  170.         {# OK !! #}
  171.     {% else    %}   
  172.         <script>
  173.             document.addEventListener('DOMContentLoaded', function () {
  174.                 const btnRechercher = document.getElementById('rechercher');
  175.                 const inputHidden = document.getElementById("identifiant_profil");
  176.                 if (inputHidden && btnRechercher) {
  177.                     btnRechercher.addEventListener('click', function (e) {
  178.                         if (inputHidden.value) {
  179.                             e.preventDefault(); // Empêche la soumission du formulaire
  181.                             // AUTHENTIFIÉ non autorisé
  182.                             $("#ModalElite").modal("show");
  183.                             return false;
  184.                         } else {
  186.                             //const form = document.getElementById("form_reprendre");
  187.                             //form.submit();
  188.                         }
  190.                     });
  191.                 }
  192.             });
  193.         </script>
  195.     {% endif    %} 
  196. {% else    %} 
  198.     <script>
  199.         document.addEventListener('DOMContentLoaded', function () {
  200.             const btnRechercher = document.getElementById('rechercher');
  201.             const inputHidden = document.getElementById("identifiant_profil");
  202.             if (inputHidden && btnRechercher) {
  203.                 btnRechercher.addEventListener('click', function (e) {
  204.                     if (inputHidden.value) {
  205.                         e.preventDefault(); // Empêche la soumission du formulaire
  207.                         // AUTHENTIFIÉ non autorisé
  208.                         $("#ModalElite").modal("show");
  209.                         return false;
  210.                     } else {
  212.                         //const form = document.getElementById("form_reprendre");
  213.                         //form.submit();
  214.                     }
  216.                 });
  217.             }
  218.         });
  219.     </script>
  222. {% endif    %}
  225. {% set profils = elite_provider.listProfilsStrategiques %}
  227. <div class="form-row">
  228.     <div class="col-10 offset-1 col-md-4 offset-md-1 mr-2 mt-2 pt-2 text-left text-md-right nowrap_custom">
  229.         Quel type d’entreprise vous intéresse ? 
  230.     </div>
  232.     <div class="col-10 offset-1 col-md-5 offset-md-0 mt-2 input-group">
  233.         <div class="custom-select restore-native" id="select2" style="border: 1px solid #003366;">
  234.             <div class="select-header d-flex" onclick="toggleDropdown('dropdown2');" >
  235.                 <div class="placeholder"  style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ">Choisissez parmi 14 profils</div>
  236.                 <div class="logo d-none d-lg-block" style="flex-basis:30%">&nbsp;</div>
  237.             </div>
  239.             <div class="select-dropdown" id="dropdown2">
  241.                 <div class="reset-option" onclick="resetSelection('select2');">
  242.                     <i class="fas fa-times-circle reset-icon"></i>
  243.                     <span>Réinitialiser la sélection</span>
  244.                 </div>
  246.                 {% for categorie,profil in  profils %}
  247.                     <div class="option-category">
  248.                         {{ categorie }}
  249.                     </div>
  250.                     {% for k,p  in  profil %} 
  251.                         <div class="option-item" data-key="{{ k }}" onclick="selectOption(this, 'dropdown2');">
  252.                             • {{ p[0] }}
  253.                         </div>
  254.                     {% endfor  %}
  255.                 {% endfor  %} 
  256.             </div>
  258.         </div>
  259.     </div>
  261.     
  262.     <div class="col-12 col-md-1 text-center text-md-left mt-2 d-md-none">
  263.         <a href="{{ lienElitePresentation }}" title="FUSACQ Elite">
  264.             <img src="/FUSACQ2020/images/fusacq_elite.gif" alt="FUSACQ Elite">
  265.         </a>
  266.     </div>
  269. </div>
  271. {% include 'elite/includes/elite_profil_access.html.twig' %}