Skip to content

Commit 5710343

Browse files
committed
[IMP] awesome_dashboard: enhanced awesome_dashboard module
Created a cached network calling using memoize, implemented a pie chart, added auto-fetching of data after an interval, incorporated lazy loading, and made the dashboard more dynamic and created a service for each item In the dashboard.
1 parent 0d4258d commit 5710343

File tree

16 files changed

+276
-98
lines changed

16 files changed

+276
-98
lines changed

awesome_dashboard/__manifest__.py

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
11
# -*- coding: utf-8 -*-
22
{
3-
'name': "Awesome Dashboard",
4-
5-
'summary': """
3+
"name": "Awesome Dashboard",
4+
"summary": """
65
Starting module for "Discover the JS framework, chapter 2: Build a dashboard"
76
""",
8-
9-
'description': """
7+
"description": """
108
Starting module for "Discover the JS framework, chapter 2: Build a dashboard"
119
""",
12-
13-
'author': "Odoo",
14-
'website': "https://www.odoo.com/",
15-
'category': 'Tutorials/AwesomeDashboard',
16-
'version': '0.1',
17-
'application': True,
18-
'installable': True,
19-
'depends': ['base', 'web', 'mail', 'crm'],
20-
21-
'data': [
22-
'views/views.xml',
10+
"author": "Odoo",
11+
"website": "https://www.odoo.com/",
12+
"category": "Tutorials/AwesomeDashboard",
13+
"version": "0.1",
14+
"application": True,
15+
"installable": True,
16+
"depends": ["base", "web", "mail", "crm"],
17+
"data": [
18+
"views/views.xml",
2319
],
24-
'assets': {
25-
'web.assets_backend': [
26-
'awesome_dashboard/static/src/**/*',
20+
"assets": {
21+
"web.assets_backend": [
22+
"awesome_dashboard/static/src/**/*",
23+
],
24+
"awesome_dashboard.dashboard": [
25+
"awesome_dashboard/static/src/dashboard/**/*",
2726
],
2827
},
29-
'license': 'AGPL-3'
28+
"license": "AGPL-3",
3029
}

awesome_dashboard/static/src/dashboard.xml

Lines changed: 0 additions & 69 deletions
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
/** @odoo-module **/
22

3-
import { Component, useState, onWillStart } from "@odoo/owl";
3+
import { Component, useState } from "@odoo/owl";
44
import { registry } from "@web/core/registry";
55
import { Layout } from "@web/search/layout";
66
import { useService } from "@web/core/utils/hooks";
77
import { DashboardItem } from "./dashboardItem/dashboarditem";
8-
import { rpc } from "@web/core/network/rpc";
8+
import { PieChart } from "./pieChart/piechart";
9+
910

1011
class AwesomeDashboard extends Component {
1112
static template = "awesome_dashboard.AwesomeDashboard";
1213

13-
static components = { Layout, DashboardItem };
14+
static components = { Layout, DashboardItem, PieChart };
1415

1516
setup() {
16-
this.action = useService("action");
17-
this.state = useState({ statistics: null });
17+
const dashboardItemsRegistry = registry.category("awesome_dashboard");
18+
this.items = dashboardItemsRegistry.getAll();
1819

19-
onWillStart(async () => {
20-
this.state.statistics = await rpc("/awesome_dashboard/statistics");
21-
});
20+
this.action = useService("action");
21+
this.statisticsService = useService("awesome_dashboard.statistics");
22+
this.state = useState({ statistics: this.statisticsService.statistics });
2223
}
2324

2425
openCustomerView() {
@@ -35,4 +36,4 @@ class AwesomeDashboard extends Component {
3536
}
3637
}
3738

38-
registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
39+
registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<templates xml:space="preserve">
3+
4+
<t t-name="awesome_dashboard.AwesomeDashboard">
5+
<Layout className="'o_dashboard h-100'" display="{controlPanel: {} }">
6+
<t t-set-slot="control-panel-create-button">
7+
<button type="button" class="btn btn-primary o-kanban-button-new" t-on-click="openCustomerView">Customer</button>
8+
<button type="button" class="btn btn-primary o-kanban-button-new" t-on-click="openLeadsView">Leads</button>
9+
</t>
10+
<div class="dashboard-items">
11+
<t t-foreach="this.items" t-as="item" t-key="item.id">
12+
<DashboardItem size="item.size || 1">
13+
<t t-set="itemProp" t-value="item.props ? item.props(this.state.statistics) : {'data': this.state.statistics}"/>
14+
<t t-component="item.Component" t-props="itemProp" />
15+
</DashboardItem>
16+
</t>
17+
</div>
18+
</Layout>
19+
</t>
20+
21+
</templates>

awesome_dashboard/static/src/dashboardItem/dashboarditem.js renamed to awesome_dashboard/static/src/dashboard/dashboardItem/dashboarditem.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { Component } from "@odoo/owl"
2+
import { PieChart } from "../pieChart/piechart"
23

34
export class DashboardItem extends Component {
45
static template = "awesome_dashboard.DashboardItem"
6+
static components = { PieChart }
57

68
static props = {
79
size: { type: Number, optional: true, default: 1 },
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { NumberCard } from "./numberCard/number_card";
2+
import { PieChartCard } from "./pieChartCard/pie_chart_card";
3+
import { registry } from "@web/core/registry";
4+
5+
const items = [
6+
{
7+
id: "nb_new_orders",
8+
description: "The number of new orders, this month",
9+
Component: NumberCard,
10+
size: 1,
11+
props: (data) => ({
12+
title: "New Orders This Month:",
13+
value: data.data.nb_new_orders
14+
}),
15+
},
16+
{
17+
id: "total_amount",
18+
description: "The total amount of orders, this month",
19+
Component: NumberCard,
20+
size: 2,
21+
props: (data) => ({
22+
title: "Total Amount This Month:",
23+
value: data.data.total_amount
24+
}),
25+
},
26+
{
27+
id: "average_quantity",
28+
description: "The average number of t-shirts by order",
29+
Component: NumberCard,
30+
size: 1,
31+
props: (data) => ({
32+
title: "Avg. T-Shirts per Order:",
33+
value: data.data.average_quantity
34+
}),
35+
},
36+
{
37+
id: "nb_cancelled_orders",
38+
description: "The number of cancelled orders, this month",
39+
Component: NumberCard,
40+
size: 1,
41+
props: (data) => ({
42+
title: "Cancelled Orders:",
43+
value: data.data.nb_cancelled_orders
44+
}),
45+
},
46+
{
47+
id: "average_time",
48+
description: "The average time (in hours) elapsed between the moment an order is created, and the moment is it sent",
49+
Component: NumberCard,
50+
size: 1,
51+
props: (data) => ({
52+
title: "Avg. Time New → Sent/Cancelled:",
53+
value: data.data.average_time
54+
}),
55+
},
56+
{
57+
id: "orders_by_size",
58+
description: "Number of shirts ordered based on size",
59+
Component: PieChartCard,
60+
size: 3,
61+
props: (data) => ({
62+
title: "Shirt orders by size:",
63+
value: data.data.orders_by_size
64+
}),
65+
}
66+
]
67+
items.forEach((item) => {
68+
registry.category("awesome_dashboard").add(item.id, item)
69+
});
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from "@odoo/owl";
2+
3+
export class NumberCard extends Component {
4+
static template = "awesome_dashboard.NumberCard";
5+
6+
static props = {
7+
title: { type: String },
8+
value: { type: [String, Number] }
9+
}
10+
}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<templates xml:space="preserve">
3+
<t t-name="awesome_dashboard.NumberCard">
4+
<div class="o_dashboard_stat_block">
5+
<span class="o_dashboard_stat_label">
6+
<strong><t t-out="this.props.title"/></strong>
7+
</span>
8+
<span class="o_dashboard_stat_value">
9+
<t t-esc="this.props.value" />
10+
</span>
11+
</div>
12+
</t>
13+
14+
</templates>

0 commit comments

Comments
 (0)