Skip to content

Commit 277a26a

Browse files
committed
[ADD] awesome_owl,*: complete Owl components and dashboard tutorials
*= awesome_dashboard - Implemented Owl components: counter, card with props validation and todo list. - Developed a complete Todo List application(add, remove, mark as completed). - Adhered to proper folder structure. - Built awesome_dashboard - Fetched and displayed stats via RPC (/statistics route) - Added PieChart with lazy-loaded Chart.js
1 parent 76bab01 commit 277a26a

29 files changed

+579
-29
lines changed

awesome_dashboard/__manifest__.py

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,11 @@
2424
'assets': {
2525
'web.assets_backend': [
2626
'awesome_dashboard/static/src/**/*',
27+
('remove', 'awesome_dashboard/static/src/dashboard/**/*'),
2728
],
29+
'awesome_dashboard.dashboard': [
30+
'awesome_dashboard/static/src/dashboard/**/*'
31+
]
2832
},
2933
'license': 'AGPL-3'
3034
}

awesome_dashboard/static/src/dashboard.js

Lines changed: 0 additions & 10 deletions
This file was deleted.

awesome_dashboard/static/src/dashboard.xml

Lines changed: 0 additions & 8 deletions
This file was deleted.
Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/** @odoo-module **/
2+
import { Component , useState } from "@odoo/owl";
3+
import { registry } from "@web/core/registry";
4+
import { Layout } from "@web/search/layout";
5+
import { useService } from "@web/core/utils/hooks";
6+
import { DashboardItem } from "./dashboard_item/dashboard_item";
7+
import { Dialog } from "@web/core/dialog/dialog";
8+
import { CheckBox } from "@web/core/checkbox/checkbox";
9+
import { browser } from "@web/core/browser/browser";
10+
11+
class AwesomeDashboard extends Component {
12+
static template = "awesome_dashboard.AwesomeDashboard";
13+
static components = { Layout , DashboardItem };
14+
setup() {
15+
this.action = useService("action");
16+
this.statisticsService = useState(useService("awesome_dashboard.statistics"));
17+
this.dialog = useService("dialog");
18+
this.display = {
19+
controlPanel: {},
20+
};
21+
this.items = registry.category("awesome_dashboard").getAll();
22+
this.state = useState({
23+
disabledItems: browser.localStorage.getItem("disabledDashboardItems")?.split(",") || []
24+
});
25+
}
26+
openConfiguration() {
27+
this.dialog.add(ConfigurationDialog, {
28+
items: this.items,
29+
disabledItems: this.state.disabledItems,
30+
onUpdateConfiguration: this.updateConfiguration.bind(this),
31+
})
32+
}
33+
updateConfiguration(newDisabledItems) {
34+
this.state.disabledItems = newDisabledItems;
35+
}
36+
37+
openCustomerView() {
38+
this.action.doAction("base.action_partner_form");
39+
}
40+
41+
openLeads() {
42+
this.action.doAction({
43+
type: "ir.actions.act_window",
44+
name: "All leads",
45+
res_model: "crm.lead",
46+
views: [
47+
[false, "list"],
48+
[false, "form"],
49+
],
50+
target:"current"
51+
});
52+
}
53+
}
54+
class ConfigurationDialog extends Component {
55+
static template = "awesome_dashboard.ConfigurationDialog";
56+
static components = { Dialog, CheckBox };
57+
static props = ["close", "items", "disabledItems", "onUpdateConfiguration"];
58+
59+
setup() {
60+
this.items = useState(this.props.items.map((item) => {
61+
return {
62+
...item,
63+
enabled: !this.props.disabledItems.includes(item.id),
64+
}
65+
}));
66+
}
67+
68+
done() {
69+
this.props.close();
70+
}
71+
72+
onChange(checked, changedItem) {
73+
changedItem.enabled = checked;
74+
const newDisabledItems = Object.values(this.items).filter(
75+
(item) => !item.enabled
76+
).map((item) => item.id)
77+
78+
browser.localStorage.setItem(
79+
"disabledDashboardItems",
80+
newDisabledItems,
81+
);
82+
83+
this.props.onUpdateConfiguration(newDisabledItems);
84+
}
85+
86+
}
87+
88+
registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.o_dashboard {
2+
background-color: gray;
3+
}
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<templates xml:space="preserve">
3+
4+
<t t-name="awesome_dashboard.AwesomeDashboard">
5+
<Layout display="display" className="'o_dashboard h-100'">
6+
<t t-set-slot="layout-buttons">
7+
<button class="btn btn-primary" t-on-click="openCustomerView">Customers</button>
8+
<button class="btn btn-primary" t-on-click="openLeads">Leads</button>
9+
</t>
10+
<t t-set-slot="control-panel-additional-actions">
11+
<button t-on-click="openConfiguration" class="btn p-0 ms-1 border-0">
12+
<i class="fa fa-cog"></i>
13+
</button>
14+
</t>
15+
<div class="d-flex flex-wrap" t-if="statisticsService.isReady">
16+
<t t-foreach="items" t-as="item" t-key="item.id">
17+
<DashboardItem t-if="!state.disabledItems.includes(item.id)" size="item.size || 1">
18+
<t t-set="itemProp" t-value="item.props ? item.props(statisticsService) : {'data': statisticsService}"/>
19+
<t t-component="item.Component" t-props="itemProp" />
20+
</DashboardItem>
21+
</t>
22+
</div>
23+
</Layout>
24+
</t>
25+
<t t-name="awesome_dashboard.ConfigurationDialog">
26+
<Dialog title="'Dashboard items configuration'">
27+
Which cards do you whish to see ?
28+
<t t-foreach="items" t-as="item" t-key="item.id">
29+
<CheckBox value="item.enabled" onChange="(ev) => this.onChange(ev, item)">
30+
<t t-esc="item.description"/>
31+
</CheckBox>
32+
</t>
33+
<t t-set-slot="footer">
34+
<button class="btn btn-primary" t-on-click="done">
35+
Done
36+
</button>
37+
</t>
38+
</Dialog>
39+
</t>
40+
</templates>
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Component } from "@odoo/owl";
2+
3+
export class DashboardItem extends Component {
4+
static template = "awesome_dashboard.DashboardItem";
5+
static props = {
6+
slots: {
7+
type: Object,
8+
shape: {
9+
default: Object,
10+
},
11+
},
12+
size: {
13+
type: Number,
14+
default: 1,
15+
optional: true,
16+
},
17+
};
18+
}
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<templates xml:space="preserve">
3+
<t t-name="awesome_dashboard.DashboardItem">
4+
<div class="card m-2 border-dark" t-attf-style="width: {{18*props.size}}rem;">
5+
<div class="card-body">
6+
<t t-slot="default"/>
7+
</div>
8+
</div>
9+
</t>
10+
</templates>
Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/** @odoo-module */
2+
3+
import { NumberCard } from "./number_card/number_card";
4+
import { PieChartCard } from "./pie_chart_card/pie_chart_card";
5+
import { registry } from "@web/core/registry";
6+
7+
const items = [
8+
{
9+
id: "average_quantity",
10+
description: "Average amount of t-shirt",
11+
Component: NumberCard,
12+
props: (data) => ({
13+
title: "Average amount of t-shirt by order this month",
14+
value: data.average_quantity,
15+
})
16+
},
17+
{
18+
id: "average_time",
19+
description: "Average time for an order",
20+
Component: NumberCard,
21+
props: (data) => ({
22+
title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
23+
value: data.average_time,
24+
})
25+
},
26+
{
27+
id: "number_new_orders",
28+
description: "New orders this month",
29+
Component: NumberCard,
30+
props: (data) => ({
31+
title: "Number of new orders this month",
32+
value: data.nb_new_orders,
33+
})
34+
},
35+
{
36+
id: "cancelled_orders",
37+
description: "Cancelled orders this month",
38+
Component: NumberCard,
39+
props: (data) => ({
40+
title: "Number of cancelled orders this month",
41+
value: data.nb_cancelled_orders,
42+
})
43+
},
44+
{
45+
id: "amount_new_orders",
46+
description: "amount orders this month",
47+
Component: NumberCard,
48+
props: (data) => ({
49+
title: "Total amount of new orders this month",
50+
value: data.total_amount,
51+
})
52+
},
53+
{
54+
id: "pie_chart",
55+
description: "Shirt orders by size",
56+
Component: PieChartCard,
57+
size: 2,
58+
props: (data) => ({
59+
title: "Shirt orders by size",
60+
values: data.orders_by_size,
61+
})
62+
}
63+
]
64+
items.forEach(item => {
65+
registry.category("awesome_dashboard").add(item.id, item);
66+
});
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/** @odoo-module */
2+
3+
import { Component } from "@odoo/owl";
4+
5+
export class NumberCard extends Component {
6+
static template = "awesome_dashboard.NumberCard";
7+
static props = {
8+
title: {
9+
type: String,
10+
},
11+
value: {
12+
type: Number,
13+
}
14+
}
15+
}

0 commit comments

Comments
 (0)