[IMP] awesome_owl: tasks 8-12 (todo list)

Author: tskv

awesome_owl/static/src/todo_list/todo_item.js

@@ -7,7 +7,15 @@ export class TodoItem extends Component {
         todo : {
             id: Number,
             description: String,
-            isCompleted: Boolean }
-
+            isCompleted: Boolean },
+        onClick : { Type: Function, optional : true }
     };
+
+    toggleState() {
+        this.props.todo.isCompleted = !this.props.todo.isCompleted;
+    }
+
+    removeTodo() {
+        this.props.onClick(this.props.todo.id);
+    }
 }

awesome_owl/static/src/todo_list/todo_item.xml

@@ -3,8 +3,12 @@
 
     <t t-name="awesome_owl.TodoItem">
         <div>
-            <t t-out="props.todo.id"/>.
-            <t t-out="props.todo.description"/>
+            <p t-att-class="props.todo.isCompleted ? 'text-muted text-decoration-line-through' : ''">
+                <input type="checkbox" t-att-checked="props.todo.isCompleted" t-on-change="toggleState"/>
+                <t t-out="props.todo.id"/>.
+                <t t-out="props.todo.description"/>
+                <span class="fa fa-remove text-danger" t-on-click="removeTodo"/>
+            </p>
         </div>
     </t>
 

awesome_owl/static/src/todo_list/todo_list.js

@@ -1,4 +1,4 @@
-import { Component, useState } from "@odoo/owl"
+import { Component, useState, useRef } from "@odoo/owl"
 import { TodoItem } from "./todo_item"
 
 export class TodoList extends Component {
@@ -7,10 +7,30 @@ export class TodoList extends Component {
 
     setup() {
         this.todos = useState([
-            { id:1, description: "buy bread", isCompleted: false },
-            { id:2, description: "buy milk", isCompleted: false },
-            { id:3, description: "have lunch", isCompleted: true },
+            {id: 1, description: "buy bread", isCompleted: false},
+            {id: 2, description: "buy milk", isCompleted: false},
+            {id: 3, description: "have lunch", isCompleted: true},
         ]);
+        this.todoCounter = this.todos.length;
+        this.inputRef = useRef("todo_input")
+    }
+
+    addTodo(ev) {
+        if (ev.keyCode === 13) {
+            const input_text = this.inputRef.el.value.trim();
+            if (input_text) {
+                this.todoCounter++;
+                this.todos.push({id: this.todoCounter, description: input_text, isCompleted: false});
+                this.inputRef.el.value = "";
+            }
+        }
+    }
+
+    removeTodo(id) {
+        const index = this.todos.findIndex(todo => todo.id === id);
+        if (index >= 0) {
+            this.todos.splice(index, 1);
+        }
     }
 }
 

awesome_owl/static/src/todo_list/todo_list.xml

@@ -4,8 +4,9 @@
     <t t-name="awesome_owl.TodoList">
         <div>
         <p>Todo List:</p>
+        <input placeholder="Add a todo" t-on-keyup="addTodo" t-ref="todo_input"/>
         <p t-foreach="todos" t-as="td" t-key="td.id">
-            <TodoItem todo="td"/>
+            <TodoItem todo="td" onClick.bind="removeTodo"/>
         </p>
         </div>
     </t>