Web Programming

Todo SPA (Editing)

The objective of this exercise is to extend the todo single-page application so that todos can be edited.

Tasks

1. In the main module, extend the navigate function with an optional parameter and pass it to the component to be shown.
2. Add the following methods to the service module:
   • getTodo(id) sends an AJAX request to fetch the todo with the specified identifier
   • putTodo(todo) sends an AJAX request to update the specified todo
3. Implement the EditTodo component:
   • The template contains a form that allows to edit the title, category and due date of a todo (the identifier must also be included in the form, but is immutable).
   • The constructor fetches the todo with the identifier passed as parameter and renders its properties in the form.
   • Two event handlers are registered to save the edited todo and to cancel the action.
4. In the TodoList component, add a link to each rendered todo that navigates to the EditTodo component passing the identifier of the corresponding todo when clicked.