diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js
index 637fa4bb972..0c19267a96c 100644
--- a/awesome_dashboard/static/src/dashboard.js
+++ b/awesome_dashboard/static/src/dashboard.js
@@ -1,10 +1,41 @@
/** @odoo-module **/
-import { Component } from "@odoo/owl";
+import { Component, onWillStart } from "@odoo/owl";
import { registry } from "@web/core/registry";
-
+import { Layout } from "@web/search/layout";
+import { useService } from "@web/core/utils/hooks";
+import { DashboardItem } from "./dashboard_item/dashboard_item"
class AwesomeDashboard extends Component {
static template = "awesome_dashboard.AwesomeDashboard";
+
+ static components = { Layout, DashboardItem };
+
+ setup() {
+ this.action = useService("action");
+ this.statistics = useService("awesome_dashboard.statistics");
+ this.display = {
+ controlPanel: {},
+ };
+ onWillStart(async () => {
+ this.statistics = await this.statistics.loadStatistics();
+ });
+ }
+
+ openCustomerView() {
+ this.action.doAction("base.action_partner_form");
+ }
+
+ openLeads() {
+ this.action.doAction({
+ type: "ir.actions.act_window",
+ name: "All leads",
+ res_model: "crm.lead",
+ views: [
+ [false, "list"],
+ [false, "form"],
+ ],
+ });
+ }
}
registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
diff --git a/awesome_dashboard/static/src/dashboard.scss b/awesome_dashboard/static/src/dashboard.scss
new file mode 100644
index 00000000000..49a8d6a691f
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard.scss
@@ -0,0 +1,3 @@
+.o_dashboard {
+ background-color: rgb(86, 72, 90);
+}
\ No newline at end of file
diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard.xml
index 1a2ac9a2fed..ff654ba4f90 100644
--- a/awesome_dashboard/static/src/dashboard.xml
+++ b/awesome_dashboard/static/src/dashboard.xml
@@ -2,7 +2,34 @@
<templates xml:space="preserve">
<t t-name="awesome_dashboard.AwesomeDashboard">
- hello dashboard
+ <Layout display="display" className="'o_dashboard h-100'">
+ <t t-set-slot="layout-buttons">
+ <button class="btn btn-primary" t-on-click="openCustomerView">Customers</button>
+ <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
+ </t>
+ <div class="d-flex flex-wrap">
+ <DashboardItem>
+ Number of new orders this month
+ <t t-esc="statistics.nb_new_orders"/>
+ </DashboardItem>
+ <DashboardItem>
+ Total amount of new orders this month
+ <t t-esc="statistics.total_amount"/>
+ </DashboardItem>
+ <DashboardItem>
+ Average amount of t-shirt by order this month
+ <t t-esc="statistics.average_quantity"/>
+ </DashboardItem>
+ <DashboardItem>
+ Number of cancelled orders this month
+ <t t-esc="statistics.nb_cancelled_orders"/>
+ </DashboardItem>
+ <DashboardItem>
+ Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’
+ <t t-esc="statistics.average_time"/>
+ </DashboardItem>
+ </div>
+ </Layout>
</t>
</templates>
diff --git a/awesome_dashboard/static/src/dashboard_item/dashboard_item.js b/awesome_dashboard/static/src/dashboard_item/dashboard_item.js
new file mode 100644
index 00000000000..24373d4836b
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_item/dashboard_item.js
@@ -0,0 +1,16 @@
+import { Component } from "@odoo/owl";
+export class DashboardItem extends Component {
+ static template = "awesome_dashboard.DashboardItem"
+ static props = {
+ slots: {
+ type: Object,
+ optional: true,
+ default: () => ({}),
+ },
+ size: {
+ type: Number,
+ default: 1,
+ optional: true,
+ },
+ };
+}
diff --git a/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml b/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml
new file mode 100644
index 00000000000..d023340bb59
--- /dev/null
+++ b/awesome_dashboard/static/src/dashboard_item/dashboard_item.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+ <t t-name="awesome_dashboard.DashboardItem">
+ <div class="card m-2 border-dark" t-attf-style="width: {{18*props.size}}rem;">
+ <div class="card-body">
+ <t t-slot="default"/>
+ </div>
+ </div>
+ </t>
+</templates>
\ No newline at end of file
diff --git a/awesome_dashboard/static/src/statistics.js b/awesome_dashboard/static/src/statistics.js
new file mode 100644
index 00000000000..9f7a1b19a09
--- /dev/null
+++ b/awesome_dashboard/static/src/statistics.js
@@ -0,0 +1,14 @@
+import { registry } from "@web/core/registry";
+import { memoize } from "@web/core/utils/functions";
+import { rpc } from "@web/core/network/rpc";
+
+const statistics = {
+ async: ["loadStatistics"],
+ start() {
+ return {
+ loadStatistics: memoize(() => rpc("/awesome_dashboard/statistics")),
+ };
+ },
+};
+
+registry.category("services").add("awesome_dashboard.statistics", statistics);
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
new file mode 100644
index 00000000000..a36b44300d3
--- /dev/null
+++ b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,22 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+ static template = "awesome_owl.Card";
+ static props = {
+ title: { type: String },
+ slots: {
+ type: Object,
+ shape: { default:true },
+ },
+ }
+
+ setup() {
+ this.state = useState({ isToggled: true });
+ }
+ toggle() {
+ this.state.isToggled = !this.state.isToggled;
+ if (this.props.onChange) {
+ this.props.onChange(this.state.isToggled);
+ }
+ }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
new file mode 100644
index 00000000000..9b662da71a5
--- /dev/null
+++ b/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-out="props.title"/>
+ <button class="btn" t-on-click="toggle">Toggle</button>
+ </h5>
+ <p class="card-text" t-if="state.isToggled">
+ <t t-slot="default"/>
+ </p>
+ </div>
+ </div>
+ </t>
+</templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
new file mode 100644
index 00000000000..f2c60324ea0
--- /dev/null
+++ 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 = {
+ initialValue: { type: Number, optional: true, default: 0, validate: (value) => value >= 0 },
+ onChange: { type: Function, optional: true },
+ };
+
+ setup() {
+ this.state = useState({ value: 0 });
+ }
+
+ increment() {
+ this.state.value++;
+ if (this.props.onChange) {
+ this.props.onChange(this.state.value);
+ }
+ }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml
new file mode 100644
index 00000000000..83b2dcf0d06
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+ <t t-name="awesome_owl.Counter">
+ <div class="d-inline-flex align-items-center gap-2 m-3 p-3 border">
+ <p>Counter: <t t-esc="state.value"/></p>
+ <button class="btn btn-primary" 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
index 657fb8b07bb..b1c13c12b1d 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,7 +1,19 @@
-/** @odoo-module **/
-
-import { Component } from "@odoo/owl";
+import { Component, markup, 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.s1 = "<div class='text-primary'>some content</div>";
+ this.s2 = markup("<div class='text-primary'>some content</div>");
+ this.sum = useState({ value: 0 });
+ }
+
+ incrementSum() {
+ this.sum.value++;
+ }
}
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f9..65298c9a32a 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -4,7 +4,20 @@
<t t-name="awesome_owl.playground">
<div class="p-3">
hello world
+ <Counter onChange.bind="incrementSum"/>
+ <Counter onChange.bind="incrementSum"/>
+ <div>The sum is: <t t-esc="sum.value"/></div>
+ </div>
+ <div class="p-3">
+ <Card title="'Card 1'">
+ <p>This is the content of Card 1.</p>
+ </Card>
+ <Card title="'Card 2'">
+ <Counter onChange.bind="incrementSum"/>
+ </Card>
+ </div>
+ <div class="d-inline-flex p-3 m-3 border">
+ <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
new file mode 100644
index 00000000000..4030485b157
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_item.js
@@ -0,0 +1,24 @@
+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+ static template = "awesome_owl.TodoItem";
+ static props = {
+ todo: { type: Object,
+ shape: {
+ id: { type: Number, default: 0 },
+ description: { type: String, default: "" },
+ isCompleted: { type: Boolean, default: false },
+ }
+ },
+ toggleState: { type: Function, optional: true },
+ removeTodo: { type: Function, optional: true },
+ };
+
+ onChange() {
+ this.props.toggleState(this.props.todo.id);
+ }
+
+ onRemove() {
+ this.props.removeTodo(this.props.todo.id);
+ }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_item.xml b/awesome_owl/static/src/todo_list/todo_item.xml
new file mode 100644
index 00000000000..c4eb7c25a84
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_item.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+ <t t-name="awesome_owl.TodoItem">
+ <div class="form-check">
+ <input class="form-check-input" type="checkbox" t-att-id="props.todo.id" t-att-checked="props.todo.isCompleted" t-on-change="onChange"/>
+ <label t-att-for="props.todo.id" t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted, '': !props.todo.isCompleted}">
+ <t t-esc="props.todo.id"/>
+ <t t-esc="props.todo.description"/>
+ </label>
+ <span role="botton" class="fa fa-remove" t-on-click="onRemove"/>
+ </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
new file mode 100644
index 00000000000..eb38b1694d7
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_list.js
@@ -0,0 +1,38 @@
+import {Component, useState} from "@odoo/owl";
+import {TodoItem} from "./todo_item";
+import { useAutofocus } from "../utils";
+
+export class TodoList extends Component {
+ static template = "awesome_owl.TodoList";
+ static components = {TodoItem};
+
+ setup() {
+ this.todos = useState([]);
+ useAutofocus("input")
+ }
+
+ addTodo(ev) {
+ if (ev.keyCode === 13 && ev.target.value.trim() != "") {
+ const newTodo = {
+ id: this.todos.length + 1,
+ description: ev.target.value.trim(),
+ isCompleted: false,
+ };
+ this.todos.push(newTodo);
+ ev.target.value = "";
+ }
+ }
+ toggleTodo(id) {
+ const todo = this.todos.find(todo => todo.id === id);
+ if (todo) {
+ todo.isCompleted = !todo.isCompleted;
+ }
+ }
+
+ removeTodo(id) {
+ const index = this.todos.findIndex(todo => todo.id === id);
+ if (index !== -1) {
+ this.todos.splice(index, 1);
+ }
+ }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo_list/todo_list.xml b/awesome_owl/static/src/todo_list/todo_list.xml
new file mode 100644
index 00000000000..f3d1d9f4021
--- /dev/null
+++ b/awesome_owl/static/src/todo_list/todo_list.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+ <t t-name="awesome_owl.TodoList">
+ <div class="todo-list align-items-center gap-2 m-3 p-3 border">
+ <input type="text" class="form-control" placeholder="Add a new todo" t-on-keyup="addTodo" t-ref="input"/>
+ <t t-foreach="todos" t-as="todo" t-key="todo.id">
+ <TodoItem todo="todo" toggleState.bind="toggleTodo" removeTodo.bind="removeTodo"/>
+ </t>
+ </div>
+ </t>
+</templates>
\ No newline at end of file
diff --git a/awesome_owl/static/src/utils.js b/awesome_owl/static/src/utils.js
new file mode 100644
index 00000000000..026c6c1b076
--- /dev/null
+++ b/awesome_owl/static/src/utils.js
@@ -0,0 +1,13 @@
+import {useRef, onMounted} from "@odoo/owl";
+
+export function useAutofocus(input) {
+ const inputRef = useRef(input);
+
+ onMounted(() => {
+ if (inputRef.el) {
+ inputRef.el.focus();
+ }
+ });
+
+ return { inputRef };
+}
\ No newline at end of file