[IMP] awesome_owl: allow to delete todoitem

Author: msho-odoo

awesome_owl/static/src/todoitem.js

@@ -5,5 +5,6 @@ export class TodoItem extends Component {
     static props = {
         todo: Object,
         onToggleState: Function,
+        onRemoveTodo: Function,
     }
 }

awesome_owl/static/src/todoitem.xml

@@ -4,6 +4,7 @@
     <t t-name="awesome_owl.todoitem">
         <input type="checkbox" t-on-change="()=> props.onToggleState(props.todo.id)"/>
         <t t-out="props.todo.id+'. '+props.todo.description"/>
+        <span t-on-click="()=> props.onRemoveTodo(props.todo.id)" class="fa fa-remove"></span>
     </t>
 
 </templates>

awesome_owl/static/src/todolist.js

@@ -28,4 +28,11 @@ export class TodoList extends Component {
         let todo = this.state.todos.find(todo => todo.id === todoId);
         todo.isCompleted = !todo.isCompleted;
     }
+
+    removeTodo(todoId) {
+        let index = this.state.todos.findIndex(todo => todo.id === todoId);
+        if (index >= 0) {
+            this.state.todos.splice(index, 1);
+        }
+    }
 }

awesome_owl/static/src/todolist.xml

@@ -7,7 +7,7 @@
         <t t-foreach="state.todos" t-as="i" t-key="i.id">
             <div style="border: 1px solid black">
                 <div t-att-class="{'text-muted': i.isCompleted, 'text-decoration-line-through': i.isCompleted}">
-                    <TodoItem todo= "i" onToggleState.bind="toggleState"/>
+                    <TodoItem todo= "i" onToggleState.bind="toggleState" onRemoveTodo.bind="removeTodo"/>
                 </div>
             </div>
         </t>