tris

index.html

@@ -74,10 +74,10 @@
             <table id="issuesTable">
                 <thead>
                     <tr>
-                        <th>Sujet</th>
-                        <th>Votes</th>
-                        <th>Ouvert par</th>
-                        <th>Dernier message</th>
+                        <th onclick="trierTableau('titre')">Sujet</th>
+                        <th onclick="trierTableau('votes')">Votes</th>
+                        <th onclick="trierTableau('auteur')">Ouvert par</th>
+                        <th onclick="trierTableau('date')">Dernier message</th>
                     </tr>
                 </thead>
                 <tbody>

script.js

@@ -172,6 +172,8 @@ function displayIssues(issues) {
             --------------------------------
             `)
 
+        let date = new Date(issue.updated_at);
+
         // Création d'une ligne dans le tableau
         const row = document.createElement("tr");
         row.innerHTML = `
@@ -183,7 +185,7 @@ function displayIssues(issues) {
             </td>
             <td>${issue.upvotes} 👍</td>
             <td class="auteur"><img class="avatar" src="${issue.author.avatar_url}"> <a target="_blank" href="${issue.author.web_url}">${issue.author.name}</a></td>
-            <td>${new Date(issue.updated_at).toLocaleDateString()}</td>
+            <td>${date.toLocaleDateString()}</td>
         `;
 
         if (label) {
@@ -195,6 +197,11 @@ function displayIssues(issues) {
             }
         }
 
+        row.auteur = issue.author.name;
+        row.titre = issue.title;
+        row.date = date;
+        row.votes = issue.upvotes;
+
         tableBody.appendChild(row);
     });
 }
@@ -270,6 +277,60 @@ function filtreTickets() {
 
 }
 
+const etatTri = {
+    cle: null, // La clé actuellement triée
+    croissant: true // Par défaut, tri croissant
+};
+
+function trierTableau(cle) {
+    console.log('Tri par', cle);
+
+    const tableau = document.getElementById('issuesTable');
+    const tbody = tableau.querySelector('tbody');
+    const lignes = Array.from(tbody.querySelectorAll('tr'));
+
+    // Déterminer le sens du tri
+    if (etatTri.cle === cle) {
+        // Inverser le sens si la même colonne est sélectionnée
+        etatTri.croissant = !etatTri.croissant;
+    } else {
+        // Sinon, on trie par cette clé en croissant
+        etatTri.cle = cle;
+        etatTri.croissant = true;
+    }
+
+    // Trier les lignes en fonction du label 'épinglé' et des valeurs
+    lignes.sort((a, b) => {
+        // Vérifier si l'un des éléments est "épinglé"
+        if (a.label === 'épinglé' && b.label !== 'épinglé') return -1;
+        if (a.label !== 'épinglé' && b.label === 'épinglé') return 1;
+
+        // Sinon, on effectue le tri habituel
+        const valeurA = a[cle];
+        const valeurB = b[cle];
+
+        let comparaison = 0;
+
+        if (valeurA instanceof Date && valeurB instanceof Date) {
+            comparaison = valeurA - valeurB; // Tri par date
+        } else if (typeof valeurA === 'number' && typeof valeurB === 'number') {
+            comparaison = valeurA - valeurB; // Tri par nombre
+        } else {
+            comparaison = valeurA.localeCompare(valeurB, undefined, { sensitivity: 'base' }); // Tri par chaîne
+        }
+
+        // Inverser l'ordre si tri décroissant
+        return etatTri.croissant ? comparaison : -comparaison;
+    });
+
+    // Réinsérer les lignes triées dans le tableau
+    lignes.forEach(ligne => tbody.appendChild(ligne));
+
+    console.log(`Tri effectué par '${cle}' en ordre ${etatTri.croissant ? 'croissant' : 'décroissant'}`);
+}
+
+
+
 
 
 

style.css

@@ -158,6 +158,12 @@ td.auteur {
 th {
     background-color: #6c63ff;
     color: white;
+    cursor: pointer;
+    border: 1px #ffffff solid;
+}
+
+th:hover {
+    color: yellow;
 }
 
 th:first-child {