[IMP] awesome_owl: implement add & delete task functionality in todo list and improve UI for task view.

- Focus input field on mount in TodoList component using useAutoFocus() method.
- Add checkbox to TodoItem with toggleState callback to update isCompleted status on change
- Add removeTodo callback to TodoItem and trigger it via click on remove icon, to delete the task.

Author: aarp-odoo

awesome_owl/static/src/todo/todo_item.js

@@ -11,5 +11,20 @@ export class TodoItem extends Component {
                 isCompleted: Boolean,
             }
         },
+        toggleTaskState: {
+            type: Function,
+        },
+        taskDelete: {
+            type: Function,
+        }
+
+    }
+
+    toggleTaskState() {
+        this.props.toggleTaskState(this.props.todo.id);
+    }
+
+    taskDelete() {
+        this.props.taskDelete(this.props.todo.id);
     }
 }

awesome_owl/static/src/todo/todo_item.xml

@@ -1,9 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="awesome_owl.TodoItem">
-        <div class="d-flex mb-1" t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted}">
-            <span><t t-esc="props.todo.id"></t>.</span>
-            <span class="ms-1"><t t-esc="props.todo.description"></t></span>
+        <div class="d-flex align-items-center gap-2">
+            <input t-att-id="props.todo.id" type="checkbox" class="form-check-input mb-2" t-att-checked="props.todo.isCompleted" t-on-change="toggleTaskState"/>
+            <div class="d-flex mb-1 p-1 ps-2 flex-grow-1" t-att-for="props.todo.id" t-att-style="!props.todo.isCompleted ? 'border-radius: 8px; background: #eaeaea;' : ''" t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted}">
+                <span class="pe-2" style="border-right: 1px solid #999;"><t t-esc="props.todo.id"></t>.</span>
+                <span class="ms-2"><t t-esc="props.todo.description"></t></span>
+            </div>
+            <span class="fa fa-trash-o text-danger mb-2" t-on-click="taskDelete"/>
         </div>
     </t>
 </templates>

awesome_owl/static/src/todo/todo_list.js

@@ -1,5 +1,6 @@
 import { Component, useState } from "@odoo/owl";
 import { TodoItem } from "./todo_item";
+import { useAutoFocus } from "../utils"
 
 export class TodoList extends Component {
     static template = "awesome_owl.TodoList"
@@ -8,6 +9,7 @@ export class TodoList extends Component {
 
     setup () {
         this.todos = useState([]);
+        useAutoFocus();
     }
 
     addTask(event) {
@@ -20,4 +22,17 @@ export class TodoList extends Component {
         });
         event.target.value = '';
     }
+
+    toggleTaskState(todo_id) {
+        const task = this.todos.find((t) => t.id === todo_id);
+        if (!task) return;
+        task.isCompleted = !task.isCompleted;
+    }
+
+    taskDelete(todo_id) {
+        const taskIndex = this.todos.findIndex((t) => t.id === todo_id)
+        if (taskIndex >= 0) {
+            this.todos.splice(taskIndex, 1);
+        }
+    }
 }

awesome_owl/static/src/todo/todo_list.xml

@@ -3,9 +3,9 @@
     <t t-name="awesome_owl.TodoList">
         <div class="border p-2 m-5" style="width: 400px;">
             <h3 class="mb-3">Todo List</h3>
-            <input id="task-entry" placeholder="Enter a new task" class="form-control" t-on-keyup="addTask"></input>
+            <input id="task-entry" placeholder="Enter a new task" class="form-control mb-3" t-on-keyup="addTask" t-ref="focus-input"></input>
             <t t-foreach="todos" t-as="todo" t-key="todo.id">
-                <TodoItem todo="todo"/>
+                <TodoItem todo="todo" toggleTaskState.bind="toggleTaskState" taskDelete.bind="taskDelete"/>
             </t>
         </div>
     </t>

awesome_owl/static/src/utils.js

@@ -0,0 +1,8 @@
+import { useRef, onMounted } from "@odoo/owl";
+
+export const useAutoFocus = () => {
+    const inputRef = useRef("focus-input");
+    onMounted(() => {
+        inputRef.el?.focus();
+    })
+}