[ADD] discover the web framework

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/card/number_card.js

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

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

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.NumberCard">
+      <div class="text-center">
+          <div t-esc="props.title"/>
+          <div t-esc="props.value" class="h1 fw-bold text-success m-0 mt-1"/>
+      </div>
+    </t>
+
+</templates>

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

@@ -0,0 +1,92 @@
+/** @odoo-module **/
+
+import {Component, onMounted, onWillStart, onWillUnmount, onWillUpdateProps, useRef} from "@odoo/owl";
+import {loadJS} from "@web/core/assets";
+
+
+export class PieCard extends Component {
+    static template = "awesome_dashboard.PieCard";
+
+    static props = {
+        title: {type: String},
+        value: {type: Object},
+    }
+
+    setup() {
+        this.canvasRef = useRef("canvas");
+
+        onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js"));
+
+        onMounted(() => {
+            this.renderChart();
+        });
+
+        onWillUpdateProps(() => {
+            // Refresh the chart whenever the props are updated
+            this.renderChart();
+        });
+
+        onWillUnmount(() => {
+            if (this.chart) {
+                this.chart.destroy();
+            }
+        });
+
+    }
+
+    renderChart() {
+
+        if (this.chart) {
+            this.chart.destroy();
+        }
+
+        const labels = Object.keys(this.props.value);
+        const colors = labels.map((label, idx) => {
+            return this.getColor(idx)
+        })
+
+        const config = {
+            type: "pie",
+            data: {
+                labels: labels,
+                datasets: [
+                    {
+                        label: this.props.title,
+                        data: Object.values(this.props.value),
+                        backgroundColor: colors,
+                    },
+                ],
+            },
+        }
+        this.chart = new Chart(this.canvasRef.el, config);
+    }
+
+    getColor(index) {
+        return COLORS[index % COLORS.length];
+    }
+
+}
+
+export const COLORS = [
+    "#1f77b4",
+    "#ff7f0e",
+    "#aec7e8",
+    "#ffbb78",
+    "#2ca02c",
+    "#98df8a",
+    "#d62728",
+    "#ff9896",
+    "#9467bd",
+    "#c5b0d5",
+    "#8c564b",
+    "#c49c94",
+    "#e377c2",
+    "#f7b6d2",
+    "#7f7f7f",
+    "#c7c7c7",
+    "#bcbd22",
+    "#dbdb8d",
+    "#17becf",
+    "#9edae5",
+];
+

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

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.PieCard">
+      <div class="text-center">
+          <div t-esc="props.title"/>
+          <canvas t-ref="canvas"/>
+      </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,93 @@
+/** @odoo-module **/
+
+import {Component, useState, toRaw} from "@odoo/owl";
+import {registry} from "@web/core/registry";
+import {Layout} from "@web/search/layout";
+import {useService} from "@web/core/utils/hooks";
+import {_t} from "@web/core/l10n/translation";
+import {Dialog} from "@web/core/dialog/dialog";
+import {CheckBox} from "@web/core/checkbox/checkbox";
+import {browser} from "@web/core/browser/browser";
+import {DashboardItem} from "./dashboard_item";
+import {NumberCard} from "./card/number_card";
+import {PieCard} from "./card/pie_card";
+
+const DISABLED_STORAGE_KEY = "awesome_dashboard.disabledItems"
+
+export class AwesomeDashboard extends Component {
+    static template = "awesome_dashboard.AwesomeDashboard";
+    static components = {Layout, DashboardItem, NumberCard, PieCard};
+
+    setup() {
+        this.action = useService("action");
+        this.items = registry.category("awesome_dashboard_items").getAll();
+        this.statistics = useState(useService("awesome_dashboard.statistics"));
+        this.dialogService = useService("dialog");
+
+        const storedDisabledItems = browser.localStorage.getItem(DISABLED_STORAGE_KEY)
+        this.state = useState({disabledItems: storedDisabledItems ? JSON.parse(storedDisabledItems) : []})
+    }
+
+    openCustomers() {
+        this.action.doAction("base.action_partner_form");
+    }
+
+    openLeads() {
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            name: _t("All leads"),
+            res_model: "crm.lead",
+            views: [
+                [false, "list"],
+                [false, "form"],
+            ],
+        });
+    }
+
+    openSettings() {
+        this.dialogService.add(SettingDialog, {
+            items: this.items,
+            disabledItems: this.state.disabledItems,
+            onUpdateSettings: this.updateSettings.bind(this),
+        })
+    }
+
+    updateSettings(disabledItems) {
+        browser.localStorage.setItem(DISABLED_STORAGE_KEY, JSON.stringify(disabledItems));
+        this.state.disabledItems = disabledItems;
+    }
+}
+
+
+class SettingDialog extends Component {
+
+    static template = "awesome_dashboard.SettingDialog";
+    static components = {Dialog, CheckBox};
+
+    static props = {
+        items: {type: Array},
+        disabledItems: {type: Array},
+        onUpdateSettings: {type: Function},
+    }
+
+    setup() {
+        const items = this.props.items.map(item => ({
+            ...item,
+            disabled: this.props.disabledItems.includes(item.id),
+        }));
+        this.items = useState(items);
+        this.onCheckBoxChange = this.onCheckBoxChange.bind(this);
+    }
+
+    onCheckBoxChange(item) {
+        item.disabled = !item.disabled;
+    }
+
+    onDone() {
+        const disabledItems = this.items.filter(item => item.disabled).map(item => item.id);
+        this.props.onUpdateSettings(disabledItems);
+        this.props.close();
+    }
+}
+
+registry.category("lazy_components").add("AwesomeDashboard", 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,39 @@
+<?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 t-on-click="openCustomers" type="button" class="btn btn-primary" title="Customers">Customers</button>
+                  <button t-on-click="openLeads" type="button" class="btn btn-primary" title="Leads">Leads</button>
+            </t>
+              <t t-set-slot="control-panel-additional-actions">
+                <button t-on-click="openSettings" class="btn p-0 border-0">
+                    <i class="fa fa-cog"></i>
+                </button>
+            </t>
+            <div class="d-flex flex-wrap">
+                <t t-foreach="items" t-as="item" t-key="item.id" t-if="!state.disabledItems.includes(item.id)">
+                    <DashboardItem size="item.size" >
+                        <t t-component="item.Component" t-props="item.props(statistics.data)"/>
+                    </DashboardItem>
+                </t>
+            </div>
+        </Layout>
+    </t>
+
+    <t t-name="awesome_dashboard.SettingDialog">
+        <Dialog title="'Dashboard items configuration'">
+            <div class="mb-2">Which cards would you like to see?</div>
+            <t t-foreach="items" t-as="item" t-key="item.id">
+                <CheckBox value="!item.disabled" onChange="()=>onCheckBoxChange(item)" >
+                    <t t-esc="item.description"/>
+                </CheckBox>
+            </t>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="onDone">Done</button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/dashboard_item.js

@@ -0,0 +1,24 @@
+/** @odoo-module **/
+
+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,
+    };
+
+    setup() {
+
+    }
+
+}
+
+

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 border-dark m-2" t-attf-style="width:{{(18 * props.size)}}rem">
+          <div class="card-body">
+           <t t-slot="default"/>
+          </div>
+      </div>
+    </t>
+
+</templates>