[IMP] awesome_owl: web framework tutorial

awesome_dashboard/static/src/dashboard-item/dashboard-item.js

@@ -0,0 +1,9 @@
+import { Component } from "@odoo/owl";
+
+export class DashboardItem extends Component {
+    static template = "awesome_dashboard.dashboard-item";
+    static props = {
+        size: Number,
+        slots: { type: Object, optional: true },
+    };
+}

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.dashboard-item">
+        <div class="card d-inline-block m-2" t-attf-style="width: {{18*props.size}}rem;">
+            <t t-slot="default"/>
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard-registry.js

@@ -0,0 +1,64 @@
+import { registry } from "@web/core/registry";
+import { NumberCard } from "./number-card/number-card";
+import { PieChartCard } from "./pie-chart/pie-chart-card";
+
+registry.category("awesome_dashboard").add("nb_new_orders", {
+    id: "nb_new_orders",
+    description: "Number of new orders this month",
+    component: NumberCard,
+    props: (data) => ({
+        title: "Number of new orders this month",
+        value: data.nb_new_orders,
+    }),
+});
+
+registry.category("awesome_dashboard").add("total_amount", {
+    id: "total_amount",
+    description: "Total amount of new orders this month",
+    component: NumberCard,
+    props: (data) => ({
+        title: "Total amount of new orders this month",
+        value: data.total_amount,
+    }),
+});
+
+registry.category("awesome_dashboard").add("average_quantity", {
+    id: "average_quantity",
+    description: "Average amount of t-shirt by order this month",
+    component: NumberCard,
+    props: (data) => ({
+        title: "Average amount of t-shirt by order this month",
+        value: data.average_quantity,
+    }),
+});
+
+registry.category("awesome_dashboard").add("nb_cancelled_orders", {
+    id: "nb_cancelled_orders",
+    description: "Number of cancelled orders this month",
+    component: NumberCard,
+    props: (data) => ({
+        title: "Number of cancelled orders this month",
+        value: data.nb_cancelled_orders,
+    }),
+});
+
+registry.category("awesome_dashboard").add("average_time", {
+    id: "average_time",
+    description: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+    component: NumberCard,
+    props: (data) => ({
+        title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+        value: data.average_time,
+    }),
+});
+
+registry.category("awesome_dashboard").add("orders_by_size", {
+    id: "orders_by_size",
+    description: "Ordered T-shirts by size",
+    component: PieChartCard,
+    size: 2,
+    props: (data) => ({
+        title: "Ordered T-shirts by size",
+        value: data.orders_by_size,
+    }),
+});

awesome_dashboard/static/src/dashboard.js

@@ -1,8 +1,35 @@
-import { Component } from "@odoo/owl";
 import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { Layout } from "@web/search/layout";
+import { Component, useState } from "@odoo/owl";
+import { DashboardItem } from "./dashboard-item/dashboard-item"
+import { NumberCard } from "./number-card/number-card"
+import { PieChartCard } from "./pie-chart/pie-chart-card"
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout, DashboardItem, NumberCard, PieChartCard };
+
+    setup() {
+        this.action = useService("action");
+        this.statistics = useState(useService("awesome_dashboard.statistics"));
+
+        // Dashboard items
+        this.items = registry.category("awesome_dashboard").getAll();
+    }
+
+    actionCustomers() {
+        this.action.doAction("base.action_partner_form", { viewType: "kanban" });
+    }
+
+    actionLeads() {
+        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);

awesome_dashboard/static/src/dashboard.scss

@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: gray;
+}

awesome_dashboard/static/src/dashboard.xml

@@ -2,7 +2,22 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+        <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">
+            <t t-set-slot="control-panel-always-buttons">
+                <button type="button" class="btn btn-primary" t-on-click="actionCustomers">Customers</button>
+                <button type="button" class="btn btn-primary" t-on-click="actionLeads">Leads</button>
+            </t>
+            <t t-set-slot="default">
+                <div t-if="statistics.isReady">
+                    <t t-foreach="items" t-as="item" t-key="item.id">
+                        <DashboardItem size="item.size || 1">
+                            <t t-set="itemProp" t-value="item.props ? item.props(statistics) : { 'data': statistics }"/>
+                            <t t-component="item.component" t-props="itemProp"/>
+                        </DashboardItem>
+                    </t>
+                </div>
+            </t>
+        </Layout>
     </t>
 
 </templates>

awesome_dashboard/static/src/number-card/number-card.js

@@ -0,0 +1,9 @@
+import { Component } from "@odoo/owl";
+
+export class NumberCard extends Component {
+    static template = "awesome_dashboard.number-card";
+    static props = {
+        title: String,
+        value: Number,
+    };
+}

awesome_dashboard/static/src/number-card/number-card.scss

@@ -0,0 +1,5 @@
+.number-card-value {
+    color: green;
+    font-weight: bold;
+    text-align: center;
+}

awesome_dashboard/static/src/number-card/number-card.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.number-card">
+        <div class="card-body">
+            <h5 class="card-title" style="text-align: center;"><t t-esc="props.title"/></h5>
+            <br/>
+            <h1 class="number-card-value" t-esc="props.value"/>
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/pie-chart/pie-chart-card.js

@@ -0,0 +1,11 @@
+import { Component } from "@odoo/owl";
+import { PieChart } from "./pie-chart";
+
+export class PieChartCard extends Component {
+    static template = "awesome_dashboard.pie-chart-card";
+    static props = {
+        title: String,
+        value: { type: Object, values: Number },
+    };
+    static components = { PieChart };
+}

awesome_dashboard/static/src/pie-chart/pie-chart-card.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.pie-chart-card">
+        <div class="card-body">
+            <h5 class="card-title" style="text-align: center;"><t t-esc="props.title"/></h5>
+            <br/>
+            <PieChart data="props.value"/>
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/pie-chart/pie-chart.js

@@ -0,0 +1,50 @@
+import { Component, onWillStart, onWillUnmount, onMounted, useRef, onWillUpdateProps } from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+import { DashboardItem } from "../dashboard-item/dashboard-item";
+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.pie-chart";
+    static components = { DashboardItem };
+    static props = {
+        data: { type: Object, values: Number },
+    }
+
+    setup() {
+        this.canvasRef = useRef("canvas");
+        this.chart = null;
+
+        onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js"));
+        onMounted(this.renderChart);
+        onWillUpdateProps(this.updateChart);
+        onWillUnmount(this.destroyChart);
+    }
+
+    renderChart() {
+        this.destroyChart();
+
+        const labels = Object.keys(this.props.data);
+        const datapoints = Object.values(this.props.data);
+        this.chart = new Chart(this.canvasRef.el, {
+            type: "doughnut",
+            data: {
+                labels: labels,
+                datasets: [{ data: datapoints }],
+            },
+        });
+    }
+
+    updateChart(newProps) {
+        if (this.chart) {
+            const datapoints = Object.values(newProps.data);
+            Object.assign(this.chart.data.datasets[0], { data: datapoints });
+            this.chart.update();
+        }
+    }
+
+    destroyChart() {
+        if (this.chart) {
+            this.chart.destroy();
+            this.chart = null;
+        }
+    }
+}

awesome_dashboard/static/src/pie-chart/pie-chart.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.pie-chart">
+        <canvas t-ref="canvas"/>
+    </t>
+
+</templates>

awesome_dashboard/static/src/statistics-service.js

@@ -0,0 +1,23 @@
+import { registry } from "@web/core/registry";
+import { rpc } from "@web/core/network/rpc";
+import { reactive } from "@odoo/owl";
+
+export const statisticsService = {
+    start() {
+        let statistics = reactive({ isReady: false });
+        async function loadStatistics() {
+            Object.assign(statistics, await rpc("/awesome_dashboard/statistics"), { isReady: true });
+        }
+
+        // Refresh every 10 seconds for testing
+        //const interval = 10000;
+        // Refresh every 10 minutes for real
+        const interval = 600000;
+
+        setInterval(loadStatistics, interval);
+        loadStatistics();
+        return statistics;
+    },
+};
+
+registry.category("services").add("awesome_dashboard.statistics", statisticsService);

awesome_owl/static/src/card/card.js

@@ -0,0 +1,17 @@
+import { useState, Component } 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({ visible: true });
+    }
+
+    toggleVisible() {
+        this.state.visible = !this.state.visible;
+    }
+}

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"/>
+                    <span class="fa" t-att-class="{'fa-angle-down': state.visible, 'fa-angle-up': !state.visible}" t-on-click="toggleVisible"/>
+                </h5>
+                <t t-if="state.visible" t-slot="default"/>
+            </div>
+        </div>
+    </t>
+
+</templates>

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,22 @@
+import { useState, Component } 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: 1 });
+    }
+
+    increment() {
+        this.state.value++;
+        if (this.props.onChange) {
+            this.props.onChange();
+        }
+    }
+}

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">
+        <p>Counter: <t t-esc="state.value"/></p>
+        <button type="button" class="btn btn-primary" t-on-click="increment">Increment</button>
+    </t>
+
+</templates>

awesome_owl/static/src/playground.js

@@ -1,5 +1,20 @@
-import { Component } from "@odoo/owl";
+import { markup, useState, Component } 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 };
+
+    setup() {
+        this.state = useState({ sum: 2 });
+    }
+
+    incrementSum() {
+        this.state.sum++;
+    }
+
+    someHtmlEscaped = "<div class='text-primary'>My content</div>";
+    someHtml = markup("<div class='text-primary'>My content</div>");
 }