[ADD] awesome_owl: 1. Owl components

.gitignore

@@ -127,3 +127,5 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+.idea/

awesome_owl/static/src/card/card.js

@@ -0,0 +1,16 @@
+import {Component, markup, useState} from "@odoo/owl";
+
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+    static props = {title: {type: String}, slots: {type: Object}};
+
+    html_jojo_joke = "<p>Jojo be like muda muda muda muda (less funny when you write it)</p>";
+    html_markup_jojo_joke = markup("<p>Jojo be like muda muda muda muda (less funny when you write it)</p>");
+
+    state = useState({isOpened: true});
+
+    toggleVisibility() {
+        this.state.isOpened = !this.state.isOpened;
+    }
+}

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">
+                <h5 class="card-title"><t t-esc="props.title"/></h5>
+                <button type="button" class="btn btn-secondary" t-on-click="toggleVisibility">Toggle</button>
+                <p class="card-text" t-if="state.isOpened">
+                    <t t-slot="default"/>
+                    <t t-out="html_jojo_joke"/>
+                    <t t-out="html_markup_jojo_joke"/>
+                </p>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/counter/counter.js

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

awesome_owl/static/src/counter/counter.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <div class="row border align-items-center">
+            <div class="col">
+                Counter: <t t-esc="state.value"/>
+            </div>
+            <div class="col">
+                <button type="button" class="btn btn-secondary" t-on-click="increment">Increment</button>
+            </div>
+        </div>
+    </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 "./todo/todo_list";
+
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+
+    static components = {Counter, Card, TodoList};
+
+    state = useState({globalCount: 0})
+
+    setup() {
+        this.incrementBind = this.increment.bind(this);
+    }
+
+    increment() {
+        this.state.globalCount++;
+    }
 }

awesome_owl/static/src/playground.xml

@@ -2,8 +2,49 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
+        <div class="row border align-items-center">
+            <div class="col-2 p-3">
+                hello world
+            </div>
+            <div class="col-2">
+                <Counter onClick="incrementBind"/>
+            </div>
+            <div class="col-2">
+                <Counter onClick="incrementBind"/>
+            </div>
+        </div>
+        <div class="row border align-items-center">
+            <div class="col-2">
+                Global count: <t t-esc="state.globalCount"/>
+            </div>
+        </div>
+        <div class="row border align-items-center">
+            <div class="col-3">
+                <Card title="'Jojo'">
+                    Star Platinum
+                    <Counter onClick="incrementBind"/>
+                </Card>
+            </div>
+            <div class="col-3">
+                <Card title="'Kakyoin'">
+                    Hierophant green
+                    Global count: <t t-esc="state.globalCount"/>
+                </Card>
+            </div>
+            <div class="col-3">
+                <Card title="'Polnaref'">
+                    Silver Chariot
+                    <Card title="'Polnaref'">
+                        Silver Chariot again
+                        Global count: <t t-esc="state.globalCount"/>
+                    </Card>
+                </Card>
+            </div>
+        </div>
+        <div class="row border align-items-center">
+            <div class="col-3">
+                <TodoList/>
+            </div>
         </div>
     </t>
 

awesome_owl/static/src/todo/todo_item.js

@@ -0,0 +1,12 @@
+import {Component} from "@odoo/owl";
+import {Todo} from "./todo_model";
+
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todo_item";
+    static props = {
+        model: { type: Todo },
+        toggle: { type: Function },
+        removeTodo: { type: Function },
+    };
+}

awesome_owl/static/src/todo/todo_item.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_item">
+        <p t-att-class="props.model.isCompleted ? 'text-decoration-line-through text-muted' : '' ">
+            <input type="checkbox" t-att-id="props.model.id" t-att-checked="props.model.isCompleted"
+                   t-on-change="() => props.toggle(props.model.id)"/>
+            <t t-esc="props.model.id"/>.
+            <t t-esc="props.model.description"/>
+            <span class="fa fa-remove" t-on-click="(ev) => props.removeTodo(props.model.id)"/>
+        </p>
+    </t>
+</templates>

awesome_owl/static/src/todo/todo_list.js

@@ -0,0 +1,42 @@
+import {Component, useState} from "@odoo/owl";
+import {TodoItem} from "./todo_item";
+import {Todo} from "./todo_model";
+import {useAutoFocus} from "../utils";
+
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todo_list";
+    static components = {TodoItem};
+
+    index = 0;
+    state = useState({todos: []});
+
+    setup() {
+        useAutoFocus('addTaskInput')
+        this.toggleStateBind = this.toggleState.bind(this);
+        this.removeTodoBind = this.removeTodo.bind(this);
+    }
+
+    keyUpAddTodo(ev) {
+        if (ev.keyCode === 13 && ev.target.value !== "") {
+            this.state.todos.push(new Todo(this.index + 1, ev.target.value, false));
+            this.index++;
+            ev.target.value = "";
+        }
+    }
+
+    toggleState(id) {
+        this.state.todos.forEach((value, index, arr) => {
+            if (value.id === id) {
+                value.toggle();
+            }
+        })
+    }
+
+    removeTodo(id) {
+        const index = this.state.todos.findIndex((todo) => todo.id === id);
+        if (index >= 0) {
+            this.state.todos.splice(index, 1);
+        }
+    }
+}

awesome_owl/static/src/todo/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 class="form-control mb-3" type="text" placeholder="Enter a new task" t-on-keyup="keyUpAddTodo" t-ref="addTaskInput"/>
+        <t t-foreach="state.todos" t-as="item" t-key="item.id">
+            <TodoItem model="item" toggle="toggleStateBind" removeTodo="removeTodoBind"/>
+        </t>
+    </t>
+</templates>

awesome_owl/static/src/todo/todo_model.js

@@ -0,0 +1,11 @@
+export class Todo {
+    constructor(id, description, isCompleted) {
+        this.id = id;
+        this.description = description;
+        this.isCompleted = isCompleted;
+    }
+
+    toggle() {
+        this.isCompleted = !this.isCompleted;
+    }
+}

awesome_owl/static/src/utils.js

@@ -0,0 +1,9 @@
+import {useRef, onMounted} from "@odoo/owl";
+
+
+export function useAutoFocus(name) {
+    const ref = useRef(name);
+    onMounted(() => {
+        ref.el.focus();
+    });
+}