vijan - Technical Training

.gitignore

@@ -53,7 +53,6 @@ coverage.xml
 
 # Translations
 *.mo
-*.pot
 
 # Django stuff:
 *.log

awesome_dashboard/__manifest__.py

@@ -24,7 +24,11 @@
     'assets': {
         'web.assets_backend': [
             'awesome_dashboard/static/src/**/*',
+            ('remove', 'awesome_dashboard/static/src/dashboard/**/**'),
         ],
+        'awesome_dashboard.dashboard': [
+            'awesome_dashboard/static/src/dashboard/**/**'
+        ]
     },
     'license': 'AGPL-3'
 }

awesome_dashboard/static/src/dashboard/ChartCard/ChartCard.js

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

awesome_dashboard/static/src/dashboard/ChartCard/ChartCard.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.ChartCard">
+        <h2 class="card-text o_text"> <t t-esc="props.title"></t></h2>
+        <PieChart data="props.data" label="props.label"/>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/DashboardItem/DashboardItem.js

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

awesome_dashboard/static/src/dashboard/DashboardItem/DashboardItem.xml

@@ -0,0 +1,8 @@
+<?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}}px'>
+            <t t-slot="default" class="card-text"/>
+        </div>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/NumberCard/NumberCard.js

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

awesome_dashboard/static/src/dashboard/NumberCard/NumberCard.xml

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

awesome_dashboard/static/src/dashboard/PieChart/PieChart.js

@@ -0,0 +1,89 @@
+import { loadJS } from "@web/core/assets";
+import { useService } from "@web/core/utils/hooks";
+import { Component, onWillStart, useRef,onMounted,onPatched,onWillUnmount} from "@odoo/owl";
+
+export class PieChart extends Component 
+{
+    static template = "awesome_dashboard.PieChart"
+    static props = {
+        label : String,
+        data : {type : Object, optional: true},
+    }
+    setup()
+    {
+        this.canvasRef = useRef("canvas");
+        this.action = useService("action");
+        onWillStart(()=> loadJS("/web/static/lib/Chart/Chart.js"))
+
+        onMounted(()=> {this.renderChart();});
+
+        onPatched(() =>{
+            this.chart.destroy();
+            this.renderChart();
+        });
+
+        onWillUnmount(()=> {this.chart.destroy();});
+    }
+
+    renderChart()
+    {
+        this.chart = new Chart(this.canvasRef.el,
+            {
+                type: 'doughnut',
+                data:{
+                    labels:Object.keys(this.props.data),
+                    datasets: [
+                        {
+                            data: Object.values(this.props.data),
+                            label: this.props.label
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    onClick: (e) =>{
+                        const activePoints = this.chart.getElementsAtEventForMode(e, 'nearest', {
+                        intersect: true
+                    }, false);
+                    if (activePoints.length > 0) {
+                        const index = activePoints[0].index;
+                        const label = this.chart.data.labels[index];
+                        const value = this.chart.data.datasets[0].data[index];
+                        this.onClick(label)
+                    }
+                    }
+                    // events: ['click'],
+                },
+                // plugins: [{
+                //     id: 'custome_plugin',
+                //     afterEvent(chart, args, pluginOptions)
+                //     { 
+                //         // this.onClick(chart.tooltip.title)
+                //         console.log(args);
+                //         import { useService } from "@web/core/utils/hooks";
+                //         this.action = useService("action");
+                //         // this.action.doAction(({
+                //         //     type: 'ir.actions.act_window',
+                //         //     name: "All leads",
+                //         //     res_model: 'account.move',
+                //         //     views: [[0,'list'],[1,'form']]
+                //         // }));
+                //     }
+                // }]
+
+            });
+
+    }
+    onClick(title)
+    {
+        this.action.doAction(({
+            type: 'ir.actions.act_window',
+            name: "Sales Order",
+            res_model: 'sale.order',
+            //domain: [["order_line.product_id.name", "=", "Shirt"]],
+            domain: [["order_line.product_id.product_template_variant_value_ids.product_attribute_value_id.display_name", "=", title]],
+            views: [[0,'list'],[1,'form']]
+        }));
+    }
+
+}

awesome_dashboard/static/src/dashboard/PieChart/PieChart.xml

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

awesome_dashboard/static/src/dashboard/SettingsDialog/SettingsDialog.js

@@ -0,0 +1,38 @@
+import { Component, useState} from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+import { registry }  from "@web/core/registry";
+import { browser } from "@web/core/browser/browser";
+import {CheckBox} from "@web/core/checkbox/checkbox";
+
+export class SettingsDialog extends Component
+{
+    static template = "awesome_dashboard.SettingsDialog";
+    static components = {Dialog, CheckBox}
+    static props = ['close','disabled','items','OnChange'];
+
+    setup()
+    {
+        console.log(this.props.disabled);
+        this.items = useState(this.props.items.map((item) =>
+            {
+                return {
+                    ...item,
+                    enabled: !this.props.disabled.includes(item.id),
+                }
+            }))
+    }
+    done()
+    {
+        this.props.close();
+    }
+    onChange(state, item)
+    {
+        item.enabled = state;
+        const updateDisabled = Object.values(this.items).filter(
+            (item) => !item.enabled
+        ).map((item) => item.id)
+
+        browser.localStorage.setItem("disabledDashboardItems",updateDisabled);
+        this.props.OnChange(updateDisabled);
+    }
+}

awesome_dashboard/static/src/dashboard/SettingsDialog/SettingsDialog.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.SettingsDialog">
+        <Dialog title="Settings">
+
+            <t t-foreach="items" t-as="item" t-key="item.id">
+                <div>
+                    <CheckBox value="item.enabled" onChange="(ev) =>this.onChange(ev,item)">
+                        <t t-esc="item.description"/>
+                    </CheckBox>
+                </div>
+            </t>
+            <t t-set-solt="footer">
+                <button class="btn btn-primary" t-on-click="done">Done</button>
+            </t>
+        </Dialog>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,55 @@
+import {_t } from "@web/core/l10n/translation";
+import { Component, onWillStart, 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 "./DashboardItem/DashboardItem";
+import { PieChart } from "./PieChart/PieChart";
+import { SettingsDialog } from "./SettingsDialog/SettingsDialog";
+import { browser } from "@web/core/browser/browser";
+
+class AwesomeDashboard extends Component {
+    static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout , DashboardItem, PieChart};
+
+    setup()
+    {
+        this.action = useService("action");
+        this.result = useState(useService("awesome_dashboard.statistics"));
+        this.items = registry.category("awesome_dashboard").getAll();
+        this.dialog = useService("dialog");
+        this.state = useState({disabledItems : browser.localStorage.getItem("disabledDashboardItems")?.split(",")||[]});
+        this.Customer = _t("Customer");
+        this.Leads = _t("Leads");
+
+    }
+    openCustomers()
+    {
+        this.action.doAction("base.action_partner_form")
+    }
+    openLeads()
+    {
+        this.action.doAction(({
+            type: 'ir.actions.act_window',
+            name: "All leads",
+            res_model: 'account.move',
+            views: [[0,'list'],[1,'form']]
+        }));
+    }
+    openSettings()
+    {
+        this.dialog.add(SettingsDialog, {
+            disabled:this.state.disabledItems,
+            items:this.items,
+            OnChange:this.updateSettings.bind(this),
+        })
+    }
+    updateSettings(disabledItems)
+    {
+        this.state.disabledItems = disabledItems;
+    }
+}
+
+
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);
+

awesome_dashboard/static/src/dashboard/dashboard.scss

@@ -0,0 +1,11 @@
+.o_dashboard{
+    background-color: rgb(255, 209, 122);
+
+}
+.o_text{
+    align-self: center;
+}
+.o_settings_text
+{
+    padding-left: 15px;
+}

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -0,0 +1,29 @@
+<?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"> 
+                <div class="d-flex flex-warp">
+                    <button class="btn btn-primary" t-on-click="openCustomers"><t t-esc="Customer"/></button>
+                    <button class="btn btn-primary" t-on-click="openLeads"><t t-esc="Leads"/></button>
+                </div>
+            </t>
+            <t t-set-slot="control-panel-additional-actions">
+                <button class="btn p-2 ms-1 boarder-0" t-on-click="openSettings">
+                        <i class="fa fa-gear fa-solid"/>
+                </button>
+            </t>
+            <div class="flex-d flex-warp">
+               <t t-foreach="items" t-as="item" t-key="item.id">
+                    <DashboardItem t-if="!state.disabledItems.includes(item.id)" size="item.size || 10">
+                        <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>