[IMP] Awesome Owl: Adding the task list, cards and counter.

In this commit, I added the task list, task item, counter and cards.
I used hooks, event handling, and callbacks (between parent and child components).
This commit is related to the first chapter of web framework from Odoo's Official documentation (task 7:14)

awesome_owl/static/src/card/card.js

@@ -1,4 +1,4 @@
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
     static template = "awesome_owl.card";
@@ -7,6 +7,19 @@ export class Card extends Component {
             type: String,
             validate: s => s.startsWith("[Odoo]")
         },
-        "content": String
+        slots: {
+            type: Object,
+            shape: {
+                default: true
+            },
+        }
+    }
+
+    setup() {
+        this.state = useState({value: true});
+    }
+
+    toggleState() {
+        this.state.value = !this.state.value;
     }
 }

awesome_owl/static/src/card/card.xml

@@ -2,9 +2,14 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.card">
-        <div>
+        <label class="switch">
+            <input type="checkbox" t-on-click="toggleState"/>
+        </label>
+
+
+        <div t-if="state.value == true">
             <span>Title: <t t-out="props.title"/></span>
-            <span>Content: <t t-out="props.content"/></span>
+            <t t-slot="default"/>
         </div>
     </t>
 </templates>

awesome_owl/static/src/playground.js

@@ -1,16 +1,16 @@
 /** @odoo-module **/
 
-import { Component, markup, useState } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 import { Card } from "./card/card";
 import { Counter } from "./counter/counter";
+import { TodoList } from "./todo_list/todo_list";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-    static components = { Counter, Card };
+    static components = { Counter, Card, TodoList };
 
     setup() {
         this.title = "[Odoo] New version here!!!";
-        this.content = markup("<div><span>19.0</span></div>");
         this.sum = useState({value: 0});
     }
 

awesome_owl/static/src/playground.xml

@@ -10,7 +10,13 @@
         </div>
         <span>Total counter sum: <t t-out="sum.value"></t></span>
         <div>
-            <Card title="title" content="content"/>
+            <Card title="title">
+                <Counter/>
+            </Card>
+        </div>
+        <br/>
+        <div>
+            <TodoList/>
         </div>
     </t>
 </templates>

awesome_owl/static/src/todo_list/todo_item.js

@@ -0,0 +1,25 @@
+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.TodoItem";
+    static props = {
+        todo: {
+            type: Object,
+            shape: {
+                id: Number,
+                description: String,
+                isCompleted: Boolean
+            }
+        },
+        toggleState: Function,
+        deleteTodo: Function
+    }
+
+    onChange() {
+        this.props.toggleState(this.props.todo.id);
+    }
+
+    onDelete() {
+        this.props.deleteTodo(this.props.todo.id);
+    }
+}

awesome_owl/static/src/todo_list/todo_item.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.TodoItem">
+        <div t-att-class="{'text-muted': props.todo.isCompleted, 'text-decoration-line-through': props.todo.isCompleted}">
+            <input type="checkbox" t-att-checked="props.todo.isCompleted ? 'checked' : undefined" t-on-change="onChange"/>
+            <t t-esc="props.todo.id"/>
+            <t t-esc="props.todo.description"/>
+            <span class="fa fa-remove" t-on-click="onDelete"/>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/todo_list/todo_list.js

@@ -0,0 +1,41 @@
+import { Component, useState } from "@odoo/owl";
+import { useAutofocus } from "../utils";
+import { TodoItem } from "./todo_item";
+
+export class TodoList extends Component {
+    static template = "awesome_owl.TodoList";
+    static components = {TodoItem};
+
+    setup() {
+        this.idCounter = 0;
+        this.todos = useState([]);
+        useAutofocus("input");
+        this.toggleState = this.toggleState.bind(this);
+        this.deleteTodo = this.deleteTodo.bind(this);
+    }
+
+    addTodo(ev) {
+        if (ev.keyCode === 13 && ev.target.value != "") {
+            this.todos.push({
+                id: this.idCounter++,
+                description: ev.target.value,
+                isCompleted: false
+            });
+            ev.target.value = "";
+        }
+    }
+
+    toggleState(id) {
+        const todo = this.todos.find((t) => t.id === id);
+        if (todo) {
+            todo.isCompleted = !todo.isCompleted;
+        }
+    }
+
+    deleteTodo(id) {
+        const index = this.todos.findIndex((t) => t.id === id);
+        if (index >= 0) {
+            this.todos.splice(index, 1);
+        }
+    }
+}

awesome_owl/static/src/todo_list/todo_list.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.TodoList">
+        <div>
+            <h2>Todo List</h2>
+            <input placeholder="Enter a new task" t-on-keyup="addTodo" t-ref="input"/>
+            <t t-foreach="todos" t-as="todo" t-key="todo.id">
+                <TodoItem toggleState="toggleState" todo="todo" deleteTodo="deleteTodo"/>
+            </t>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/utils.js

@@ -0,0 +1,8 @@
+import { onMounted, useRef } from "@odoo/owl";
+
+export function useAutofocus(refName) {
+    var inputRef = useRef(refName);
+    onMounted(() => {
+        inputRef.el.focus();
+    });
+}