MYSOPHAL/front/picklist.list.php

<?php
ob_Start();

use Glpi\Event;

include ('../inc/includes.php');

Session::checkLoginUser();

if (!in_array($_SESSION['glpiactiveprofile']['name'], ['Super-Admin', 'Admin'])) {
  Html::redirect($CFG_GLPI["root_doc"] . "/front/central.php");
  exit;
}
  
 
	if (Session::getCurrentInterface() == "helpdesk") {
	   Html::helpHeader("Fonctions et Structures", '', $_SESSION["glpiname"]);
	} else {
	   Html::header("Fonctions et Structures", '', "", "");
	}
	 
    function get_pick_listes() {
		global $DB;
	
		$query = "
			SELECT 
				p.id, 
				p.name, 
				p.value,
				p.created_on, 
				concat(u.realname,' ',u.firstname) as created_by 
			FROM picklist p
			LEFT JOIN glpi_users u ON p.created_by = u.id
		";
	
		// Execute the query
		$result = $DB->query($query);
	
		// Check if there are results and fetch them
		if ($result && $result->num_rows > 0) {
			$res = [];
			while ($row = $result->fetch_assoc()) {
				$res[] = $row;
			}
			return $res;
		}
	
		// Return null if no results
		return null;
	}	
	
	
  $res = get_pick_listes() ;


echo '
<div class="center"> 
<table border="0" class="tab_cadrehov" style="font-size: 12px;">
  <thead>
    <tr class="tab_bg_2" style="text-align: center; vertical-align: middle;">
      <th></th>
      <th>Type</th>
      <th>valeur</th>
      <th>Créé par</th>
      <th>Créé Le</th>
      <th></th>
    </tr>
    <tr class="tab_bg_2" style="text-align: center; vertical-align: middle;">
      <th></th>
      <th style="text-align: center;">
        <select class="js-example-basic-single" name="type" id="type" onchange="filtre();" style="text-align: center;">
          <option value="all">ALL</option>
          <option value="Fonction">Fonction</option>
          <option value="Structure">Structure</option>
        </select>
      </th>
      <th>
        <input type="text" id="valeur" name="valeur" placeholder="Rechercher valeur..." style="width: 70%;" oninput="filtre();">
      </th>
      <th></th>	
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody id="data"></tbody>
  <tfoot>
    <tr class="tab_bg_2" style="text-align: center; vertical-align: middle;">
      <th></th>
      <th>Type</th>
      <th>valeur</th>
      <th>Créé par</th>
      <th>Créé Le</th>
      <th></th>		
    </tr>
  </tfoot>
</table>
</div>';
  
  
if (Session::getCurrentInterface() == "helpdesk") {
   Html::helpFooter();
} else {
   Html::footer();
}




$link=$CFG_GLPI["root_doc"]."/front/ticket.php";
$root = $CFG_GLPI["root_doc"];
$user = Session::getCurrentInterface();
?>


<script>
var root = <?php echo json_encode($root); ?>;		 
var res = <?php echo json_encode($res); ?>;
var user = <?php echo json_encode($user); ?>;
	var userlink;
	if(user == "helpdesk"){
		userlink ='<li class="breadcrumb_item"><a href="'+root+'/front/helpdesk.public.php" title="Accueil">Accueil</a></li>';
		}else{
		userlink = '<li class="breadcrumb_item"><a href="'+root+'/front/central.php" title="Accueil">Accueil</a></li>';
		}
		
	$(document).ready(function(){
	   
			$("#c_ssmenu2").html('<ul>'+
		  userlink+
		  '<li class="breadcrumb_item"><a href="" title="">Administration</a></li>'+
		  '<li class="breadcrumb_item"><a href="'+root+'/front/picklist.list.php" class="here" title="Fonction et Structure"><i class="far fa-sticky-note"></i>&nbsp;Fonctions et Structures</a></li>'+
		   '<li class="icons_block"><span><a href="'+root+'/front/picklist.add.php" class="pointer" title="Ajouter"><i class="fa fa-plus"></i>'+
		  '<span class="sr-only">Ajouter</span></a>'+
		  '</li>'+
	   '</ul>');
	   
	});
	
	function loadTable(data) {
        if (data != null && data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                var row = data[i];

                var actions = '<a href="' + root + '/front/picklist.update.php?id=' + row['id'] + '" title="Modifier">' +
                            '<i class="fa fa-edit fa-lg" style="color: green; cursor: pointer;"></i>' +
                        '</a>&nbsp;';

                $('#data').append(
                    '<tr class="tab_bg_2" style="text-align: center; vertical-align: middle;">' +
                        '<td width="10" valign="top"></td>' +
                        '<td valign="top">' + row['name'] + '</td>' +
                        '<td valign="top">' + row['value'] + '</td>' +
                        '<td valign="top">' + (row['created_by'] ?? '') + '</td>' +
                        '<td valign="top">' + (row['created_on'] ? row['created_on'].split(' ')[0] : '') + '</td>' +
                        '<td valign="top" style="text-align: center; vertical-align: middle;">' + actions + '</td>' +
                    '</tr>'
                );
            }
        }
    }


    function filtre() { 	
		  let type = $("#type").val();
      let valeur = $("#valeur").val();

      $.ajax({ 
          type: "GET", 
          url: root + "/ajax/picklist.php?action=filtre&type=" + encodeURIComponent(type) + "&valeur=" + encodeURIComponent(valeur),
          dataType: "json"
      })
			.done(function( msg ) {
			    //var data = JSON.parse(msg); 
			    var data = msg; 
              $( "#data" ).empty();						
			  if(data !== null) loadTable(data);					  
			})
			.fail(function(msg) {
			  console.log(msg);
			});					
	}
					
loadTable(res);	

$(document).on('click', '.deleteRow', function() {
    var id = $(this).data('id');

    if (confirm("Êtes-vous sûr de vouloir supprimer cette période de paie ?")) {
        $.ajax({
            url: root + '/ajax/picklist.php?action=delete',
            type: 'POST',
            data: { id: id }
		})
		.done(function(response) {
            try {
                var res = JSON.parse(response);

                if (res.status === "success") {
					console.log(res.message);
                    location.reload();
                } else {
                    showErrorMessage(res.message || "An error occurred while adding the pick list.");
                    // Enable the save button
                }
            } catch (e) {
                console.error("Error parsing JSON response: ", e);
            }
        })
        .fail(function(response) {
            showErrorMessage("Request failed: ", response);
        });
    }
});

</script>
<!-- script pour liste déroulante -->
<script>
   $(document).ready(function() {
     $('.js-example-basic-single').select2();
   });	
</script>