Exercice de synthèse : Todolist

Objectif

Créer une application de type "todoliste" permettant de gérer une liste de tâches. L'utilisateur pourra ajouter de nouvelles tâches, les marquer comme accomplies, les supprimer, modifier leur ordre manuellement et appliquer différents tris (ordre de création, alphabétique croissant/décroissant, état terminé en dernier, ordre personnalisé mémorisé). Vous utiliserez exclusivement les notions étudiées jusque maintenant : réactivité, formulaires, gestion des événements, rendu conditionnel, attributs dynamiques et rendu de liste.



Instructions

  1. Dans la partie <script>, importer ref et reactive depuis Vue.
  2. Créer une constante réactive taches initialisée avec un tableau de 3 objets. Chaque objet représente une tâche et contient :
    • un identifiant unique numérique id,
    • un libelle (texte de la tâche),
    • un booléen terminee initialisé à false,
    • un entier ordre indiquant sa position initiale (1, 2, 3).
  3. Créer une constante réactive nouvelleTache (via ref()) initialisée à une chaîne vide.
  4. Créer une constante réactive triCritere (via ref()) initialisée à la valeur "manuel".
  5. Créer une constante réactive prochainId (via ref()) initialisée à la valeur immédiatement supérieure au plus grand id des tâches de départ (ex.: 4 si vous avez des tâches avec les id 1, 2 et 3).
  6. Créer une constante CLE_LOCALSTORAGE_TACHES contenant le nom de la clé utilisée pour stocker la liste dans le navigateur (ex.: 'todolist:taches'). Créer une seconde constante CLE_LOCALSTORAGE_PROCHAIN_ID qui servira à mémoriser la valeur de prochainId dans le navigateur (ex.: 'todolist:prochainId').
  7. Au moment de l'initialisation de l'application, vérifier si le navigateur contient déjà des données enregistrées pour ces clés.
    • Si une valeur existe pour CLE_LOCALSTORAGE_TACHES, la convertir en tableau d'objets JavaScript avec JSON.parse() et l'utiliser pour remplir taches.
    • Si une valeur existe pour CLE_LOCALSTORAGE_PROCHAIN_ID, l'utiliser pour initialiser prochainId.
    • Si aucune valeur n'est trouvée, conserver les valeurs par défaut définies dans les étapes précédentes.
    Les valeurs brutes sont lues avec localStorage.getItem().
  8. Après chaque modification des données (ajout d'une tâche, suppression, marquage ou démarquage comme terminée, changement manuel de l'ordre via les fonctions monter() et descendre()), enregistrer la liste mise à jour dans le navigateur en utilisant localStorage.setItem().
    • La liste complète taches doit être convertie en chaîne JSON avec JSON.stringify() avant d'être stockée.
    • La valeur actuelle de prochainId doit également être enregistrée pour pouvoir être restaurée au prochain chargement de la page.
    Les changements de critère de tri ne modifient pas les données elles-mêmes et ne nécessitent donc pas de mise à jour du localStorage.
  9. Définir les fonctions suivantes :
    • ajouterTache() : ajoute un nouvel objet dans le tableau taches avec :
      • un identifiant unique correspondant à la valeur actuelle de prochainId,
      • le texte saisi dans nouvelleTache,
      • terminee:false,
      • une valeur ordre égale à cette même valeur de prochainId.
      Incrémenter ensuite prochainId, réinitialiser nouvelleTache, appliquer le tri courant puis enregistrer la nouvelle liste ainsi que la nouvelle valeur de prochainId dans le localStorage.
    • basculerTerminee(id) : retrouve la tâche correspondant à l'identifiant et inverse la valeur de sa propriété terminee. Après la modification, enregistrer la liste mise à jour dans le localStorage.
    • supprimerTache(id) : retire du tableau la tâche correspondant à l'identifiant. Après la suppression, enregistrer la liste mise à jour dans le localStorage.
    • monter(id) et descendre(id) : disponibles uniquement si le critère de tri vaut "manuel". Elles échangent la valeur ordre de la tâche courante avec celle de la tâche voisine, réappliquent ensuite le tri puis enregistrent la liste dans le localStorage afin que l'ordre personnalisé soit conservé après un rechargement de la page.
    • appliquerTri() : trie le tableau taches selon la valeur de triCritere. Gérer les cas suivants :
      • "manuel" : tri croissant sur la propriété ordre.
      • "creation" : tri croissant sur la propriété id.
      • "libelleAsc" : tri alphabétique croissant sur libelle.
      • "libelleDesc" : tri alphabétique décroissant.
      • "terminee" : les tâches non terminées en premier, puis les terminées, avec un tri secondaire alphabétique.
      Cette fonction ne doit modifier que l'ordre des éléments en mémoire, sans écrire dans le localStorage.
  10. Dans la partie <template>, ajouter un sous-titre <h2> avec le texte "Exo Synthèse".
  11. Créer un formulaire d'ajout composé de :
    • un champ texte lié à nouvelleTache avec v-model,
    • un bouton "Ajouter" qui déclenche ajouterTache() et est désactivé si le champ est vide.
  12. Ajouter un bloc de sélection du tri :
    • un menu déroulant <select> lié à triCritere, avec les options "Ordre personnalisé", "Ordre de création", "Libellé A→Z", "Libellé Z→A", "Non terminées d'abord".
    • au changement de valeur, déclencher appliquerTri().
    • un bouton "Appliquer" qui déclenche aussi appliquerTri().
    • un court paragraphe indiquant que les flèches ⬆ et ⬇ ne fonctionnent que si le tri est "Ordre personnalisé".
  13. Afficher deux compteurs :
    • "Total : [nombre de tâches]".
    • "Terminées : [nombre de tâches terminées]".
  14. Utiliser un rendu conditionnel pour afficher :
    • la liste des tâches si le tableau n'est pas vide,
    • un paragraphe "Aucune tâche à afficher" si le tableau est vide.
  15. Dans la liste :
    • répéter des <li> avec v-for et lier l'attribut :key à l'identifiant unique,
    • afficher le libelle avec une classe dynamique appliquant un style barré si terminee vaut true,
    • ajouter un bouton "⬆" et un bouton "⬇" qui appellent respectivement monter(id) et descendre(id) et qui sont désactivés si triCritere n'est pas "manuel",
    • ajouter un bouton "✔" qui appelle basculerTerminee(id),
    • ajouter un bouton "🗑 Supprimer" qui appelle supprimerTache(id).
  16. Dans la partie <style>, écrire un style minimal :
    • espacement entre les lignes,
    • texte barré et grisé pour les tâches terminées,
    • alignement horizontal des éléments avec un petit espace entre eux,
    • style simple pour les boutons, avec un état désactivé visible.
  17. Tester :
    • Ajouter une tâche et vérifier son affichage correct.
    • Marquer/démarquer une tâche comme terminée et vérifier l'effet visuel et les compteurs.
    • Supprimer une tâche et vérifier la mise à jour de la liste et des compteurs.
    • Réorganiser plusieurs tâches avec ⬆ et ⬇ en mode "Ordre personnalisé" et confirmer que l'ordre est mémorisé.
    • Changer le critère de tri et vérifier que la liste est réordonnée correctement selon le choix.
    • Supprimer toutes les tâches et confirmer que le message "Aucune tâche à afficher" apparaît.
    • Actualiser la page du navigateur et vérifier que les tâches, leur ordre personnalisé (défini via les flèches en mode "Ordre personnalisé"), leur état (terminée ou non) et la prochaine valeur d'identifiant à utiliser sont correctement restaurés.