18.0 gato tutorials

awesome_dashboard/static/src/dashboard/card/card.js

@@ -0,0 +1,15 @@
+import { Component } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = 'card.card';
+    static props = {
+        size: {type: 'Number', optional: 'true',},
+        slots: {type: 'Object', optional: 'true',},
+        debug: {type: 'Function', optional: 'true',},
+    }
+
+    setup() {
+        this.size = this.props.size ? this.props.size : 1;
+        if (this.props.debug) { this.props.debug(this); }
+    }
+}

awesome_dashboard/static/src/dashboard/card/card.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="card.card">
+        <div t-attf-style='background-color: darkgrey;border-radius: 2em;border-style: solid;border-color: grey; border-thickness: 2px;width: {{18 * size}}rem;display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 1em;padding: 1em;'>
+            <t t-slot="default"/>
+        </div>
+
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,88 @@
+/** @odoo-module **/
+
+import { Component, onWillStart, onWillUnmount, useState, onWillRender } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
+import { useService } from "@web/core/utils/hooks";
+import { Card } from "./card/card";
+import { PieCard } from "./pie_card/pie_card";
+import { NumberCard } from "./number_card/number_card";
+import { PieChart } from "./piechart/piechart";
+
+class AwesomeDashboard extends Component {
+    static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout, Card, PieCard, NumberCard, PieChart };
+
+    setup() {
+        this.testData = registry.category('awesome_dashboard.data').get('graphs').map((elt) => JSON.stringify(elt));
+
+        this.state = useState({numbers: null, graphs: null, data: null, happygary: 'ᕦ( ᐛ )ᕡ'});
+
+        this.onStatsUpdate = (vals) => {
+            this.state.data = vals;
+        }
+
+        this.dance = () => {
+            this.state.happygary = this.state.happygary == 'ᕦ( ᐛ )ᕡ' ? 'ᕕ( ᐕ )ᕗ' : 'ᕦ( ᐛ )ᕡ'
+            setTimeout(() => {this.dance();}, 700)
+        }
+
+        this.dance();
+
+        this.action = useService('action');
+
+        this.statsService = useService('awesome_dashboard.stats');
+
+
+        onWillStart(async () => {
+            this.statsService.setActive(this.onStatsUpdate);
+            this.state.data = await this.statsService.getValues();
+        });
+
+        onWillUnmount(() => {this.statsService.clearActive()});
+
+        onWillRender(() => {
+            const numbers = registry.category('awesome_dashboard.data').get('numbers');
+            const directValues = numbers.filter((elt) => elt.source == null);
+            const loadedValues = numbers.filter((elt) => elt.source).map((elt) => {
+                elt.value = this.state.data[elt.source];
+                return elt;
+            });
+
+            this.state.numbers = [
+                ...loadedValues,
+                ...directValues,
+            ].map((elt) => JSON.stringify(elt));
+
+            const graphs = registry.category('awesome_dashboard.data').get('graphs');
+            const directCharts = graphs.filter((elt) => elt.source == null);
+            const loadedCharts = graphs.filter((elt) => elt.source).map((elt) => {
+                elt.data = this.state.data[elt.source];
+                return elt;
+            });
+
+            this.state.graphs = [
+                ...loadedCharts,
+                ...directCharts,
+            ].map((elt) => JSON.stringify(elt));
+        });
+
+    }
+
+    customersButton() {
+        this.action.doAction('base.action_partner_form');
+    }
+
+    leadsButton() {
+        this.action.doAction({
+            type: 'ir.actions.act_window',
+            name: 'Leads',
+            target: 'current',
+            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: deepskyblue;
+}

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.AwesomeDashboard">
+        <Layout className="'o_dashboard h-100'" display="props.display">
+            <button class="btn btn-primary" t-on-click="customersButton">Customers</button>
+            <button class="btn btn-primary" t-on-click="leadsButton">Leads</button>
+            <h1 style='margin: 2em;'><t t-esc="state.happygary"/></h1>
+            <t t-foreach="state.numbers" t-as="item" t-key="item">
+                <NumberCard stringProps="item"/>
+            </t>
+            <t t-foreach="state.graphs" t-as="item" t-key="item">
+                <PieCard stringProps="item"/>
+            </t>
+        </Layout>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/liste.js

@@ -0,0 +1,63 @@
+import { registry } from "@web/core/registry";
+
+
+const numbers = [
+    {
+        title: 'Some title.',
+        value: 103,
+    },
+    {
+        title: 'Some other title.',
+        value: 418,
+    },
+    {
+        title: 'Average Quantity',
+        source: 'average_quantity',
+    },
+    {
+        title: 'Average Time',
+        source: 'average_time',
+    },
+    {
+        title: 'Number of Cancelled Orders',
+        source: 'nb_cancelled_orders',
+    },
+    {
+        title: 'Number of New Orders',
+        source: 'nb_new_orders',
+    },
+    {
+        title: 'Total Amount',
+        source: 'total_amount',
+    },
+];
+
+registry.category('awesome_dashboard.data').add('numbers', numbers);
+
+const graphs = [
+    {
+        id: 'graph1',
+        title: 'An graph.',
+        data: {
+            value1: 9,
+            value2: 3,
+            value3: 9,
+        },
+    },
+    {
+        id: 'graph2',
+        title: 'Another graph.',
+        data: {
+            'Jean-Eud le Tacos Vegan': 1536,
+            'Bérénice la Saucisse Créatrice': 32,
+            'Monsieur Puel Monsieur': 3,
+        },
+    },
+    {
+        id: 'shirt_size_pie',
+        title: 'T-Shirt Sales by Size',
+        source: 'orders_by_size',
+    },
+];
+
+registry.category('awesome_dashboard.data').add('graphs', graphs);

awesome_dashboard/static/src/dashboard/number_card/number_card.js

@@ -0,0 +1,27 @@
+import { Component } from "@odoo/owl";
+import { Card } from "../card/card";
+
+
+export class NumberCard extends Component {
+    static template = 'number_card.number_card';
+    static components = { Card };
+    static props = {
+        title: {type: 'String', optional: 'true',},
+        value: {type: 'Number', optional: 'true',},
+        size: {type: 'Number', optional: 'true',},
+        stringProps: {type: 'String', optional: 'true',},
+
+    }
+    setup() {
+        if (this.props.stringProps) {
+            this.stringProps = JSON.parse(this.props.stringProps);
+            this.title = this.stringProps.title ? this.stringProps.title : 'No Title.';
+            this.value = this.stringProps.value ? this.stringProps.value : 0;
+            this.size = this.stringProps.size;
+        } else {
+            this.title = this.props.title ? this.props.title : 'No Title.';
+            this.value = this.props.value ? this.props.value : 0;
+            this.size = this.props.size;
+        }
+    }
+}

awesome_dashboard/static/src/dashboard/number_card/number_card.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="number_card.number_card">
+        <Card size="size">
+            <h3><t t-esc="title"/></h3>
+            <h2 style="color: lightgreen;"><t t-esc="value"/></h2>
+        </Card>	
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/pie_card/pie_card.js

@@ -0,0 +1,102 @@
+import { Component, onMounted, useState, onWillRender, markup } from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+import { Card } from "../card/card";
+
+export class PieCard extends Component {
+    static template = 'pie_card.pie_card';
+    static components = { Card };
+    static props = {
+        title: {type: 'String', optional: 'true',},
+        data: {type: 'Object', optional: 'true',},
+        size: {type: 'Number', optional: 'true',},
+        id: {type: 'String', optional: 'true',},
+        stringProps: {type: 'String', optional: 'true',},
+    };
+
+    setup() {
+        if (this.props.stringProps) {
+            this.stringProps = JSON.parse(this.props.stringProps);
+
+            this.id = this.stringProps.id ? this.stringProps.id : 'piechart'
+
+            this.data = this.stringProps.data ? this.stringProps.data : {'no data.': 1};
+
+            this.size = this.stringProps.size;
+
+            this.title = this.stringProps.title;
+        } else {
+            this.id = this.props.id ? this.props.id : 'piechart'
+
+            this.data = this.props.data ? this.props.data : {'no data.': 1};
+
+            this.size = this.props.size;
+
+            this.title = this.props.title;
+        }
+
+
+
+
+        this.state = useState({data: null});
+
+        this.chart = null;
+
+
+        this.canvas = markup(`
+            <canvas id="${this.id}">
+            </canvas>
+        `);
+        this.render = async () => {
+
+            this.context = document.getElementById(this.id);
+            if (this.context == null || this.context == undefined) {
+                return;
+            }
+
+
+            const chartJS = await loadJS("/web/static/lib/Chart/Chart.js");
+
+            const config = {
+                type: 'pie',
+                data: {
+                    labels: Object.keys(this.data),
+                    datasets: [
+                        {
+                            label: 'ds1',
+                            data: Object.values(this.data),
+                        }
+                    ],
+                },
+                options: {
+                    responsive: true,
+                },
+            };
+
+            const tempChart = Chart.getChart(this.context);
+            if (tempChart) tempChart.destroy();
+
+            this.chart = new Chart(this.context, config);
+
+        }
+
+
+        onWillRender(() => {
+            this.render();
+        });
+
+        onMounted(() => {
+            this.render();
+            /*
+            // epilepsy mode
+            this.context.onmousemove = () => {
+                const hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
+                const genHex = () => `${hex[Math.floor(Math.random() * 16)]}${hex[Math.floor(Math.random() * 16)]}`
+                const genColor = () => `#${genHex()}${genHex()}${genHex()}`
+                this.context.style.backgroundColor = genColor();
+            }
+            */
+        });
+
+
+    }
+}