[IMP] awesome_owl: add sections 8-9

Author: trcazier

awesome_owl/static/src/todo_list/todo_item.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todo_item">
-        <div class="todo_item-body">
+        <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"/>
             </p>

awesome_owl/static/src/todo_list/todo_list.js

@@ -1,11 +1,25 @@
-import { Component, useState } from "@odoo/owl";
+import { Component, useState, useRef, onMounted } from "@odoo/owl";
 import { TodoItem } from "./todo_item";
+import { useAutoFocus } from "../utils";
 
 export class TodoList extends Component {
     static template = "awesome_owl.todo_list"
     static components = { TodoItem }
 
     setup() {
-        this.todos = useState([{ id: 3, description: "buy milk", isCompleted: false }]);
+        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 }
+            ],
+            lastId: 3
+        });
+    }
+
+    addTodo(ev) {
+        if (ev.keyCode === 13 && ev.target.value != "") {
+            this.state.todos.push({id: ++this.state.lastId, description: ev.target.value, isCompleted: false});
+            ev.target.value = ""
+        }
     }
 }

awesome_owl/static/src/todo_list/todo_list.xml

@@ -3,8 +3,14 @@
 
     <t t-name="awesome_owl.todo_list">
         <div class="card d-inline-block m-2">
-            <div class="todo_list-body">
-                <t t-foreach="this.todos" t-as="i" t-key="i">
+            <div class="todo_list-body border p-2 m-2">
+                <input
+                    type="text"
+                    t-on-keyup="addTodo"
+                    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>
             </div>

awesome_owl/static/src/utils.js

@@ -0,0 +1,9 @@
+import { onMounted, useRef } from '@odoo/owl'
+
+export function useAutoFocus(refName) {
+    const inputRef = useRef(refName);
+
+    onMounted(() => {
+        inputRef.el.focus();
+    });
+}