[IMP] awesome_owl: add sections 10-11

Author: trcazier

awesome_owl/static/src/todo_list/todo_item.js

@@ -2,9 +2,15 @@ import { Component, useState } from "@odoo/owl";
 
 export class TodoItem extends Component {
     static template = "awesome_owl.todo_item"
-    static props = { todo: {type: {id: Number, description: String, isCompleted: Boolean}} }
+    static props = {
+        id: String,
+        todo: {type: {description: String, isCompleted: Boolean}},
+        toggleState: Function 
+    }
 
     setup() {
+        this.id = this.props.id
         this.todo = useState(this.props.todo)
+        this.toggleState = this.props.toggleState
     }
 }

awesome_owl/static/src/todo_list/todo_item.xml

@@ -4,7 +4,8 @@
     <t t-name="awesome_owl.todo_item">
         <div class="todo_item-body" t-att-class="{'text-muted text-decoration-line-through': this.todo.isCompleted}">
             <p class="todo_item-text">
-                <t t-esc="this.todo.id"/>. <t t-out="this.todo.description"/>
+                <input type="checkbox" t-att-checked="this.todo.isCompleted" t-on-change="this.toggleState"/>
+                <t t-esc="this.id"/>. <t t-out="this.todo.description"/>
             </p>
         </div>
     </t>

awesome_owl/static/src/todo_list/todo_list.js

@@ -8,17 +8,21 @@ export class TodoList extends Component {
 
     setup() {
         useAutoFocus("todo-input")
-        this.state = useState({todos: [
-                { id: 2, description: "penser à acheter du lait", isCompleted: false }, 
-                { id: 3, description: "penser à acheter des tomates cerises", isCompleted: true }
-            ],
+        this.state = useState({todos: {
+                2: { description: "penser à acheter du lait", isCompleted: false }, 
+                3: { description: "penser à acheter des tomates cerises", isCompleted: true }
+            },
             lastId: 3
         });
     }
 
+    toggleState(id) {
+        this.state.todos[id].isCompleted = !this.state.todos[id].isCompleted
+    }
+
     addTodo(ev) {
         if (ev.keyCode === 13 && ev.target.value != "") {
-            this.state.todos.push({id: ++this.state.lastId, description: ev.target.value, isCompleted: false});
+            this.state.todos[++this.state.lastId] = {description: ev.target.value, isCompleted: false};
             ev.target.value = ""
         }
     }

awesome_owl/static/src/todo_list/todo_list.xml

@@ -10,8 +10,8 @@
                     placeholder="Enter something to do..."
                     t-ref="todo-input"
                 />
-                <t t-foreach="this.state.todos" t-as="i" t-key="i.id">
-                    <TodoItem todo="i"/>
+                <t t-foreach="Object.keys(this.state.todos)" t-as="id" t-key="id">
+                    <TodoItem id="id" todo="this.state.todos[id]" toggleState.bind="() => this.toggleState(id)"/>
                 </t>
             </div>
         </div>