Étape 15 : JS - Système de Filtres

Nous voulons pouvoir cliquer sur “Actives” et ne voir que les tâches non cochées.

1. Méthode filtrerTaches

Dans la classe GestionnaireTaches, ajoutons la logique de filtrage.

    // Filtrer selon critères
    filtrerTaches(filtre) {
        switch (filtre) {
            case 'actives':
                return this.taches.filter((t) => !t.terminee);
            case 'terminees':
                return this.taches.filter((t) => t.terminee);
            case 'haute':
                return this.taches.filter((t) => t.priorite === 'haute');
            default:
                // 'toutes' ou autre
                return this.taches;
        }
    }

2. Mettre à jour afficherTaches

Actuellement, afficherTaches affiche TOUT (app.taches). Il faut lui dire d’utiliser le filtre.

Modifiez la fonction afficherTaches :

// On ajoute un paramètre 'filtre' avec 'toutes' par défaut
function afficherTaches(filtre = 'toutes') {
    listElement.innerHTML = '';

    // NOUVEAU : On demande à l'app les tâches filtrées
    const tachesAffichees = app.filtrerTaches(filtre);

    // Petit bonus UX : Message si vide
    if (tachesAffichees.length === 0) {
        listElement.innerHTML = '<li style="text-align:center; color:#9ca3af; padding: 1rem;">Aucune tâche trouvée</li>';
        return;
    }

    tachesAffichees.forEach((tache) => {
        // ... (le reste du code de création de <li> reste identique)
    });
}

3. Écouter les clics sur les filtres

Il faut activer les boutons.

// Gestion des filtres
document.querySelectorAll('.filter-btn').forEach((btn) => {
    btn.addEventListener('click', (e) => {
        // 1. Gestion visuelle : on change la classe 'active'
        document.querySelectorAll('.filter-btn').forEach((b) => b.classList.remove('active'));
        e.target.classList.add('active');

        // 2. On récupère la valeur du filtre (ex: 'actives') grâce au data-attribute
        const filtre = e.target.dataset.filter;

        // 3. On rafraîchit l'affichage avec ce filtre
        afficherTaches(filtre);
    });
});

⚠️ Attention : Il y a un piège ! Si je suis sur le filtre “Actives” et que je coche une tâche, afficherTaches() est rappelé sans argument (donc ‘toutes’). La liste va “sauter” et tout réafficher.

Il faut modifier window.toggleTache et window.supprimerTache pour qu’ils respectent le filtre actuel.

window.toggleTache = (id) => {
    app.toggleStatut(id);

    // Astuce : On regarde quel bouton a la classe active pour savoir quel filtre garder
    const currentFilter = document.querySelector('.filter-btn.active').dataset.filter;
    afficherTaches(currentFilter);

    majStats();
};

(Faites pareil pour supprimerTache).

---

Test :

1. Créez 3 tâches (1 haute, 2 normales). Cochez-en une.
2. Cliquez sur “Actives” -> La tâche cochée disparaît.
3. Cliquez sur “Terminées” -> Seule la tâche cochée apparaît.
4. Cliquez sur “Priorité Haute” -> Seules les tâches hautes apparaissent.