[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

@@ -2,8 +2,11 @@
 <templates xml:space="preserve">
 
     <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"/>
+        <input type="checkbox" t-on-change="() => props.onToggleState(props.todo.id)"/>
+        <div t-att-class="{'text-muted': props.todo.isCompleted, 'text-decoration-line-through': props.todo.isCompleted}">
+            <t t-out="props.todo.id + '. ' + props.todo.description"/>
+        </div>
+        <span t-on-click="() => props.onRemoveTodo(props.todo.id)" class="fa fa-remove"></span>
     </t>
 
 </templates>

awesome_owl/static/src/todolist.js

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

awesome_owl/static/src/todolist.xml

@@ -4,11 +4,9 @@
     <t t-name="awesome_owl.todolist">
         <br/>
         <input t-ref="input_todo" t-on-keyup="ev => this.addTodo(ev)" type="text" placeholder="Enter a new task"/>
-        <t t-foreach="state.todos" t-as="i" t-key="i.id">
+        <t t-foreach="state.todos" t-as="todo" t-key="todo.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"/>
-                </div>
+                <TodoItem todo="todo" onToggleState.bind="toggleState" onRemoveTodo.bind="removeTodo"/>
             </div>
         </t>
     </t>