From 63961602695e804cc62d0ecba9f7952b41e6dc87 Mon Sep 17 00:00:00 2001
From: Matt Marcha <matt@marcha.pro>
Date: Wed, 21 Aug 2024 16:15:54 -1000
Subject: [PATCH] Section 12

---
 awesome_owl/static/src/todo_list/todo_item.js  |  7 ++++++-
 awesome_owl/static/src/todo_list/todo_item.xml |  1 +
 awesome_owl/static/src/todo_list/todo_list.js  | 10 +++++++++-
 awesome_owl/static/src/todo_list/todo_list.xml |  2 +-
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/awesome_owl/static/src/todo_list/todo_item.js b/awesome_owl/static/src/todo_list/todo_item.js
index 2d1f126..d118ff7 100644
--- a/awesome_owl/static/src/todo_list/todo_item.js
+++ b/awesome_owl/static/src/todo_list/todo_item.js
@@ -10,9 +10,14 @@ export class TodoItem extends Component {
             shape: { id: Number, description: String, isCompleted: Boolean }
         },
         onToggle: Function,
+        removeTodo: Function,
     };
 
     toggle() {
         this.props.onToggle(this.props.todo.id);
-    } 
+    }
+    
+    remove() {
+        this.props.removeTodo(this.props.todo.id);
+    }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_item.xml b/awesome_owl/static/src/todo_list/todo_item.xml
index 5eda902..45cbfbe 100644
--- a/awesome_owl/static/src/todo_list/todo_item.xml
+++ b/awesome_owl/static/src/todo_list/todo_item.xml
@@ -7,6 +7,7 @@
                 <t t-esc="props.todo.id"/>. 
                 <t t-esc="props.todo.description"/>
             </label>
+            <span class="fa fa-remove" t-on-click="remove"/>
         </div>
     </t>
 </templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_list.js b/awesome_owl/static/src/todo_list/todo_list.js
index 3433421..d0e8723 100644
--- a/awesome_owl/static/src/todo_list/todo_list.js
+++ b/awesome_owl/static/src/todo_list/todo_list.js
@@ -10,6 +10,7 @@ export class TodoList extends Component {
     static components = { TodoItem };
 
     setup() {
+        this.todoCounter = 1;
         this.todos = useState([]);
         useAutofocus('todo_input');
     }
@@ -19,7 +20,7 @@ export class TodoList extends Component {
         if(ev.keyCode === 13) {
             if(ev.target.value !== '') {
                 // Let's create a todo
-                this.todos.push({ id: this.todos.length+1, description: ev.target.value, isCompleted: false });
+                this.todos.push({ id: this.todoCounter++, description: ev.target.value, isCompleted: false });
                 ev.target.value = '';
             }
         }
@@ -31,4 +32,11 @@ export class TodoList extends Component {
             todo.isCompleted = !todo.isCompleted;
         }
     }
+
+    removeItem(id) {
+        const todoIndex = this.todos.findIndex((obj) => obj.id === id);
+        if (todoIndex >= 0) {
+            this.todos.splice(todoIndex, 1);
+        }
+    }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_list.xml b/awesome_owl/static/src/todo_list/todo_list.xml
index 1cfca54..30b9dfc 100644
--- a/awesome_owl/static/src/todo_list/todo_list.xml
+++ b/awesome_owl/static/src/todo_list/todo_list.xml
@@ -4,7 +4,7 @@
        <p><input t-ref="todo_input" type="text" name="new-todo" placeholder="Add new todo" t-on-keyup="addTodo" /></p>
        <div class="d-inline-block border p-2 m-2">
             <t t-foreach="todos" t-as="todo" t-key="todo.id">
-                <TodoItem todo="todo" onToggle.bind="toggleState"/>
+                <TodoItem todo="todo" onToggle.bind="toggleState" removeTodo.bind="removeItem"/>
             </t>
         </div>
     </t>