[IMP] awesome_owl: Chapter 1 - Intro Owl Components

Author: wimar-odoo

awesome_owl/__manifest__.py

@@ -29,11 +29,15 @@
     'assets': {
         'awesome_owl.assets_playground': [
             ('include', 'web._assets_helpers'),
+            ('include', 'web._assets_frontend_helpers'),
             'web/static/src/scss/pre_variables.scss',
             'web/static/lib/bootstrap/scss/_variables.scss',
-            ('include', 'web._assets_bootstrap'),
-            ('include', 'web._assets_core'),
+            'web/static/lib/bootstrap/scss/_variables-dark.scss',
+            'web/static/lib/bootstrap/scss/_maps.scss',
+            ('include', 'web._assets_bootstrap_frontend'),
             'web/static/src/libs/fontawesome/css/font-awesome.css',
+            'web/static/src/scss/fontawesome_overridden.scss',
+            ('include', 'web._assets_core'),
             'awesome_owl/static/src/**/*',
         ],
     },

awesome_owl/static/src/card/card.js

@@ -0,0 +1,21 @@
+import { Component, useState } from "@odoo/owl";
+
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+    static props = {
+        title: String,
+        slots: {
+            type: Object,
+            optional: true,
+        },
+    };
+
+    setup() {
+        this.state = useState({ isToggled: false });
+    }
+
+    toggle() {
+        this.state.isToggled = !this.state.isToggled;
+    }
+}

awesome_owl/static/src/card/card.xml

@@ -0,0 +1,15 @@
+<?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-out="props.title"/><button class="btn btn-secondary" style="margin-left: 10px" t-on-click="toggle">Toggle</button></h5>
+                <div class="card-text" t-if="this.state.isToggled">
+                    <t t-slot="default"/>
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>

awesome_owl/static/src/counter/counter.js

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

awesome_owl/static/src/counter/counter.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <div>
+            Counter: <t t-esc="state.value"/>
+            <button class="btn btn-primary" t-on-click="increment" style="margin-left: 5px">
+                <t t-out="props.buttonText"/>
+            </button>
+        </div>
+    </t>
+
+</templates>

awesome_owl/static/src/playground.js

@@ -1,5 +1,19 @@
-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/todolist"
+
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+
+    static components = { Counter, Card, TodoList };
+
+    setup() {
+        this.state = useState({ value : 2 });
+    }
+
+    incrementSum() {
+        this.state.value++;
+    }
 }

awesome_owl/static/src/playground.scss

@@ -0,0 +1,3 @@
+.chapter_tuto {
+    border: solid; padding: 10px; border-radius: 5px; margin-bottom: 5px
+}

awesome_owl/static/src/playground.xml

@@ -2,9 +2,29 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
+        <div class="p-3 chapter_tuto">
             hello world
         </div>
+
+        <div class="chapter_tuto">
+            <Counter onChange.bind="incrementSum" t-props="{'buttonText': 'Custom Incr.'}"/>
+            <Counter onChange.bind="incrementSum"/>
+            <p>The sum id: <t t-esc="state.value"/></p>
+        </div>
+
+        <div class="chapter_tuto">
+            <Card t-props="{'title': 'Card 1'}">
+                <p>Some content</p>
+            </Card>
+
+            <Card t-props="{'title': 'Card 2'}">
+                <Counter/>
+            </Card>
+        </div>
+
+        <div class="chapter_tuto">
+            <TodoList/>
+        </div>
     </t>
 
 </templates>

awesome_owl/static/src/todo/todoitem.js

@@ -0,0 +1,27 @@
+import { Component } from "@odoo/owl";
+
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todoitem";
+    static props = {
+        id: Number,
+        description: String,
+        isCompleted: Boolean,
+        onToggle: {
+            Function,
+            optional: true,
+        },
+        onClick: {
+          Function,
+          optional: true,
+        },
+    };
+
+    toggleState() {
+        this.props.onToggle(this.props.id);
+    }
+
+    removeTodo() {
+        this.props.onClick(this.props.id);
+    }
+}

awesome_owl/static/src/todo/todoitem.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todoitem">
+        <p t-att-class="{'text-muted': props.isCompleted, 'text-decoration-line-through': props.isCompleted}">
+            <input type="checkbox" style="margin-right: 10px" t-att-checked="props.isCompleted" t-on-change="toggleState"/>
+            <t t-out="props.id"/>.
+            <t t-out="props.description"/>
+            <span class="fa fa-remove text-danger" t-on-click="removeTodo"/>
+        </p>
+    </t>
+
+</templates>