[IMP] awesome_owl: counters, a card and a to do list

Author: aizu-odoo

awesome_owl/static/src/card/card.js

@@ -0,0 +1,16 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+//     static props = {
+//         title : {type: String },
+//         content : {type: String },
+//     }
+    setup() {
+        this.state= useState({ 'open': false });
+    }
+
+    flip_state(){
+        this.state.open = !this.state.open
+    }
+}

awesome_owl/static/src/card/card.xml

@@ -0,0 +1,17 @@
+<?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">
+                <h3>
+                    I'm a card
+                    <button t-on-click="flip_state">Toggle</button>
+                </h3>
+                <t t-if="state.open">
+                    <t t-slot="default"/>
+                </t>
+            </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 : {type: 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,16 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <h5>
+            I count your clickies
+        </h5>
+        <p> 
+            Counter: <t t-esc="state.value"/>
+            <button class="btn btn-primary" t-on-click="increment">
+                Click me to increment
+            </button>
+        </p>
+    </t>
+
+</templates>

awesome_owl/static/src/playground.js

@@ -1,7 +1,23 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
+import { Counter } from "./counter/counter";
+import { Card } from "./card/card";
+import { ToDoList } from "./todolist/todolist";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+    static components = { Counter, Card, ToDoList }
+    // title = markup("<div>I am a title</div>")
+    // content = markup("<div>some content</div>")
+    
+    setup() {
+        this.sum = useState({value: 2 });
+        
+    }
+
+    incrementSum() {
+        this.sum.value++;
+    }
+
 }

awesome_owl/static/src/playground.xml

@@ -2,9 +2,20 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
+        <div>
+            <h1>
+                Hello World \(0o0)/
+            </h1>
         </div>
+        <Counter onChange.bind="incrementSum"/>
+        <Counter onChange.bind="incrementSum"/>
+        I'm a sum of all the clickies: <t t-esc="sum.value"/>
+        <div>
+        <Card>
+            <Counter onChange.bind="incrementSum"/>
+        </Card>
+        </div>
+        <ToDoList/>
     </t>
 
 </templates>

awesome_owl/static/src/todoitem/todoitem.js

@@ -0,0 +1,15 @@
+import { Component,useState } from "@odoo/owl";
+
+export class ToDoItem extends Component {
+    static template = "awesome_owl.todoitem";
+
+    static props = {
+        todo : {type: Object, optional: true},
+        todo_index : {type: Number, optional: true},
+    }
+
+    removeTodo() {
+        this.props.todo.splice("props.todo_index", 1);
+    }
+
+}

awesome_owl/static/src/todoitem/todoitem.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todoitem">
+        <div>
+            <input type="checkbox" t-model="props.todo.isCompleted"/>
+            <p t-attf-class="{{props.todo.isCompleted == true ? 'text-muted text-decoration-line-through' : ''}}">
+            <t t-esc="((props.todo_index)+1) + '. ' + props.todo.description"/>
+            <button class="fa fa-remove" t-on-click="removeTodo"/>
+            </p>
+        </div>
+    </t>
+
+</templates>

awesome_owl/static/src/todolist/todolist.js

@@ -0,0 +1,27 @@
+import { Component,useState, useRef, onMounted } from "@odoo/owl";
+import { ToDoItem } from "../todoitem/todoitem";
+import { useAutofocus } from '../utils.js';
+
+
+export class ToDoList extends Component {
+    static template = "awesome_owl.todolist";
+    static components = { ToDoItem };
+
+    setup (){
+        this.todos = useState({todos_list:[], current_input: ""});
+        useAutofocus('focus')
+        // alternative way
+        // this.focusRef = useRef('focus');
+        // onMounted(() => {
+        //     this.focus.el.focus()
+        // })
+    }
+
+    addTodo (ev){
+        if (ev.keyCode === 13 && this.todos.current_input){
+            this.todos.todos_list.push({ description: this.todos.current_input , isCompleted: false})
+            this.todos.current_input = ''
+        }
+    }
+
+}

awesome_owl/static/src/todolist/todolist.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todolist">
+        <h3>To Do List</h3>
+        <input type="text" t-on-keyup="addTodo" t-model="todos.current_input" t-ref="focus"/>
+        <p t-foreach="todos.todos_list" t-as="todo" t-key="todo_index">
+            <ToDoItem todo="todo" todo_index="todo_index"/>
+        </p>
+    </t>
+
+</templates>

awesome_owl/static/src/utils.js

@@ -0,0 +1,16 @@
+import { useRef, useEffect } from "@odoo/owl";
+
+function useAutofocus(refname) {
+
+    let ref = useRef(refname);
+    useEffect(
+        (el) => el && el.focus(),
+        () => [ref.el]
+    );
+
+
+  }
+
+export {
+    useAutofocus
+};