[IMP] awesome_owl: add input text to add todoitems dynamically

Author: msho-odoo

awesome_owl/static/src/card.js

@@ -1,9 +1,9 @@
-import { Component, useState } from "@odoo/owl"
+import { Component } from "@odoo/owl"
 
 export class Card extends Component {
     static template = "awesome_owl.card";
     static props = {
         title: String,
         content: String,
     }
-}
+}

awesome_owl/static/src/card.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.card">
-        <div class="card d-inline-block m-2" style="width: 18rem;">
+        <div class="card d-inline-block m-2" style="border:1px solid black; width: 18rem;">
             <div class="card-body">
                 <h5 class="card-title">
                     <t t-esc="props.title"/>

awesome_owl/static/src/counter.js

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

awesome_owl/static/src/counter.xml

@@ -2,10 +2,10 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.counter">
-        <div>Hello World
+        <div style="border:1px solid black; width: 10rem;">Hello World
             <p>Counter: <t t-esc="state.value"/>
             </p>
-            <button class="btn btn-primary" t-on-click="increment">Increment</button>
+            <button style="border:0.5px solid black;" class="btn btn-primary" t-on-click="increment">Increment</button>
         </div>
     </t>
 

awesome_owl/static/src/playground.js

@@ -1,13 +1,20 @@
-/** @odoo-module **/
-
-import { Component, markup } from "@odoo/owl";
+import { Component, useState, markup } from "@odoo/owl";
 import { Counter } from "./counter";
 import { Card } from "./card";
+import { TodoList } from "./todolist";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-    static components = { Counter, Card };
+    static components = { Counter, Card, TodoList };
+
+    setup() {
+        this.state = useState({ sum: 0 });
+    }
 
     card1Content = markup("<div>Some Text in div Tag</div>");
     card2Content = "<div>Some Text in div Tag</div>";
-}
+
+    incrementSum() {
+        this.state.sum++;
+    }
+}

awesome_owl/static/src/playground.xml

@@ -2,10 +2,13 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <Counter></Counter>
-        <Counter></Counter>
+        <Counter onChange.bind="incrementSum"></Counter>
+        <Counter onChange.bind="incrementSum"></Counter>
+        <p>Counters Sum: <t t-esc="state.sum"/>
+        </p>
         <Card title="'my title'" content="card1Content"/>
         <Card title="'my title'" content="card2Content"/>
+        <TodoList/>
     </t>
 
 </templates>

awesome_owl/static/src/todoitem.js

@@ -0,0 +1,23 @@
+import { Component, useState } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todoitem";
+
+    setup() {
+        this.state = useState({
+            todos: [],
+            idCounter: 0
+        });
+    };
+
+    addTodo(ev) {
+        if (ev.keyCode === 13) {
+            this.state.idCounter++
+            console.log(this.state.idCounter);
+            this.state.todos.push({
+                'id': this.state.idCounter, 'description': ev.target.value, 'isCompleted': false
+            });
+            ev.target.value = "";
+        }
+    }
+}

awesome_owl/static/src/todoitem.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todoitem">
+        <br/>
+        <input t-on-keyup="ev => this.addTodo(ev)" type="text" placeholder="Enter a new task"/>
+        <t t-foreach="state.todos" t-as="i" t-key="i.id">
+            <div style="border: 1px solid black">
+                <div t-att-class="{'text-muted': i.isCompleted, 'text-decoration-line-through': i.isCompleted}">
+                    <t t-out="i.id+'. '+i.description"/>
+                </div>
+            </div>
+        </t>
+    </t>
+
+</templates>

awesome_owl/static/src/todolist.js

@@ -0,0 +1,7 @@
+import { Component } from "@odoo/owl";
+import { TodoItem } from "./todoitem";
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todolist";
+    static components = { TodoItem };
+}

awesome_owl/static/src/todolist.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todolist">
+        <TodoItem/>
+    </t>
+
+</templates>