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 showComponent function with an optional parameter and pass it as an attribute 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 web 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 connectedCallback method fetches the todo with the identifier passed as attribute 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 web component, add a link to each rendered todo that shows the EditTodo web component passing the identifier of the corresponding todo when clicked.