jucop - Technical Training 19.0

awesome_dashboard/__init__.py

@@ -1,3 +1,4 @@
 # -*- coding: utf-8 -*-
 
 from . import controllers
+from . import models

awesome_dashboard/__manifest__.py

@@ -17,13 +17,19 @@
     'application': True,
     'installable': True,
     'depends': ['base', 'web', 'mail', 'crm'],
-
     'data': [
-        'views/views.xml',
+        'security/ir.model.access.csv',
+        'views/awesome_dashboard_dashboard_views.xml',
+        'views/awesome_dashboard_dashboard_item_views.xml',
+        'views/awesome_dashboard_views.xml',
     ],
     'assets': {
         'web.assets_backend': [
             'awesome_dashboard/static/src/**/*',
+            ('remove', 'awesome_dashboard/static/src/dashboard/**/*'),
+        ],
+        'awesome_dashboard.assets_dashboard': [
+            'awesome_dashboard/static/src/dashboard/**/*',
         ],
     },
     'license': 'AGPL-3'

awesome_dashboard/models/__init__.py

@@ -0,0 +1 @@
+from . import dashboard_item

awesome_dashboard/models/dashboard_item.py

@@ -0,0 +1,50 @@
+from odoo import models, fields, api
+
+
+class DashboardItem(models.Model):
+    _name = 'awesome_dashboard.dashboard.item'
+    _description = "Dashboard Item"
+
+    code = fields.Char(string="Code", required=True)
+    property = fields.Selection(
+        string="Property",
+        required=True,
+        selection=[
+            ('average_quantity', "average_quantity"),
+            ('average_time', "average_time"),
+            ('nb_cancelled_orders', "nb_cancelled_orders"),
+            ('nb_new_orders', "nb_new_orders"),
+            ('orders_by_size', "orders_by_size"),
+            ('total_amount', "total_amount"),
+        ]
+    )
+    size = fields.Integer(string="Size", default=1)
+    name = fields.Char(string="Name", required=True, translate=True)
+    description = fields.Text(string="Description", required=True, translate=True)
+    component_type = fields.Selection(
+        string="Component Type",
+        required=True,
+        selection=[
+            ('number_card', "Number"),
+            ('pie_chart_chart', "PieChart"),
+        ]
+    )
+    sequence = fields.Integer(string="Sequence", default=1)
+    user_id = fields.Many2one(comodel_name='res.users', string="User", required=True, default=lambda self: self.env.user)
+
+    _code_user_unique_idx = models.UniqueIndex(
+        '(code, user_id)',
+        "The code and user must be unique."
+    )
+
+    @api.model
+    def get_by_current_user(self):
+        return self.search_read([('user_id', '=', self.env.user.id)], [
+            'code',
+            'property',
+            'size',
+            'name',
+            'description',
+            'component_type',
+            'sequence',
+        ], order='sequence ASC')

awesome_dashboard/security/ir.model.access.csv

@@ -0,0 +1,2 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+access_awesome_dashboard_dashboard_item,access_awesome_dashboard_dashboard_item_user,model_awesome_dashboard_dashboard_item,base.group_user,1,1,1,1

awesome_dashboard/static/src/dashboard/components/dashboard_configuration_dialog/dashboard_configuration_dialog.js

@@ -0,0 +1,44 @@
+import {Component, useState} from "@odoo/owl";
+import {Dialog} from "@web/core/dialog/dialog";
+import {registry} from "@web/core/registry";
+import {getDashboardStorageKey} from "../../dashboard_utility";
+
+export class DashboardConfigurationDialog extends Component {
+    static template = "awesome_dashboard.DashboardConfigurationDialog";
+    static components = {
+        Dialog,
+    }
+    static props = {
+        close: Function,
+    }
+
+    setup() {
+        super.setup();
+
+        const values = [];
+
+        for (const item of registry.category("awesome_dashboard").getAll()) {
+            values.push({id: item.id, description: item.description, visible: localStorage.getItem(getDashboardStorageKey(item.id)) === "true"});
+        }
+
+        this.state = useState({
+            values,
+        });
+    }
+
+    onCheckboxChange(value_id, event) {
+        this.state.values.find(x => x.id === value_id).visible = event.target.checked;
+    }
+
+    async onConfirm() {
+        for (const value of this.state.values) {
+            localStorage.setItem(getDashboardStorageKey(value.id), value.visible);
+        }
+
+        this.props.close();
+    }
+
+    onDiscard() {
+        this.props.close();
+    }
+}

awesome_dashboard/static/src/dashboard/components/dashboard_configuration_dialog/dashboard_configuration_dialog.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.DashboardConfigurationDialog">
+        <Dialog title="'Dashboard items configuration'" size="'md'">
+            <fieldset>
+                <legend>Which cards do you wish to see ?</legend>
+
+                <t t-foreach="this.state.values" t-as="value" t-key="value.id">
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" t-att-checked="value.visible" t-att-id="value.id" t-on-change="onCheckboxChange.bind(this, value.id)"/>
+                        <label class="form-check-label" t-att-for="value.id" t-esc="value.description">
+                        </label>
+                    </div>
+                </t>
+            </fieldset>
+
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="onConfirm">Confirm</button>
+                <button class="btn btn-secondary" t-on-click="onDiscard">Discard</button>
+            </t>
+        </Dialog>
+    </t>
+</templates>

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

@@ -0,0 +1,22 @@
+import {Component} from "@odoo/owl";
+
+export class DashboardItem extends Component {
+    static template = "awesome_dashboard.DashboardItem";
+
+    static defaultProps = {
+        size: 1,
+    }
+
+    static props = {
+        size: {type: Number, optional: true},
+        slots: {optional: true},
+    }
+
+    get size() {
+        if (this.env.isSmall) {
+            return '100%';
+        }
+
+        return `${this.props.size * 18}rem`;
+    }
+}

awesome_dashboard/static/src/dashboard/components/dashboard_item/dashboard_item.scss

@@ -0,0 +1,20 @@
+.o_dashboard-item {
+  background-color: #fff;
+  border: 1px solid black;
+  color: black;
+  padding: 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .o_dashboard-item-title {
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .o_dashboard-item-count {
+    font-weight: bold;
+    font-size: 30px;
+    color: darkgreen;
+  }
+}

awesome_dashboard/static/src/dashboard/components/dashboard_item/dashboard_item.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.DashboardItem">
+        <div class="o_dashboard-item" t-attf-style="width: {{this.size}}">
+            <t t-if="this.props.slots.title">
+                <div class="o_dashboard-item-title">
+                    <t t-slot="title"></t>
+                </div>
+            </t>
+
+            <t t-if="this.props.slots.count">
+                <div class="o_dashboard-item-count">
+                    <t t-slot="count"></t>
+                </div>
+            </t>
+
+            <t t-slot="default"></t>
+        </div>
+    </t>
+</templates>

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

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

awesome_dashboard/static/src/dashboard/components/number_card/number_card.scss

@@ -0,0 +1,20 @@
+.o_number-card {
+  text-align: center;
+
+  p {
+    padding: 0;
+    margin: 0;
+  }
+
+  .o_title {
+    font-weight: bold;
+    font-size: 1.25rem;
+    color: black;
+  }
+
+  .o_value {
+    font-weight: bold;
+    font-size: 2rem;
+    color: darkgreen;
+  }
+}

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

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.NumberCard">
+        <div class="o_number-card">
+            <p class="o_title" t-esc="props.title"></p>
+            <p class="o_value" t-esc="props.value"></p>
+        </div>
+    </t>
+</templates>

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

@@ -0,0 +1,83 @@
+import {Component, onMounted, onWillStart, onWillUnmount, onWillUpdateProps, useRef} from "@odoo/owl";
+import {loadJS} from "@web/core/assets";
+import {useService} from "@web/core/utils/hooks";
+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.PieChart";
+
+    static props = {
+        data: Object,
+        onClick: {type: Function, optional: true},
+    }
+
+    setup() {
+        super.setup();
+
+        this.canvasRef = useRef("chartCanvas");
+        this.action = useService("action");
+
+        this.chart = null;
+
+        onWillStart(async () => {
+            await loadJS(["/web/static/lib/Chart/Chart.js"]);
+        });
+
+        onMounted(() => {
+            if (this.chart) {
+                this.chart.destroy();
+            }
+
+            this.chart = new Chart(this.canvasRef.el, this._getChartConfig());
+        })
+
+        onWillUpdateProps(nextProps => {
+            this.chart.data.labels = [...Object.keys(nextProps.data)];
+            this.chart.data.datasets.forEach((dataset) => {
+                dataset.data = Object.values(nextProps.data);
+            });
+
+            this.chart.update();
+        });
+
+        onWillUnmount(this.onWillUnmount);
+    }
+
+    onWillUnmount() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+    }
+
+    _getChartConfig() {
+        return {
+            type: 'pie',
+            data: {
+                labels: [...Object.keys(this.props.data)],
+                datasets: [{
+                    data: Object.values(this.props.data),
+                    backgroundColor: [
+                        'yellow', 'salmon', 'green',
+                    ],
+                    borderWidth: 1,
+                    hoverOffset: 4,
+                }]
+            },
+            options: {
+                events: ['click'],
+            },
+            plugins: [{
+               id: 'customEventCatcher',
+               beforeEvent: (chart, args) => {
+                   if (args?.event.type === 'click') {
+                       const [activeElement] = chart.getElementsAtEventForMode(args.event, 'nearest', {intersect: true}, true);
+                       const index = activeElement.index;
+
+                       if (this.props.onClick) {
+                           this.props.onClick(this.action, Object.keys(this.props.data)[index]);
+                       }
+                   }
+                }
+            }],
+        }
+    }
+}

awesome_dashboard/static/src/dashboard/components/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.PieChart">
+        <div>
+            <canvas t-ref="chartCanvas"></canvas>
+        </div>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/components/pie_chart_card/pie_chart_card.js

@@ -0,0 +1,14 @@
+import {Component} from "@odoo/owl";
+import {PieChart} from "../pie_chart/pie_chart";
+
+export class PieChartCard extends Component {
+    static template = "awesome_dashboard.PieChartCard";
+    static components = {
+        PieChart,
+    }
+    static props = {
+        title: String,
+        data: Object,
+        onClick: {type: Function, optional: true},
+    }
+}