afornerot/ninemine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

svg

Browse Source
This commit is contained in:
afornerot
2025-07-23 22:35:07 +02:00
parent f93b9b13fb
commit 686b614cd6
6 changed files with 326 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
templates/issue/list.html.twig Normal file
View File

@ -0,0 +1,157 @@
{% extends 'base.html.twig' %}
{% block localstyle %}
<style>
</style>
{% endblock %}
{% block title %}
= Liste des Issues
{% endblock %}
{% block body %}
<h1>
Liste des Issues
</h1>
<div class="d-flex">
<div style="width:320px; padding: 0px 10px 0px 0px">
<div style="margin-bottom: 1em;">
<label for="projectFilter"><strong>Filtrer par projet :</strong></label><br>
<select id="projectFilter" multiple style="width: 300px; height: 150px;" class="select2">
{# Options ajoutées dynamiquement #}
</select>
</div>
<div style="margin-bottom: 1em;">
<label for="statusFilter"><strong>Filtrer par statut :</strong></label><br>
<select id="statusFilter" multiple style="width: 300px; height: 150px;" class="select2">
{# Options JS dynamiques #}
</select>
</div>
<div style="margin-bottom: 1em;">
<label for="categoryFilter"><strong>Filtrer par catégorie :</strong></label><br>
<select id="categoryFilter" multiple style="width: 300px; height: 150px;" class="select2">
{# Options JS dynamiques #}
</select>
</div>
</div>
<div style="flex-grow:1">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables" style="width:100%; zoom:80%;">
<thead>
<tr>
<th width="70px">Id</th>
<th width="130px">Projet</th>
<th>Nom</th>
<th>Statut</th>
<th>Catégorie</th>
</tr>
</thead>
<tbody>
{% for issue in issues %}
<tr>
<td>#{{issue.id}}</td>
<td>{{issue.project.title}}</td>
<td>{{issue.redmine.subject}}</td>
<td>{{issue.redmine.status.name}}</td>
<td>{{issue.redmine.category is defined?issue.redmine.category.name:'Aucune'}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
{% block localscript %}
<script>
$(document).ready(function() {
const table = $('#dataTables').DataTable({
columnDefs: [
{ "targets": "no-sort", "orderable": false },
{ "targets": "no-string", "type" : "num" }
],
responsive: true,
iDisplayLength: 100,
order: [[ 0, "desc" ]]
});
// Étape 1 : Récupérer les filtres possible
const projectSet = new Set();
table.column(1).data().each(function(value) {
projectSet.add(value);
});
const statusSet = new Set();
table.column(3).data().each(function(value) {
statusSet.add(value);
});
const categorySet = new Set();
table.column(4).data().each(function(value) {
categorySet.add(value);
});
console.log(categorySet);
// Étape 2 : Remplir dynamiquement les filtres
const $selectProject = $('#projectFilter');
Array.from(projectSet).sort().forEach(function(project) {
const option = $('<option>', {
value: project,
text: project,
selected: false
});
$selectProject.append(option);
});
const $statusSelect = $('#statusFilter');
Array.from(statusSet).sort().forEach(function(status) {
const option = $('<option>', {
value: status,
text: status,
selected: false
});
$statusSelect.append(option);
});
const $categorySelect = $('#categoryFilter');
Array.from(categorySet).sort().forEach(function(category) {
const option = $('<option>', {
value: category,
text: category,
selected: false
});
$categorySelect.append(option);
});
// Étape 3 : Ajouter le filtre personnalisé à DataTables
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
const selectedProjects = $('#projectFilter').val();
const selectedStatuses = $('#statusFilter').val();
const selectedCategories = $('#categoryFilter').val();
const project = data[1]; // Colonne "Projet"
const status = data[3]; // Colonne "Statut"
const category = data[4]; // Colonne "Categorie"
const projectMatch = !selectedProjects || selectedProjects.length === 0 || selectedProjects.includes(project);
const statusMatch = !selectedStatuses || selectedStatuses.length === 0 || selectedStatuses.includes(status);
const categoryMatch = !selectedCategories || selectedCategories.length === 0 || selectedCategories.includes(category);
return projectMatch && statusMatch && categoryMatch;
});
// Étape 4 : Rafraîchir le tableau quand le select change
$selectProject.on('change', function() {
table.draw();
});
$statusSelect.on('change', function() {
table.draw();
});
$categorySelect.on('change', function() {
table.draw();
});
});
</script>
{% endblock %}