[ADD] Discover Web Framework (mojem)

awesome_dashboard/controllers/controllers.py

@@ -2,6 +2,7 @@
 
 import logging
 import random
+import json
 
 from odoo import http
 from odoo.http import request
@@ -34,3 +35,24 @@ def get_statistics(self):
             'total_amount': random.randint(100, 1000)
         }
 
+    @http.route('/awesome_dashboard/config/get', type='json', auth='user')
+    def get_config(self):
+        key = f"awesome_dashboard.removed_items.user_{request.env.user.id}"
+        value = request.env['ir.config_parameter'].sudo().get_param(key)
+        removed = []
+        if value:
+            try:
+                data = json.loads(value)
+                if isinstance(data, list):
+                    removed = data
+            except Exception:
+                removed = []
+        return {"removed": removed}
+
+    @http.route('/awesome_dashboard/config/set', type='json', auth='user')
+    def set_config(self, removed=None):
+        key = f"awesome_dashboard.removed_items.user_{request.env.user.id}"
+        if not isinstance(removed, list):
+            removed = []
+        request.env['ir.config_parameter'].sudo().set_param(key, json.dumps(removed))
+        return {"ok": True}

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

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

awesome_dashboard/static/src/dashboard/cards/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 text-center">
+            <h6 class="mb-2"><t t-out="props.title"/></h6>
+            <div class="fs-4 fw-bold text-success"><t t-out="props.value"/></div>
+        </div>
+    </t>
+</templates>

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

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

awesome_dashboard/static/src/dashboard/cards/pie_chart_card.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.PieChartCard">
+        <div class="o_pie_card w-100 h-100">
+            <h6 class="text-center mb-2"><t t-out="props.title"/></h6>
+            <PieChart data="props.data" onSliceClick="props.onSliceClick"/>
+        </div>
+    </t>
+</templates>

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

@@ -0,0 +1,35 @@
+/** @odoo-module **/
+
+import { Component, onMounted, onWillStart, onWillUnmount, useRef } from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.PieChart";
+    static props = { data: Object, onSliceClick: { type: Function, optional: true } };
+
+    setup() {
+        const ref = this.canvasRef = useRef("canvas");
+        let chart, handler;
+
+        onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js"));
+
+        onMounted(() => {
+            const entries = Object.entries(this.props.data);
+            chart = new window.Chart(ref.el.getContext("2d"), {
+                type: "pie",
+                data: {
+                    labels: entries.map(([k]) => k),
+                    datasets: [{ data: entries.map(([, v]) => v), backgroundColor: ["red", "green", "blue"] }]
+                }
+            });
+
+            handler = e => {
+                const a = chart.getElementAtEvent?.(e) || chart.getElementsAtEventForMode?.(e, "nearest", { intersect: true }, true);
+                if (a?.length) this.props.onSliceClick?.(chart.data.labels[a[0]._index ?? a[0].index], a[0]._index ?? a[0].index);
+            };
+            ref.el.addEventListener("click", handler);
+        });
+
+        onWillUnmount(() => ref.el?.removeEventListener("click", handler));
+    }
+}

awesome_dashboard/static/src/dashboard/charts/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 class="o_pie_chart w-100 h-100 d-flex align-items-center justify-content-center">
+            <canvas t-ref="canvas" style="max-width: 100%; max-height: 100%;"></canvas>
+        </div>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,93 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+import { Layout } from "@web/search/layout";
+import { DashboardItem } from "./dashboard_item/dashboard_item";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { DashboardSettingsDialog } from "./settings/settings_dialog";
+import { rpc } from "@web/core/network/rpc";
+import { _t } from "@web/core/l10n/translation";
+import "./statistics/statistics_service";
+import "./dashboard_items";
+
+class AwesomeDashboard extends Component {
+    static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout, DashboardItem };
+
+    setup() {
+        const stats = this.statisticsService = useService("awesome_dashboard.statistics");
+        this.statistics = useState(stats.statistics);
+        this.action = useService("action");
+        this.dialog = useService("dialog");
+        this.allItems = registry.category("awesome_dashboard").getAll();
+
+        const LS_KEY = "awesome_dashboard.removed_items";
+        let removed;
+        try { removed = JSON.parse(localStorage.getItem(LS_KEY) || "[]"); } catch { removed = []; }
+        this.config = useState({ removed });
+
+        this.loadServerConfig();
+        window.awesomeDash = this;
+    }
+
+    get items() {
+        const removed = new Set(this.config.removed || []);
+        return this.allItems.filter(it => !removed.has(it.id));
+    }
+
+    openSettings() {
+        (this.env?.services?.dialog || this.dialog).add(DashboardSettingsDialog, {
+            items: this.allItems,
+            removedIds: this.config.removed,
+            title: _t("Dashboard items configuration"),
+            introLabel: _t("Which cards do you wish to see ?"),
+            applyLabel: _t("Apply"),
+            onApply: removed => {
+                this.config.removed = removed;
+                try { localStorage.setItem("awesome_dashboard.removed_items", JSON.stringify(removed)); } catch {}
+                this.saveServerConfig(removed);
+            },
+        });
+    }
+
+    async loadServerConfig() {
+        try {
+            const data = await rpc("/awesome_dashboard/config/get");
+            if (Array.isArray(data?.removed)) this.config.removed = data.removed;
+        } catch {}
+    }
+
+    async saveServerConfig(removed) {
+        try { await rpc("/awesome_dashboard/config/set", { removed }); } catch {}
+    }
+
+    openOrdersBySize(label) {
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            name: _t("Orders: ") + label.toUpperCase(),
+            res_model: "sale.order",
+            views: [[false, "list"], [false, "form"]],
+            domain: ["|", "|",
+                ["name", "ilike", label],
+                ["origin", "ilike", label],
+                ["note", "ilike", label]
+            ],
+        });
+    }
+
+    openCustomer() {
+        this.action.doAction("base.action_partner_form");
+    }
+
+    openLeads() {
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            name: "All leads",
+            res_model: "crm.lead",
+            views: [[false, "list"], [false, "form"]],
+        });
+    }
+}
+
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard/dashboard.scss

@@ -0,0 +1,37 @@
+.o_dashboard {
+  background-color: gray;
+  height: auto;
+  min-height: 100%;
+  overflow-y: auto;
+}
+
+.o_dashboard_content {
+  gap: 0.5rem;
+  overflow-y: auto !important;
+  -webkit-overflow-scrolling: touch;
+  max-height: calc(100vh - 80px);
+}
+
+@media (max-width: 768px) {
+  .o_dashboard_content {
+    display: block;
+  }
+  .o_dashboard_item {
+    width: 100% !important;
+  }
+}
+
+.o_dashboard .o_content {
+  overflow-y: scroll !important;
+  -webkit-overflow-scrolling: touch;
+  min-height: 0;
+  height: auto;
+  max-height: none;
+  flex: 1 1 auto;
+}
+
+.o_dashboard .o_action {
+  min-height: 0 !important;
+  display: flex;
+  flex-direction: column;
+}

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.AwesomeDashboard">
+        <Layout className="'o_dashboard'" display="{ controlPanel: {} }">
+            <t t-set-slot="layout-buttons">
+                <button class="btn btn-primary" t-on-click="openCustomer">Open Customer</button>
+                <button class="btn btn-primary" t-on-click="openLeads">Open Leads</button>
+                <button class="btn btn-secondary" title="Settings" t-on-click="openSettings">
+                    <i class="fa fa-cog"/>
+                </button>
+            </t>
+            <div class="o_dashboard_content p-3 d-flex flex-wrap">
+                <t t-foreach="items" t-as="item" t-key="item.id">
+                    <DashboardItem size="item.size || 1">
+                        <t t-set="itemProp" t-value="item.props ? item.props(statistics) : {'data': statistics}"/>
+                        <t t-if="item.id === 'orders_by_size'">
+                            <t t-set="itemProp" t-value="Object.assign({}, itemProp, { onSliceClick: openOrdersBySize })"/>
+                        </t>
+                        <t t-component="item.Component" t-props="itemProp" />
+                    </DashboardItem>
+                </t>
+            </div>
+        </Layout>
+    </t>
+
+</templates>

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

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

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

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.DashboardItem">
+        <div class="card m-2 border-dark o_dashboard_item" t-attf-style="width: {{18*props.size}}rem;">
+            <div class="card-body">
+                <t t-if="props.title">
+                    <h5 class="card-title">
+                        <div class="text-center">
+                            <t t-out="props.title"/>
+                        </div>
+                    </h5>
+                </t>
+
+                <div class="o_dashboard_item_content">
+                    <t t-slot="default"/>
+                </div>
+
+            </div>
+        </div>
+    </t>
+
+</templates>