[IMP] awesome_dashboard: Tutorial chapter 2: items 1-10

awesome_dashboard/__manifest__.py

@@ -22,6 +22,9 @@
         'views/views.xml',
     ],
     'assets': {
+        'awesome_dashboard.components': [
+            'awesome_dashboard/static/src/components/*',
+        ],
         'web.assets_backend': [
             'awesome_dashboard/static/src/**/*',
         ],

awesome_dashboard/static/src/components/dashboard.js

@@ -0,0 +1,36 @@
+/** @odoo-module **/
+
+import { Component, useState, onWillStart } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
+import { useService } from "@web/core/utils/hooks";
+import { AwesomeDashboardItem } from "./dashboard_item"
+
+class AwesomeDashboard extends Component {
+    static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout, AwesomeDashboardItem}
+    setup(){
+        this.action = useService("action");
+        /** Previous implementation: leaving here for tutorial review purposes **/
+        /** this.statistics = useService("awesome_dashboard.statistics");
+        this.data = useState({ });
+        onWillStart(async () => {
+            this.data = await this.statistics();
+        }); **/
+        this.data = useState(useService("awesome_dashboard.statistics"));
+        this.dashboardItems = registry.category("awesome_dashboard").getAll();
+    }
+    openCustomerView(){
+        this.action.doAction("base.action_partner_form");
+    }
+    openLeadsViews() {
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            res_model: "crm.lead",
+            views: [[false, "list"], [false, "form"]],
+            target: 'current',
+        });
+    }
+}
+
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/components/dashboard.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.AwesomeDashboard">
+        <Layout className="'o_dashboard h-100'" display="{controlPanel: {} }">
+            <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="openLeadsViews">Leads</button>
+            </t>
+            <!-- Previous implementation: leaving for tutorial review purposes -->
+            <!-- t t-foreach="data" t-as="item" t-key="item">
+                <div t-if="item != 'orders_by_size'">
+                    <AwesomeDashboardItem size="2">
+                        <t t-set-slot="title">
+                            <span t-esc="item"/>
+                        </t>
+                        <t t-esc="item_value"/>
+                    </AwesomeDashboardItem> 
+                </div>
+            </t-->
+            <t t-foreach="dashboardItems" t-as="item" t-key="item.id">
+                <AwesomeDashboardItem size="item.size || 1">
+                    <t t-set="itemProp" t-value="item.props ? item.props(data) : {'data': data}"/>
+                    <t t-component="item.Component" t-props="itemProp"/>
+                </AwesomeDashboardItem>
+            </t>
+        </Layout>
+    </t>
+
+</templates>

awesome_dashboard/static/src/components/dashboard_item.js

@@ -0,0 +1,17 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class AwesomeDashboardItem extends Component {
+    static template = "awesome_dashboard.dashboard_item";
+    static props = {
+        size: {
+            type: Number,
+            optional: true,
+        },
+        slots: {
+            type: Object,
+            optional: true,
+        },
+    }
+}

awesome_dashboard/static/src/components/dashboard_item.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboard_item">
+        <div class="card" t-attf-style="width: {{18*props.size}}rem;">
+            <div class="card-body">
+                <h5 class="card-title"><t t-slot="title"/></h5>
+                <p class="card-text">
+                    <t t-slot="default"/>
+                </p>
+            </div>
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/components/dashboard_item_list.js

@@ -0,0 +1,66 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { AwesomeDashboardNumberCard } from "./dashboard_number_card"
+import { AwesomeDashboardPieChart } from "./dashboard_pie_chart"
+
+const dashboardItems = [
+    {
+        id: "average_quantity",
+        description: "Average quantity of t-shirts",
+        Component: AwesomeDashboardNumberCard,
+        props: (data) => ({
+            title: "Average quantity of t-shirts by order this month",
+            value: data.average_quantity,
+        })
+    },
+    {
+        id: "average_time",
+        description: "Average time for an order",
+        Component: AwesomeDashboardNumberCard,
+        props: (data) => ({
+            title: "Average time for an order to be processed",
+            value: data.average_time,
+        })
+    },
+    {
+        id: "nb_new_orders",
+        description: "Number of new orders",
+        Component: AwesomeDashboardNumberCard,
+        props: (data) => ({
+            title: "Number of new orders, this month",
+            value: data.nb_new_orders,
+        })
+    },
+    {
+        id: "nb_cancelled_orders",
+        description: "Number of cancelled orders",
+        Component: AwesomeDashboardNumberCard,
+        props: (data) => ({
+            title: "Number of cancelled orders, this month",
+            value: data.nb_cancelled_orders,
+        })
+    },
+    {
+        id: "total_amount",
+        description: "Total amount of orders",
+        Component: AwesomeDashboardNumberCard,
+        props: (data) => ({
+            title: "Total amount of orders, this month",
+            value: data.total_amount,
+        })
+    },
+    {
+        id: "orders_by_size",
+        description: "Shirt orders",
+        Component: AwesomeDashboardPieChart,
+        props: (data) => ({
+            title: "Shirt orders, by size",
+            data: data.orders_by_size,
+        })
+    }
+]
+
+dashboardItems.forEach(item => {
+    registry.category("awesome_dashboard").add(item.id, item);
+});

awesome_dashboard/static/src/components/dashboard_number_card.js

@@ -0,0 +1,11 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class AwesomeDashboardNumberCard extends Component {
+    static template = "awesome_dashboard.dashboard_number_card";
+    static props = {
+        title: { type: String, },
+        value: { type: Number, }
+    }
+}

awesome_dashboard/static/src/components/dashboard_number_card.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboard_number_card">
+        <div>
+            <h5><t t-esc="props.title"/></h5>
+            <div>
+                <t t-esc="props.value"/>
+            </div>
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/components/dashboard_pie_chart.js

@@ -0,0 +1,41 @@
+/** @odoo-module **/
+
+import { Component, onWillStart, onWillUnmount, useEffect, useRef } from "@odoo/owl";
+import { loadJS } from '@web/core/assets';
+
+export class AwesomeDashboardPieChart extends Component {
+    static template = "awesome_dashboard.dashboard_pie_chart";
+    static props = {
+        title:  { type: String, },
+        data: { type: Object, }
+    }
+    setup(){
+        this.chart = null;
+        this.canvasRef = useRef("canvas");
+        onWillStart(async() => {
+            await loadJS("/web/static/lib/Chart/Chart.js");
+        });
+        useEffect(() => this.renderChart(this.props.data));
+        onWillUnmount(this.onWillUnmount);
+    }
+    renderChart(data){
+        if (this.chart) {
+            this.chart.destroy();
+        }
+        this.chart = new Chart(this.canvasRef.el, {
+            type: 'pie',
+            data: {
+                labels: Object.keys(data),
+                datasets: [{
+                    label: 'Shirts sold by size',
+                    data: Object.values(data),
+                }]
+            }
+        });
+    }
+    onWillUnmount(){
+        if (this.chart) {
+            this.chart.destroy();
+        }
+    }
+}

awesome_dashboard/static/src/components/dashboard_pie_chart.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboard_pie_chart">
+        <div>
+            <h5><t t-esc="props.title"/></h5>
+            <div>
+                <canvas t-ref="canvas" />
+            </div>
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard_action.js

@@ -0,0 +1,12 @@
+/** @odoo-module **/
+
+import { Component, xml } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { LazyComponent } from "@web/core/assets";
+
+class AwesomeDashboardAction extends Component {
+    static components = { LazyComponent };
+    static template = xml`<LazyComponent bundle="'awesome_dashboard.components'" Component="'AwesomeDashboard'" props="props"/>`;
+}
+
+registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboardAction);

awesome_dashboard/static/src/scss/dashboard.css

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

awesome_dashboard/static/src/service_statistics.js

@@ -0,0 +1,20 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { rpc } from "@web/core/network/rpc";
+import { reactive } from "@odoo/owl";
+
+const serviceStatistics = {
+    start(){
+        const statistics = reactive({ });
+        async function statisticsLoad() {
+            const result = await rpc("/awesome_dashboard/statistics");
+            Object.assign(statistics, result);
+        }
+        setInterval(statisticsLoad, 10000); /** Timout set to 10 seconds for testing **/
+        statisticsLoad();
+        return statistics;
+    }
+}
+
+registry.category("services").add("awesome_dashboard.statistics", serviceStatistics);