[IMP] awesome_owl: add two counters

awesome_owl/static/src/card/card.js

@@ -0,0 +1,37 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+    static props = {
+        id: Number,
+        title: String,
+        isCrossedOut: Boolean,
+        toggleState: {
+            Function, optional: true
+        },
+        removeTodo: {
+            Function, optional: true
+        },
+        slots: Object
+    }
+
+    setup() {
+        this.state = useState({
+            isCrossed: this.props.isCrossedOut,
+            isOpen: false
+        })
+    }
+
+    toggleState(event) {
+        this.state.isCrossed = !this.state.isCrossed;
+        this.props.toggleState(this.props.id);
+    }
+
+    removeTodo(event) {
+        this.props.removeTodo(this.props.id);
+    }
+
+    toggleCard(event) {
+        this.state.isOpen = !this.state.isOpen
+    }
+}

awesome_owl/static/src/card/card.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.card">
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <div class="card-body" t-on-click="toggleCard">
+                <input type="checkbox" t-on-click="toggleState"/>
+                <h5 class="card-title" t-att-class="{'text-muted text-decoration-line-through': state.isCrossed}"><t t-esc="props.title"/></h5>
+                <p class="card-text" t-if="this.state.isOpen">
+                    <t t-slot="default"/>
+                    <t t-out="state.isOpen"/>
+                </p>
+                <span class="fa fa-remove" t-on-click="removeTodo"/>
+            </div>
+        </div>  
+    </t>
+</templates>

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,17 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "awesome_owl.counter";
+    static props = {
+        onChange: { Function, optional: true }
+    }
+
+    setup() {
+        this.state = useState({ value: 0 });
+    }
+
+    increment() {
+        this.state.value++
+        this.props.onChange();
+    }
+}

awesome_owl/static/src/counter/counter.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.counter">
+        <p>
+            Counter: <t t-esc="state.value"/>
+        </p>
+        <button class="btn btn-primary" t-on-click="increment">Increment</button>
+    </t>
+
+</templates>

awesome_owl/static/src/playground.js

@@ -1,5 +1,18 @@
-import { Component } from "@odoo/owl";
+import { Component, useState, markup } from "@odoo/owl";
+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, TodoList }
+
+    content = markup("<div> some texte 2</div>")
+
+    setup() {
+        this.sum = useState({ value: 0 });
+    }
+
+    incrementSum() {
+        this.sum.value++
+    }
+}

awesome_owl/static/src/playground.xml

@@ -1,10 +1,14 @@
-<?xml version="1.0" encoding="UTF-8" ?>
+<?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
-
     <t t-name="awesome_owl.playground">
         <div class="p-3">
             hello world
         </div>
+        <Counter onChange.bind="incrementSum" />
+        <Counter onChange.bind="incrementSum" />
+        <div>
+            Total count : <t t-esc="sum.value"/>
+        </div>
+        <TodoList/>
     </t>
-
-</templates>
+</templates>

awesome_owl/static/src/todo_item/todo_item.js

@@ -0,0 +1,28 @@
+import { Component, useState } from "@odoo/owl";
+import { Card } from "../card/card"
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todo_item";
+    static components = { Card }
+    static props = {
+        todo: {
+            type: Object,
+            shape: {
+                id: Number,
+                description: String,
+                isCompleted: Boolean
+            }
+        },
+        removeTodo: {
+            Function, optional: true
+        }
+    }
+
+    toggleState(id) {
+
+    }
+
+    removeTodo(id) {
+        this.props.removeTodo(id);
+    }
+}

awesome_owl/static/src/todo_item/todo_item.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_item">
+        <Card id="props.todo.id" title="props.todo.description" isCrossedOut="props.todo.isCompleted" 
+        removeTodo.bind="removeTodo" toggleState.bind="toggleState">
+            <t t-esc="props.todo.description" /> 
+        </Card>
+    </t>
+</templates>

awesome_owl/static/src/todo_list/todo_list.js

@@ -0,0 +1,38 @@
+import { Component, useState, useRef, onMounted } from "@odoo/owl";
+import { TodoItem } from "../todo_item/todo_item"
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todo_list";
+    static components = { TodoItem }
+
+    setup() {
+        this.todos = useState([]);
+        this.state = useState({
+            inputValue: ""
+        });
+        this.inputTodo = useRef('inputTodo');
+        onMounted(() => {
+            this.inputTodo.el.focus()
+        })
+    }
+
+    addTodo(event) {
+        if (event.keyCode !== 13 | this.state.inputValue === "") return;
+
+        this.todos.push({
+            id: this.todos.length,
+            description: this.state.inputValue,
+            isCompleted: false
+        })
+
+        this.state.inputValue = "";
+
+    }
+
+    removeTodo(id) {
+        const idx = this.todos.findIndex(todo => todo.id === id)
+        if (idx !== -1) {
+            this.todos.splice(idx, 1)
+        }
+    }
+}

awesome_owl/static/src/todo_list/todo_list.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_list">
+        <input placeholder="Enter a new task" t-on-keyup="addTodo" t-model="state.inputValue" t-ref="inputTodo"/>
+        <t t-foreach="todos" t-as="todo" t-key="todo.id">
+            <TodoItem todo="todo" removeTodo.bind="removeTodo" />
+        </t>
+    </t>
+</templates>