awesome_owl/static/src/card/card.js

@@ -4,21 +4,5 @@ import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
     static template = "awesome_owl.card";
-    static props = {
-        title: String,
-        slots: {
-            type: Object,
-            shape: {
-                default: true
-            },
-        }
-    };
-
-    setup() {
-        this.toggle = useState({isOpen: true});
-    }
-
-    toggleContent() {
-        this.toggle.isOpen = !this.toggle.isOpen;
-    }
+    static props = ['title', 'content'];
 }

awesome_owl/static/src/card/card.xml

@@ -5,12 +5,9 @@
         <section>
             <div class="card d-inline-block m-2" style="width: 18rem;">
                 <div class="card-body">
-                    <h3 class="card-title">
-                        <t t-out="props.title"/>
-                        <button class="btn" t-on-click="toggleContent">Toggle</button>
-                    </h3>
-                    <p class="card-text" t-if="toggle.isOpen">
-                        <t t-slot="default"/>
+                    <h3 class="card-title"><t t-esc="props.title"/></h3>
+                    <p class="card-text">
+                        <t t-esc="props.content"/>
                     </p>
                 </div>
             </div>

awesome_owl/static/src/playground.xml

@@ -6,12 +6,8 @@
             <Counter onChange.bind="incrementSum"/>
             <p>The sum is <t t-esc="sum.value"/></p>
             <hr />
-            <Card title="'Card 1'">
-                <span>Hello Owl</span>
-            </Card>
-            <Card title="'Card, the 2nd'">
-                <Counter />
-            </Card>
+            <Card title="'Card 1'" content="'This is the awesome content of the card 1'" />
+            <Card title="'Card, the 2nd'" content="'Here is another card content. It is the second one.'" />
             <hr/>
             <TodoList />
     </t>

awesome_owl/static/src/todo_list/todo_item.js

@@ -10,14 +10,9 @@ 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);
-    }
 }

awesome_owl/static/src/todo_list/todo_item.xml

@@ -7,7 +7,6 @@
                 <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>

awesome_owl/static/src/todo_list/todo_list.js

@@ -10,7 +10,6 @@ export class TodoList extends Component {
     static components = { TodoItem };
 
     setup() {
-        this.todoCounter = 1;
         this.todos = useState([]);
         useAutofocus('todo_input');
     }
@@ -20,7 +19,7 @@ export class TodoList extends Component {
         if(ev.keyCode === 13) {
             if(ev.target.value !== '') {
                 // Let's create a todo
-                this.todos.push({ id: this.todoCounter++, description: ev.target.value, isCompleted: false });
+                this.todos.push({ id: this.todos.length+1, description: ev.target.value, isCompleted: false });
                 ev.target.value = '';
             }
         }
@@ -32,11 +31,4 @@ 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);
-        }
-    }
 }

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" removeTodo.bind="removeItem"/>
+                <TodoItem todo="todo" onToggle.bind="toggleState"/>
             </t>
         </div>
     </t>