[ADD] web: owl components

ybenbrai · ybenbrai · commit 0e8052e5e593 · 2025-11-27T08:44:16.000+01:00
chapter 1: owl component
diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
@@ -1,8 +1,10 @@
 import { Component } from "@odoo/owl";
 import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout };
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard.scss b/awesome_dashboard/static/src/dashboard.scss
@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: #f0f0f0;
+}
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
@@ -2,7 +2,11 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+        <Layout display="{controlPanel: {}}" className="'o_dashboard h-100'">
+            <div class="p-3">
+                hello dashboard
+            </div>
+        </Layout>
     </t>
 
 </templates>
diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,17 @@
+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({ isOpen: true });
+    }
+
+    toggleContent() {
+        this.state.isOpen = !this.state.isOpen;
+    }
+}
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.card">
+        <div class="card d-inline-block align-top m-2" style="width: 18rem;">
+            <div class="card-body">
+                <div class="d-flex justify-content-between align-items-center mb-2">
+                    <h5 class="card-title mb-0"><t t-esc="props.title"/></h5>
+                    <button class="btn btn-sm btn-primary" t-on-click="toggleContent">
+                        <i t-attf-class="fa fa-chevron-{{ state.isOpen ? 'up' : 'down' }}"/>
+                    </button>
+                </div>
+                <div class="card-text" t-if="state.isOpen">
+                    <t t-slot="default"/>
+                </div>
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
@@ -0,0 +1,20 @@
+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.count = useState({ value: 0 });
+    }
+
+    increment() {
+        this.count.value++;
+        if (this.props.onChange) {
+            this.props.onChange(this.count.value);
+        }
+    }
+}
+
diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.counter">
+        <div class="border rounded p-2 bg-light">
+            <div class="mb-2">Counter: <strong><t t-esc="count.value"/></strong></div>
+            <button class="btn btn-primary btn-sm" t-on-click="increment">Increment</button>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
@@ -1,5 +1,17 @@
-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_list/todo_list";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+    static components = { Counter, Card, TodoList };
+
+    setup() {
+        this.state = useState({ sum: 2 });
+    }
+
+    incrementSum = () => {
+        this.state.sum++;
+    }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
@@ -1,10 +1,34 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
-
     <t t-name="awesome_owl.playground">
         <div class="p-3">
-            hello world
+            <div class="mb-4">
+                <Card title="'Card 1 - Plain Text'">
+                    <p>This is simple text content</p>
+                </Card>
+                <Card title="'Card 2 - With Counter'">
+                    <Counter onChange="incrementSum"/>
+                </Card>
+                <Card title="'Card 3 - HTML Content'">
+                    <p>This card has <strong>bold</strong> and <em>italic</em> text!</p>
+                </Card>
+            </div>
+            <div class="mb-4">
+                <h4>Counters</h4>
+                <div class="d-flex gap-3 mb-2">
+                    <div>
+                        <Counter onChange="incrementSum"/>
+                    </div>
+                    <div>
+                        <Counter onChange="incrementSum"/>
+                    </div>
+                    <div>
+                        <Counter onChange="incrementSum"/>
+                    </div>
+                </div>
+                <div class="alert alert-info">Sum: <strong><t t-esc="state.sum"/></strong></div>
+            </div>
+            <TodoList/>
         </div>
     </t>
-
 </templates>
diff --git a/awesome_owl/static/src/todo_list/todo_item.js b/awesome_owl/static/src/todo_list/todo_item.js
@@ -0,0 +1,17 @@
+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todo_item";
+    static props = {
+        todo: {
+            type: Object,
+            shape: {
+                id: Number,
+                description: String,
+                isCompleted: Boolean,
+            },
+        },
+        toggleState: Function,
+        removeTodo: Function,
+    };
+}
diff --git a/awesome_owl/static/src/todo_list/todo_item.xml b/awesome_owl/static/src/todo_list/todo_item.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_item">
+        <div class="todo-item d-flex align-items-center mb-2" t-att-class="props.todo.isCompleted ? 'text-muted text-decoration-line-through' : ''">
+            <input type="checkbox" class="form-check-input me-2" t-att-checked="props.todo.isCompleted" t-on-change="() => props.toggleState(props.todo.id)"/>
+            <span class="flex-grow-1"><t t-esc="props.todo.id"/>. <t t-esc="props.todo.description"/></span>
+            <span class="fa fa-remove text-danger ms-2" style="cursor: pointer;" t-on-click="() => props.removeTodo(props.todo.id)"/>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/todo_list/todo_list.js b/awesome_owl/static/src/todo_list/todo_list.js
@@ -0,0 +1,43 @@
+import { Component, useState } from "@odoo/owl";
+import { TodoItem } from "./todo_item";
+import { useAutofocus } from "../utils";
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todo_list";
+    static components = { TodoItem };
+
+    setup() {
+        this.todos = useState([
+            { id: 1, description: "buy milk", isCompleted: true },
+            { id: 2, description: "clean room", isCompleted: false },
+            { id: 3, description: "go to the gym", isCompleted: false },
+        ]);
+        this.inputRef = useAutofocus("add-input");
+    }
+
+    toggleState = (todoId) => {
+        const todo = this.todos.find(t => t.id === todoId);
+        if (todo) {
+            todo.isCompleted = !todo.isCompleted;
+        }
+    }
+
+    addTodo(ev) {
+        if (ev.keyCode === 13 && ev.target.value.trim()) {
+            const newId = this.todos.length > 0 ? Math.max(...this.todos.map(t => t.id)) + 1 : 1;
+            this.todos.push({
+                id: newId,
+                description: ev.target.value.trim(),
+                isCompleted: false,
+            });
+            ev.target.value = "";
+        }
+    }
+
+    removeTodo = (todoId) => {
+        const index = this.todos.findIndex(t => t.id === todoId);
+        if (index >= 0) {
+            this.todos.splice(index, 1);
+        }
+    }
+}
diff --git a/awesome_owl/static/src/todo_list/todo_list.xml b/awesome_owl/static/src/todo_list/todo_list.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todo_list">
+        <div class="todo-list" style="max-width: 500px;">
+            <h3>Todo List</h3>
+            <input type="text" placeholder="Enter a new task" class="form-control mb-3" t-ref="add-input" t-on-keyup="addTodo"/>
+            <div>
+                <t t-foreach="todos" t-as="todo" t-key="todo.id">
+                    <TodoItem todo="todo" toggleState="toggleState" removeTodo="removeTodo"/>
+                </t>
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/utils.js b/awesome_owl/static/src/utils.js
@@ -0,0 +1,11 @@
+import { useRef, onMounted } from "@odoo/owl";
+
+export function useAutofocus(refName = "autofocus") {
+    const ref = useRef(refName);
+    onMounted(() => {
+        if (ref.el) {
+            ref.el.focus();
+        }
+    });
+    return ref;
+}
diff --git a/estate/__manifest__.py b/estate/__manifest__.py
@@ -7,7 +7,7 @@
     'author': 'Odoo S.A.',
     'application': True,
     'license': 'LGPL-3',
-    'depends': ['base'],
+    'depends': ['base', 'awesome_owl', 'awesome_dashboard'],
     'data': [
         'security/ir.model.access.csv',
         'views/estate_property_tag_views.xml',

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,10 @@`
`1`	`1`	`import { Component } from "@odoo/owl";`
`2`	`2`	`import { registry } from "@web/core/registry";`
	`3`	`+import { Layout } from "@web/search/layout";`
`3`	`4`
`4`	`5`	`class AwesomeDashboard extends Component {`
`5`	`6`	`static template = "awesome_dashboard.AwesomeDashboard";`
	`7`	`+ static components = { Layout };`
`6`	`8`	`}`
`7`	`9`
`8`	`10`	`registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.o_dashboard {`
	`2`	`+ background-color: #f0f0f0;`
	`3`	`+}`