feraz - technical training - web framework

awesome_dashboard/__manifest__.py

@@ -23,7 +23,10 @@
     ],
     'assets': {
         'web.assets_backend': [
-            'awesome_dashboard/static/src/**/*',
+            'awesome_dashboard/static/src/dashboard_action.js',
+        ],
+        'awesome_dashboard.dashboard_bundle': [
+            'awesome_dashboard/static/src/dashboard/**/*'
         ],
     },
     'license': 'AGPL-3'

awesome_dashboard/static/src/dashboard/core/awesome_dashboard/statistics_service.js

@@ -0,0 +1,22 @@
+import { reactive } from "@odoo/owl";
+import { rpc } from "@web/core/network/rpc";
+import { registry } from "@web/core/registry";
+
+
+const statisticsService = {
+  start() {
+    const stats = reactive({});
+
+    async function loadStats() {
+      const stats_data = await rpc("/awesome_dashboard/statistics");
+      Object.assign(stats, stats_data);
+    }
+
+    loadStats();
+    setInterval(loadStats, 10000*60);
+
+    return stats;
+  },
+};
+
+registry.category("services").add("awesome_dashboard.statistics", statisticsService);

awesome_dashboard/static/src/dashboard/dashboard-item/dashboard-item.js

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

awesome_dashboard/static/src/dashboard/dashboard-item/dashboard-item.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboard_item">
+        <div class="card d-inline-block m-2" t-att-style="`width: ${18*props.size}rem`">
+            <div class="card-body">
+                <t t-slot="default"/>
+            </div>
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,55 @@
+import { Component, useState } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { Layout } from "@web/search/layout";
+import { DashboardItem } from "./dashboard-item/dashboard-item";
+import { SettingsDialog } from "./settings-dialog/settings-dialog";
+
+class AwesomeDashboard extends Component {
+  static template = "awesome_dashboard.AwesomeDashboard";
+  static components = { Layout, DashboardItem };
+  static props = [];
+
+  setup() {
+    this.action = useService("action");
+    const statisticsService = useService("awesome_dashboard.statistics");
+    this.dialog = useService('dialog');
+
+    this.statistics = useState(statisticsService);
+
+    this.state = useState({ items: this.getDisplayedItems() });
+
+  }
+
+  getDisplayedItems() {
+    const filtered_item_ids = localStorage.getItem("awesome_dashboard.displayed_items") ?? [];
+    return registry
+      .category("awesome_dashboard")
+      .getAll()
+      .filter((item) => !filtered_item_ids.includes(item.id));
+  }
+
+  reloadDashboard() {
+    this.state.items = this.getDisplayedItems();
+  }
+
+  openPartnerForm() {
+    this.action.doAction("base.action_partner_form");
+  }
+
+  openLeads() {
+    this.action.doAction({
+      type: 'ir.actions.act_window',
+      name: 'Leads',
+      res_model: 'crm.lead',
+      views: [[false, 'list'], [false, 'form']],
+    });
+  }
+
+  openSettingsDialog() {
+    this.dialog.add(SettingsDialog, {}, { onClose: () => this.reloadDashboard() });
+  }
+
+}
+
+registry.category("lazy_components").add("awesome_dashboard.dashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard/dashboard.scss

@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: palegoldenrod;
+}

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -0,0 +1,24 @@
+<?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="openPartnerForm" 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 class="btn" t-on-click="openSettingsDialog" title="Settings">
+                    <i class="fa fa-cog"/>
+                </button>
+            </t>
+            <t t-foreach="state.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-component="item.Component" t-props="itemProp" />
+               </DashboardItem>
+            </t>
+        </Layout>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/dashboard_items.js

@@ -0,0 +1,64 @@
+import { NumberCard } from "./number-card/number-card";
+import { PieChartCard } from "./pie-chart-card/pie-chart-card";
+import { registry } from "@web/core/registry";
+
+const items = [
+  {
+    id: "nb_new_orders",
+    description: "Number of new orders this month",
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Number of new orders this month",
+      value: data.nb_new_orders,
+    }),
+  },
+  {
+    id: "total_amount",
+    description: "Total amount of new orders this month",
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Total amount of new orders this month",
+      value: data.total_amount,
+    }),
+  },
+  {
+    id: "average_quantity",
+    description: "Average amount of t-shirt by order this month",
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Average amount of t-shirt by order this month",
+      value: data.average_quantity,
+    }),
+  },
+  {
+    id: "nb_cancelled_orders",
+    description: "Number of cancelled orders this month",
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Number of cancelled orders this month",
+      value: data.nb_cancelled_orders,
+    }),
+  },
+  {
+    id: "average_time",
+    description: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+      value: data.average_time,
+    }),
+  },
+  {
+    id: "orders_by_size",
+    description: "Orders by size",
+    Component: PieChartCard,
+    props: (data) => ({
+      title: "Orders by size",
+      data: data.orders_by_size,
+    }),
+  },
+];
+
+for (const item of items) {
+  registry.category("awesome_dashboard").add("awesome_dashboard." + item.id, item);
+}

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

@@ -0,0 +1,8 @@
+import { Component } from "@odoo/owl";
+import { DashboardItem } from "../dashboard-item/dashboard-item";
+
+export class NumberCard extends Component {
+  static template = "awesome_dashboard.number_card";
+  static props = ['title', 'value'];
+  static components = { DashboardItem };
+}

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

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.number_card">
+        <center>
+            <h5><t t-esc="props.title"/></h5>
+            <h3><t t-esc="props.value"/></h3>
+        </center>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/pie-chart-card/pie-chart-card.js

@@ -0,0 +1,9 @@
+import { Component } from "@odoo/owl";
+import { DashboardItem } from "../dashboard-item/dashboard-item";
+import { PieChart } from "../pie-chart/pie-chart";
+
+export class PieChartCard extends Component {
+  static template = "awesome_dashboard.pie_chart_card";
+  static props = ['title', 'data'];
+  static components = { DashboardItem, PieChart };
+}

awesome_dashboard/static/src/dashboard/pie-chart-card/pie-chart-card.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.pie_chart_card">
+        <h5><t t-esc="props.title"/></h5>
+        <PieChart data="props.data"/>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/pie-chart/pie-chart.js

@@ -0,0 +1,55 @@
+import { Component, onWillStart, useRef, useEffect } from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+
+export class PieChart extends Component {
+  static template = "awesome_dashboard.pie_chart"
+  static props = ['data']
+
+  setup() {
+    this.chart = null;
+    this.canvasRef = useRef("canvas");
+    this.title = "Shirt orders by size"
+    onWillStart(async () => loadJS('/web/static/lib/Chart/Chart.js'));
+
+    useEffect(() => {
+      this.renderChart();
+      return () => {
+        if (this.chart) {
+          this.chart.destroy();
+        }
+      };
+    });
+  }
+
+  renderChart() {
+    const labels = Object.keys(this.props.data);
+    const data = Object.values(this.props.data);
+    const config = {
+      type: "doughnut",
+      data: {
+        datasets: [
+          {
+            data: data,
+            backgroundColor: ["#1f77b4", "#dddddd"],
+          },
+        ],
+        labels: labels,
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: 5,
+        },
+        plugins: {
+          title: {
+            display: true,
+            text: this.title,
+            padding: 4,
+          },
+        },
+      },
+    };
+    this.chart = new Chart(this.canvasRef.el, config);
+  }
+}

awesome_dashboard/static/src/dashboard/pie-chart/pie-chart.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.pie_chart">
+        <div>
+            <canvas t-ref="canvas"/>
+            <span class="o_gauge_value position-absolute start-0 end-0 bottom-0 text-center">
+                Chart
+            </span>
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/settings-dialog/settings-dialog.js

@@ -0,0 +1,38 @@
+import { Component, useState } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog"
+import { registry } from "@web/core/registry";
+
+
+export class SettingsDialog extends Component {
+  static template = "awesome_dashboard.settings_dialog";
+  static props = ['close'];
+  static components = { Dialog };
+
+  setup() {
+    this.state = useState({ items: {} });
+
+    const items = registry.category("awesome_dashboard").getAll();
+
+    const filtered_ids = localStorage.getItem("awesome_dashboard.displayed_items") ?? [];
+
+    for (var i of items) {
+      this.state.items[i.id] = { display: !filtered_ids.includes(i.id), description: i.description };
+    }
+    this.toggleDisplay = this.toggleDisplay.bind(this);
+    this.onSave = this.onSave.bind(this);
+  }
+
+  toggleDisplay(id) {
+    this.state.items[id].display = !this.state.items[id].display;
+  }
+
+  onSave() {
+    const filtered_ids = Object.entries(this.state.items)
+      .filter(([id, item]) => !item.display)
+      .map(([id]) => id);
+
+    localStorage.setItem("awesome_dashboard.displayed_items", filtered_ids)
+    this.props.close();
+  }
+
+}

awesome_dashboard/static/src/dashboard/settings-dialog/settings-dialog.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.settings_dialog">
+        <Dialog title="'Dashboard items configuration'">
+            <t t-foreach="Object.entries(state.items)" t-as="entry" t-key="entry[0]">
+                <input
+                    type="checkbox"
+                    t-att-checked="entry[1].display"
+                    t-on-change="() => this.toggleDisplay(entry[0])"/>
+                <t t-esc="entry[1].description"/>
+                <br/>
+            </t>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="onSave">Done</button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>