tp2mvc

R4.01_R4.A.10/td_tp/tp2mvc/README.md

@@ -0,0 +1,163 @@
+#### Ex3 : modele MVC
+Le but est d'écrire une todolist en javascript, en respectant le pattern MVC. Il est important de mener à bout cet exercice, car il nous servira
+de fil rouge notamment en ajoutant une api rest et ajax pour la communication avec le service.
+
+<div align="center">
+<img src="./img/todo.png">
+</div>
+
+Le contrôleur a accès à la vue et au modèle.
+
+##### Le modèle
+
+Cette "classe" (rien à compléter) utilise 
+l'objet [localStorage](https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage) 
+pour sauvegarder la todolist.
+
+Chaque todo est un objet json de la forme 
+
+```js
+{ id : 1 , text : "apprendre le js", done : false }
+```
+
+La liste des méthodes publiques de cette classe
+
+```js
+/** @brief return the todolist
+ *  @param filter "all" or "active" or "done"
+ *  @return  array of todos
+ */
+getTodos(filter)
+
+/** @brief add (and save) a new todo with todoText
+ *  @param todoText : text of the new todo
+ */
+add(todoText)
+
+/** @brief delete a todo 
+ *  @param id id of the todo 
+ */
+delete(id)
+
+/** @brief update a todo 
+ *  @param id id of the todo 
+ */
+edit(id,updatedText)
+
+/** @brief toggle  a todo (done<->active)
+ *  @param id id of the todo 
+ *  @param updatedText  text of the todo
+ */
+toggle(id)
+```
+
+##### La vue
+Cette "classe" permet au contrôleur de gérer la vue. 
+
+
+Liste des méthodes publiques
+
+```js
+/** @brief change the active tab (all,active or done)
+ *  @param filter the active tab (all, active or done)
+ */
+setFilterTabs(filter)
+
+/** @brief update the todo list with todos
+ *  @param todos array of todo
+ */ 
+renderTodoList(todos)
+```
+
+Le contrôleur peut s'abonner (notification de la vue au acontrôleur) 
+aux événements suivants :
+
+add/delete/edit/toggle   todo : avec `bind{Add|Delete|Edit|Toggle}Todo`
+
+Ces méthodes d'abonnement prennent en paramètre une fonction du contrôleur qui est appelé par la vue pour lui notifier
+une requête.
+
+```js
+/** @brief subscribe to add event 
+ *  @param handler function(text)
+ */
+bindAddTodo(handler)
+
+/** @brief suscribe to delete event 
+ *  @param handler function(id) 
+ */
+bindDeleteTodo(handler)
+
+/** @brief suscribe to edit event
+ *  @param handler function(id,text)
+ */ 
+bindEditTodo(handler)
+
+/** @brief suscribe to toggle event
+ *  @param handler function(id)
+ */ 
+bindToggleTodo(handler)
+```
+
+##### Le contrôleur
+C'est lui qui gére le routage. Il y a trois urls possibles `index.html/#/{all|active|done}` (listener sur l'évenement 
+		dom `hashchange`.
+
+Liste des méthodes 
+```js
+/** @brief get the todolist from the model
+ *         and use the view to render 
+ */ 
+filterTodoList()
+
+/** @brief binding function called by the view
+ *         to add a new todo
+ *  @param text text of the new todo
+ */
+addTodo(text)
+
+/** @brief binding function called by the view
+ *         to delete a todo
+ *  @param id id of the todo
+*/
+deleteTodo(id)
+
+/** @brief binding function to toggle the state
+ *         of a todo
+ *  @param id id of the todo
+ */
+toggleTodo(id)
+
+/** @brief binding function to change the text
+ *         of a todo
+ *  @param id id of the todo
+ *  @param changedText new text for the todo
+*/
+editTodo(id,changedText)
+```
+
+Par exemple, lorsque l'utilisateur ajoute une todo :
+
+1. la vue est sensible à l'événement de soumission du formulaire,
+2. la fonction reflexe récupére le texte saisie,
+3. elle appelle la fonction avec laquelle le contrôleur s'est abonné, en lui passant le texte,
+4. la fonction du contrôleur `addTodo` récupére le texte,
+5. le contrôleur demande au modèle la création d'une nouvelle todo,
+6. le contrôleur demande un rafraichissement de la vue.
+
+
+#### Travail à faire
+- Commpléter la méthode privée dans la vue `#createNewTodoElement` qui permet de créer un
+  nouvel élément dom représentant une todo. Ce qui est attendu est de la forme
+  ```html
+  <li class="todo" data-id="1">
+   <label>
+    <input type="checkbox">
+    <span>apprendre un peu de javascript</span>
+   </label>
+   <i class="fas fa-trash"></i>
+  </li>
+  ```
+- Compléter la méthode `bindDeleteTodo` de la vue.
+- Compléter la méthode `bindToggleTodo` de la vue.
+- Compléter la méthode `bindEditTodo` de la vue.