stage 11

awesome_owl/static/src/todo_list/todo_item.js

@@ -8,6 +8,11 @@ export class TodoItem extends Component {
         todo: {
             type: Object,
             shape: { id: Number, description: String, isCompleted: Boolean }
-        }
+        },
+        onToggle: Function,
     };
+
+    toggle() {
+        this.props.onToggle(this.props.todo.id);
+    } 
 }

awesome_owl/static/src/todo_list/todo_item.xml

@@ -1,8 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
     <t t-name="awesome_owl.TodoItem">
-        <div t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted}">
-            <t t-esc="props.todo.id" />. <t t-esc="props.todo.description" />
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" t-att-id="props.todo.id" t-att-checked="props.todo.isCompleted" t-on-change="toggle"/>
+            <label t-att-for="props.todo.id" t-att-class="props.todo.isCompleted ? 'text-decoration-line-through text-muted' : '' ">
+                <t t-esc="props.todo.id"/>. 
+                <t t-esc="props.todo.description"/>
+            </label>
         </div>
     </t>
 </templates>

awesome_owl/static/src/todo_list/todo_list.js

@@ -24,4 +24,11 @@ export class TodoList extends Component {
             }
         }
     }
+
+    toggleState(id) {
+        const todo = this.todos.find((obj) => obj.id === id);
+        if (todo) {
+            todo.isCompleted = !todo.isCompleted;
+        }
+    }
 }

awesome_owl/static/src/todo_list/todo_list.xml

@@ -4,7 +4,7 @@
        <p><input t-ref="todo_input" type="text" name="new-todo" placeholder="Add new todo" t-on-keyup="addTodo" /></p>
        <div class="d-inline-block border p-2 m-2">
             <t t-foreach="todos" t-as="todo" t-key="todo.id">
-                <TodoItem todo="todo" />
+                <TodoItem todo="todo" onToggle.bind="toggleState"/>
             </t>
         </div>
     </t>