Merge pull request #7 from SARL-PACIFIC-ERP/development

Development

awesome_owl/static/src/card/card.js

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

awesome_owl/static/src/card/card.xml

@@ -5,9 +5,12 @@
         <section>
             <div class="card d-inline-block m-2" style="width: 18rem;">
                 <div class="card-body">
-                    <h3 class="card-title"><t t-esc="props.title"/></h3>
-                    <p class="card-text">
-                        <t t-esc="props.content"/>
+                    <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"/>
                     </p>
                 </div>
             </div>

awesome_owl/static/src/playground.xml

@@ -6,8 +6,12 @@
             <Counter onChange.bind="incrementSum"/>
             <p>The sum is <t t-esc="sum.value"/></p>
             <hr />
-            <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.'" />
+            <Card title="'Card 1'">
+                <span>Hello Owl</span>
+            </Card>
+            <Card title="'Card, the 2nd'">
+                <Counter />
+            </Card>
             <hr/>
             <TodoList />
     </t>

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);
+    }
 }

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>

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);
+        }
+    }
 }

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>