[IMP] awesome_owl: add chapter 12 and missing ;s

Author: trcazier

awesome_owl/static/src/counter/counter.js

@@ -5,7 +5,7 @@ export class Counter extends Component {
     static props = { 
         value: {optional: true},
         side_effect: {type: Function, optional: true}
-    }
+    };
 
     setup() {
         this.state = useState({ value: this.props.value || 0});

awesome_owl/static/src/playground.js

@@ -14,7 +14,7 @@ export class Playground extends Component {
     }
 
     get sum() {
-        return this.state.val1 + this.state.val2
+        return this.state.val1 + this.state.val2;
     }
 
 }

awesome_owl/static/src/todo_list/todo_item.js

@@ -5,12 +5,14 @@ export class TodoItem extends Component {
     static props = {
         id: String,
         todo: {type: {description: String, isCompleted: Boolean}},
-        toggleState: Function 
+        toggleState: Function,
+        removeTodo: Function
     }
 
     setup() {
-        this.id = this.props.id
-        this.todo = useState(this.props.todo)
-        this.toggleState = this.props.toggleState
+        this.id = this.props.id;
+        this.todo = useState(this.props.todo);
+        this.toggleState = this.props.toggleState;
+        this.removeTodo = this.props.removeTodo;
     }
 }

awesome_owl/static/src/todo_list/todo_item.xml

@@ -5,7 +5,7 @@
         <div class="todo_item-body" t-att-class="{'text-muted text-decoration-line-through': this.todo.isCompleted}">
             <p class="todo_item-text">
                 <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"/>
+                <t t-esc="this.id"/>. <t t-out="this.todo.description"/> <span class="fa fa-remove" t-on-click="this.removeTodo"/>
             </p>
         </div>
     </t>

awesome_owl/static/src/todo_list/todo_list.js

@@ -3,8 +3,8 @@ import { TodoItem } from "./todo_item";
 import { useAutoFocus } from "../utils";
 
 export class TodoList extends Component {
-    static template = "awesome_owl.todo_list"
-    static components = { TodoItem }
+    static template = "awesome_owl.todo_list";
+    static components = { TodoItem };
 
     setup() {
         useAutoFocus("todo-input");
@@ -17,13 +17,17 @@ export class TodoList extends Component {
     }
 
     toggleState(id) {
-        this.state.todos[id].isCompleted = !this.state.todos[id].isCompleted
+        this.state.todos[id].isCompleted = !this.state.todos[id].isCompleted;
     }
 
     addTodo(ev) {
         if (ev.keyCode === 13 && ev.target.value != "") {
             this.state.todos[++this.state.lastId] = {description: ev.target.value, isCompleted: false};
-            ev.target.value = ""
+            ev.target.value = "";
         }
     }
+
+    removeTodo(id) {
+        delete this.state.todos[id];
+    }
 }

awesome_owl/static/src/todo_list/todo_list.xml

@@ -11,7 +11,12 @@
                     t-ref="todo-input"
                 />
                 <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)"/>
+                    <TodoItem 
+                        id="id" 
+                        todo="this.state.todos[id]" 
+                        toggleState.bind="() => this.toggleState(id)"
+                        removeTodo.bind="() => this.removeTodo(id)"
+                    />
                 </t>
             </div>
         </div>