18.0 webframework lecan

awesome_dashboard/__manifest__.py

@@ -3,16 +3,16 @@
     'name': "Awesome Dashboard",
 
     'summary': """
-        Starting module for "Discover the JS framework, chapter 2: Build a dashboard"
+        Companion addon for the Odoo JS Framework Training
     """,
 
     'description': """
-        Starting module for "Discover the JS framework, chapter 2: Build a dashboard"
+        Companion addon for the Odoo JS Framework Training
     """,
 
     'author': "Odoo",
     'website': "https://www.odoo.com/",
-    'category': 'Tutorials/AwesomeDashboard',
+    'category': 'Tutorials',
     'version': '0.1',
     'application': True,
     'installable': True,
@@ -25,6 +25,9 @@
         'web.assets_backend': [
             'awesome_dashboard/static/src/**/*',
         ],
+        'awesome_dashboard.dashboard': [
+            'awesome_dashboard/static/src/dashboard/**/*',
+        ],
     },
     'license': 'AGPL-3'
 }

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,31 @@
+import { Component, useState } 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";
+import { PieChart } from "./piechart";
+
+class AwesomeDashboard extends Component {
+    static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout, DashboardItem, PieChart };
+
+    setup() {
+        this.action = useService("action");
+        this.statistics = useState(useService("awesome_dashboard.statistics"));
+    }
+
+    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("lazy_components").add("awesome_dashboard.dashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard/dashboard.scss

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

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.AwesomeDashboard">
+        <Layout display="{ controlPanel: {} } " className="'o_dashboard h-100'">
+            <t t-set-slot="layout-buttons">
+                <button class="btn btn-primary m-3" t-on-click="openCustomerView">Customers</button>
+                <button class="btn btn-primary m-3" t-on-click="openLeads">Leads</button>
+            </t>
+            <div class="d-flex" t-if="statistics.debounce">
+                <DashboardItem>
+                    Number of new orders this month :
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="statistics.nb_new_orders"/>
+                    </div>
+                </DashboardItem>
+                <DashboardItem>
+                    Total amount of new orders this month :
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="statistics.total_amount"/>
+                    </div>
+                </DashboardItem>
+                <DashboardItem>
+                    Average amount of t-shirt by order this month :
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="statistics.average_quantity"/>
+                    </div>
+                </DashboardItem>
+                <DashboardItem>
+                    Number of cancelled orders this month :
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="statistics.nb_cancelled_orders"/>
+                    </div>
+                </DashboardItem>
+                <DashboardItem>
+                    Average time for an order to go from 'new' to 'sent' or 'cancelled':
+                    <div class="fs-1 fw-bold text-success text-center">
+                        <t t-esc="statistics.average_time"/>
+                    </div>
+                </DashboardItem>
+
+                <div class="d-flex">
+                    <DashboardItem>
+                        <PieChart data="statistics['orders_by_size']" label="'Shirt orders by size'"/>                
+                    </DashboardItem>
+                </div>
+            </div>
+        </Layout>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/dashboard_item.js

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

awesome_dashboard/static/src/dashboard/dashboard_item.xml

@@ -0,0 +1,12 @@
+<?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>

awesome_dashboard/static/src/dashboard/piechart.js

@@ -0,0 +1,39 @@
+import { loadJS } from "@web/core/assets";
+import { Component, onWillStart, useRef, useEffect, onWillUnmount } from "@odoo/owl";
+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.PieChart";
+    static props = {
+        label: String,
+        data: Object,
+    };
+
+    setup() {
+        this.canvasRef = useRef("canvas");
+        onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js"));
+        useEffect(() => {
+            if (this.chart) { this.chart.destroy();} 
+            this.displayChart();
+        });
+        onWillUnmount(() => {
+            this.chart.destroy();
+        });
+    }
+
+    displayChart() {
+        const labels = Object.keys(this.props.data);
+        const data = Object.values(this.props.data);
+        this.chart = new Chart(this.canvasRef.el, {
+            type: "pie",
+            data: {
+                labels: labels,
+                datasets: [
+                    {
+                        label: this.props.label,
+                        data: data,
+                    },
+                ],
+            },
+        });
+    }
+}

awesome_dashboard/static/src/dashboard/piechart.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.PieChart">
+        <div t-att-class="'h-100 ' + props.class" t-ref="root">
+            <div class="h-100 position-relative" t-ref="container">
+                <canvas t-ref="canvas" />
+            </div>
+        </div>
+    </t>
+</templates>

awesome_dashboard/static/src/statistics.js

@@ -0,0 +1,21 @@
+import { registry } from "@web/core/registry";
+import { rpc } from "@web/core/network/rpc";
+import { reactive } from "@odoo/owl";
+
+const statisticService = {
+    start() {
+        const statistics = reactive({debounce: false});
+
+        async function loadStatistics() {
+            const updates = await rpc("/awesome_dashboard/statistics");
+            Object.assign(statistics, updates, {debounce: true});
+        }
+
+        setInterval(loadStatistics, 5 * 1000);
+        loadStatistics();
+
+        return statistics;
+    }
+};
+
+registry.category("services").add("awesome_dashboard.statistics", statisticService);

awesome_owl/static/src/card/card.js

@@ -0,0 +1,30 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+    static props = { 
+        title: String,
+        slots: {
+            type: Object,
+            shape: {
+                default: true
+            },
+            optional: true,
+        } 
+    };
+
+    setup() {
+        this.state = useState({
+            open: true,
+            title: this.props.title,
+        });
+    }
+
+    increment() {
+        this.state.value++;
+    }
+
+    toggleOpen() {
+        this.state.open = !this.state.open;
+    }
+}

awesome_owl/static/src/card/card.xml

@@ -0,0 +1,14 @@
+<?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;">
+            <button class="btn btn-info" t-on-click="toggleOpen">Toggle</button>
+            <div class="card-body">
+                <h5 class="card-title"><t t-out="state.title"/></h5>
+                <p class="card-text">
+                    <t t-slot="default" t-if="state.open"/>
+                </p>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,18 @@
+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.state = useState({ value: 0 });
+    }
+
+    increment() {
+        this.state.value++;
+        if (this.props.onChange) {
+            console.log("Incrementing, new value:", this.state.value);
+            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 class="btn btn-primary" t-on-click="increment">Increment</button>
+    </t> 
+
+</templates>

awesome_owl/static/src/playground.js

@@ -1,7 +1,21 @@
-/** @odoo-module **/
-
-import { Component } from "@odoo/owl";
+import { Component, useState, markup } 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 });
+        this.incrementSum = this.incrementSum.bind(this);
+    }
+
+    fst_value = markup("<strong>fst</strong>");
+    snd_value = "<em>snd</em>";
+
+    incrementSum() {
+        this.state.sum++;
+    }
 }

awesome_owl/static/src/playground.xml

@@ -2,9 +2,18 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
+        <Counter onChange.bind="incrementSum"/>
+        <Counter onChange.bind="incrementSum"/>
+        <h1>Sum: <t t-esc="state.sum"/></h1>
+        <div>
+            <Card title="'cardfirst'">
+                <Counter onChange.bind="incrementSum"/> 
+            </Card>
+            <Card title="'cardsecond'"/>
+        </div>
+        <div>
+            <TodoList/>
         </div>
     </t>
-
+   
 </templates>

awesome_owl/static/src/todo/todo-item.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.todoItem">
+        <div class="form-check">
+            <t t-set="todo" t-value="props.todo"/>
+            <input class="form-check-input" type="checkbox" t-att-id="todo.id" t-att-checked="todo.isCompleted" t-on-change="toggle"/>
+            <label t-att-for="todo.id" t-att-class="todo.isCompleted ? 'text-decoration-line-through text-muted' : '' ">
+                <t t-esc="todo.id"/>.
+                <t t-esc="todo.description"/>
+            </label>
+            <span role="button" class="fa fa-remove ms-3 text-danger" t-on-click="remove"/>
+        </div>
+    </t>
+</templates>