luleg - Technical Training - Creation of the Real Estate Module

awesome_dashboard/static/src/dashboard/core/statistics_service.js

@@ -0,0 +1,20 @@
+import { memoize } from "@web/core/utils/functions";
+import { registry } from "@web/core/registry";
+import { rpc } from "@web/core/network/rpc";
+import { reactive } from "@odoo/owl";
+
+export const statistics = {
+    async start() {
+        const data = reactive({loadStatistics: memoize(() => rpc("/awesome_dashboard/statistics"))})
+
+        setInterval(async () => {
+            data.loadStatistics = memoize(() => rpc("/awesome_dashboard/statistics"));
+        }, 1_000*10)
+
+        return {
+            data: data
+        }
+    }
+}
+
+registry.category("services").add("statistics", statistics)

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,60 @@
+import { Component, onWillStart, useEffect, 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/dashboardItem";
+import { PieChart } from "./pie_chart/pieChart"
+import { DashboardDialog } from "./dashboard_dialog/dashboardDialog";
+
+class AwesomeDashboard extends Component {
+    static template = "awesome_dashboard.AwesomeDashboard";
+
+    static components = { Layout, DashboardItem, PieChart };
+
+    setup() {
+        this.items = registry.category("awesome_dashboard").getAll();
+        this.hidden = useState({value: JSON.parse(localStorage.getItem("awesome_dashboard/hidden_items")) || []});
+
+        this.action = useService("action");
+        this.dialog = useService("dialog");
+        const statistics = useService("statistics");
+
+        const statisticsData = useState(statistics.data);
+
+
+        const updateData = (async (loadStatistics) => {
+            this.result = await loadStatistics()
+        }).bind(this)
+
+        onWillStart(async () => {
+            await updateData(statisticsData.loadStatistics)
+        })
+
+        useEffect((loadStatistics) => {
+            updateData(loadStatistics)
+        }, () => [statisticsData.loadStatistics])
+    }
+    openCustomers() {
+        this.action.doAction("base.action_partner_form");
+    }
+
+    openLeads(){
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            views: [[false, "list"], [false, 'form']],
+            res_model: "crm.lead",
+        })
+    }
+
+    openDialog() {
+        this.dialog.add(DashboardDialog, {
+            hidden: this.hidden.value,
+            save: ((hidden) => {
+                this.hidden.value = hidden;
+                localStorage.setItem("awesome_dashboard/hidden_items", JSON.stringify(hidden));
+            }).bind(this)
+        })
+    }
+}
+
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard/dashboard.scss

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

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -0,0 +1,28 @@
+<?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="control-panel-create-button">
+                <button class="btn btn-primary" t-on-click.stop.prevent="() => this.openCustomers()">
+                    Customers
+                </button>
+                <button class="btn btn-primary" t-on-click.stop.prevent="() => this.openLeads()">
+                    Leads
+                </button>
+            </t>
+            <t t-set-slot="control-panel-additional-actions">
+                <button class="bg-transparent border-transparent" t-on-click="openDialog">
+                    <i class="fa fa-gear"/>
+                </button>
+            </t>
+            <div>
+                <t t-foreach="items" t-as="item" t-key="item.id" t-if="!hidden.value.includes(item.id)">
+                    <DashboardItem size="item.size || 1">
+                        <t t-set="itemProp" t-value="item.props ? item.props(result) : {'data': result}"/>
+                        <t t-component="item.Component" t-props="itemProp" />
+                    </DashboardItem>
+                </t>
+            </div>
+        </Layout>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/dashboard_dialog/dashboardDialog.js

@@ -0,0 +1,45 @@
+import { Component } from "@odoo/owl";
+import { _t } from "@web/core/l10n/translation";
+import { useChildRef } from "@web/core/utils/hooks";
+import { registry } from "@web/core/registry";
+import { Dialog } from "@web/core/dialog/dialog";
+
+export class DashboardDialog extends Component {
+    static template = "awesome_dashboard.DashboardDialog"
+    static components = {
+        Dialog
+    }
+    static props = {
+        hidden: {type: Array, element: String},
+        save: Function,
+        close: Function
+    }
+
+    setup(){
+        this.disabled = this.props.hidden;
+        //this.disabled = JSON.parse(localStorage.getItem("awesome_dashboard/hidden_items")) || [];
+
+        this.items = registry.category("awesome_dashboard").getAll();
+
+        this.size = "lg";
+        this.title = _t("Dashboard Items Configuration");
+        this.modalRef = useChildRef();
+    }
+
+    changeChoices(event){
+        const id = event.target.attributes.tag.nodeValue;
+        const value = event.target.checked;
+
+        this.disabled = this.disabled.filter((val) => val !== id);
+
+        if (!value) {
+            this.disabled.push(id);
+        }
+    }
+
+    close(){
+        this.props.save(this.disabled);
+        //localStorage.setItem("awesome_dashboard/hidden_items", JSON.stringify(this.disabled));
+        this.props.close();
+    }
+}

awesome_dashboard/static/src/dashboard/dashboard_dialog/dashboardDialog.xml

@@ -0,0 +1,18 @@
+<templates id="template" xml:space="preserve">
+<t t-name="awesome_dashboard.DashboardDialog">
+    <Dialog
+        size="size"
+        title="title"
+        modalRef="modalRef">
+        <p>Which cards do you wish to see ?</p>
+        <t t-foreach="items" t-as="item" t-key="item.id">
+            <span style="display:block; margin:5px">
+                <input t-att-tag="item.id" t-on-input="changeChoices" t-att-checked="!disabled.includes(item.id)" style="margin-right:5px" type="checkbox" /> <t t-esc="item.props ? item.props({}).title : item.id"/>
+            </span>
+        </t>
+        <t t-set-slot="footer">
+            <button class="btn btn-primary" t-on-click="close">Done</button>
+        </t>
+    </Dialog>
+</t>
+</templates>

awesome_dashboard/static/src/dashboard/dashboard_item/dashboardItem.js

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

awesome_dashboard/static/src/dashboard/dashboard_item/dashboardItem.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 d-inline-block m-2" 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/dashboard_items.js

@@ -0,0 +1,58 @@
+import { NumberCard } from "./numberCard/numberCard";
+import { PieChartCard } from "./pieChartCard/pieChartCard";
+import { registry } from "@web/core/registry";
+
+
+export const items = [{
+    id: "average_quantity",
+    Component: NumberCard,
+    size: 1.2,
+    props: (data) => ({
+        title: "Average amount of t-shirt by order this month",
+        value: data.average_quantity
+    })
+}, {
+    id: "average_time",
+    Component: NumberCard,
+    size: 2,
+    props: (data) => ({
+        title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+        value: data.average_time
+    })
+}, {
+    id: "nb_new_orders",
+    Component: NumberCard,
+    props: (data) => ({
+        title: "Number of new orders this month",
+        value: data.nb_new_orders
+    })
+}, {
+    id: "nb_cancelled_orders",
+    Component: NumberCard,
+    props: (data) => ({
+        title: "Number of cancelled orders this month",
+        value: data.nb_cancelled_orders
+    })
+}, {
+    id: "total_amount",
+    Component: NumberCard,
+    props: (data) => ({
+        title: "Total amount of new orders this month",
+        value: data.total_amount
+    })
+}, {
+    id: "orders_by_size",
+    Component: PieChartCard,
+    size: 2.5,
+    props: (data) => ({
+        title: "Shirt orders by size",
+        data: data.orders_by_size ? Object.entries(data.orders_by_size).map(([key, value]) => ({
+            label: key, 
+            value: value
+        })) : []
+    })
+}]
+
+for (const item of items){
+    registry.category("awesome_dashboard").add(item.id, item)
+}

awesome_dashboard/static/src/dashboard/numberCard/numberCard.js

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

awesome_dashboard/static/src/dashboard/numberCard/numberCard.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.NumberCard">
+        <span style="text-align: center; display:block;"><t t-esc="props.title"/></span>
+        <span style="color: green; font-size:30px; text-align: center; display:block;"><t t-esc="props.value"/></span>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/pieChartCard/pieChartCard.js

@@ -0,0 +1,17 @@
+import { Component } from "@odoo/owl";
+import { PieChart } from "../pie_chart/pieChart";
+
+export class PieChartCard extends Component {
+    static template = "awesome_dashboard.PieChartCard";
+
+    static components = { PieChart };
+
+    static props = {
+        title: { type: String },
+        data: {
+            type: Array, element: {
+                type: Object, shape: {label: String, value: Number }
+            }
+        },
+    };
+}

awesome_dashboard/static/src/dashboard/pieChartCard/pieChartCard.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.PieChartCard">
+        <span style="text-align: center; display:block;"><t t-esc="props.title"/></span>
+        <span style="margin: auto; display:block; width:50%">
+            <PieChart label="props.title" data="props.data" />
+        </span>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/pie_chart/pieChart.js

@@ -0,0 +1,52 @@
+import { Component, onWillUnmount, useEffect, useRef, onWillStart } from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.PieChart";
+
+    static props = {
+        label: {type: String, optional: true},
+        data: { type: Array, element:{
+            type: Object, shape: {label: String, value: Number }
+        } },
+    };
+
+    setup() {
+        this.canvasRef = useRef("canvas");
+
+        this.chart = null;
+
+        onWillStart(() => loadJS(["/web/static/lib/Chart/Chart.js"]));
+
+        useEffect(() => this.renderChart());
+        onWillUnmount(this.onWillUnmount);
+    }
+
+    onWillUnmount() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+    }
+
+    getChartConfig() {
+        return {
+            type: "doughnut",
+            data: {
+                datasets: [{
+                    data: this.props.data.map((element) => element.value),
+                    label: this.props.label
+                }],
+                labels: this.props.data.map((element) => element.label),
+            }
+
+        }
+    }
+
+    renderChart() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+        const config = this.getChartConfig();
+        this.chart = new Chart(this.canvasRef.el, config);
+    }
+}

awesome_dashboard/static/src/dashboard.xml → awesome_dashboard/static/src/dashboard/pie_chart/pieChart.xml

@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
-
-    <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+    <t t-name="awesome_dashboard.PieChart">
+        <canvas t-ref="canvas" />
     </t>
-
 </templates>