[IMP] awesome_owl: add the possibility to add todoitem

Add an inupt field in the todolist.

Link a function to this input to create new todoitem with:
 - the value of the input as description of the todo
 - last_id +1 as id

It doesn't creaete anything if the input is empty

Author: clom-odoo

awesome_owl/static/src/todolist/todolist.js

@@ -7,11 +7,25 @@ export class TodoList extends Component {
     static components = { TodoItem };
 
     setup() {
-        this.todos = useState([
-            { id: 3, description: "buy milk", isCompleted: false },
-            { id: 4, description: "Go to work", isCompleted: true },
-
-        ]);
+        this.todos = useState([]);
     }
 
-}
+    addTodo(ev) {
+        if (ev.keyCode === 13) {
+
+            console.debug(this.todos);
+            console.debug(this.todos.length);
+            var todoId;
+            if (this.todos.length == 0) {
+                todoId = 1;
+            } else {
+                todoId = this.todos[this.todos.length -1].id + 1;
+            }
+            var content = document.querySelector(".todo_content");
+            if (content.value != "") {
+                this.todos.push({ id: todoId, description: content.value, isCompleted: false });
+                content.value = "";
+            }
+        }
+    }
+}

awesome_owl/static/src/todolist/todolist.xml

@@ -3,6 +3,7 @@
 
     <t t-name="awesome_owl.todolist">
         <div class="card d-inline-block m-2">
+            <input class="todo_content" placeholder="Enter a new task" t-on-keyup="ev => this.addTodo(ev)"/>
             <t t-foreach="todos" t-as="i" t-key="i.id">
                 <TodoItem todo="i"/>
             </t>