Skip to content

Commit 77277ba

Browse files
danal-odoodanal-odoo
committed
[IMP] awesome_dashboard: added popup to select item to show/hide.
added a settings icon near Dashboard in Layout component. added popup form to select which item to show/hide in Dashboard. added function which will store those settings in Browser's local storage.
1 parent 1a34266 commit 77277ba

File tree

9 files changed

+193
-38
lines changed

9 files changed

+193
-38
lines changed

‎awesome_dashboard/static/src/dashboard/dashboard.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,23 @@ class AwesomeDashboard extends Component {
1313
this.action = useService("action");
1414
const statisticsService = useService("awesome_dashboard.statistics");
1515
this.statistics = useState(statisticsService.state);
16+
this.modalState = useState({ isOpen: false });
17+
this.hiddenItems = useState({
18+
ids: JSON.parse(
19+
localStorage.getItem("hidden_dashboard_items") || "[]"
20+
),
21+
});
22+
this.items = useState(
23+
registry
24+
.category("awesome_dashboard")
25+
.getAll()
26+
.filter((item) => !this.hiddenItems.ids.includes(item.id))
27+
);
28+
this.allItems = useState(
29+
registry
30+
.category("awesome_dashboard")
31+
.getAll()
32+
);
1633
}
1734

1835
openCustomers() {
@@ -39,6 +56,36 @@ class AwesomeDashboard extends Component {
3956
],
4057
});
4158
}
59+
60+
toggleModal() {
61+
this.modalState.isOpen = !this.modalState.isOpen
62+
}
63+
64+
toggleItem(event) {
65+
const itemId = event.target.value;
66+
67+
if (event.target.checked) {
68+
this.hiddenItems.ids = this.hiddenItems.ids.filter(
69+
(id) => id !== itemId
70+
);
71+
} else {
72+
this.hiddenItems.ids.push(itemId);
73+
}
74+
}
75+
76+
applySettings() {
77+
localStorage.setItem(
78+
"hidden_dashboard_items",
79+
JSON.stringify(this.hiddenItems.ids)
80+
);
81+
82+
this.items = registry
83+
.category("awesome_dashboard")
84+
.getAll()
85+
.filter((item) => !this.hiddenItems.ids.includes(item.id));
86+
87+
this.toggleModal();
88+
}
4289
}
4390

4491
registry.category("lazy_components").add("awesome_dashboard.AwesomeDashboard", AwesomeDashboard);

‎awesome_dashboard/static/src/dashboard/dashboard.xml‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,43 +11,48 @@
1111
Leads
1212
</button>
1313
</t>
14-
<div class="d-flex flex-wrap mt-1">
15-
<DashboardItem>
16-
<div class="text-center">
17-
Number of new orders this month
18-
<p t-out="this.statistics.data.nb_new_orders" class="fs-1 fw-bold text-success"/>
19-
</div>
20-
</DashboardItem>
21-
<DashboardItem>
22-
<div class="text-center">
23-
Total amount of new orders this month
24-
<p t-out="this.statistics.data.total_amount" class="fs-1 fw-bold text-success"/>
25-
</div>
26-
</DashboardItem>
27-
<DashboardItem>
28-
<div class="text-center">
29-
Average amount of t-shirt by order this month
30-
<p t-out="this.statistics.data.average_quantity" class="fs-1 fw-bold text-success"/>
31-
</div>
32-
</DashboardItem>
33-
<DashboardItem>
34-
<div class="text-center">
35-
Number of cancelled orders this month
36-
<p t-out="this.statistics.data.nb_cancelled_orders" class="fs-1 fw-bold text-success"/>
37-
</div>
38-
</DashboardItem>
39-
<DashboardItem>
40-
<div class="text-center">
41-
Shirt order by size
42-
<PieChart items="this.statistics.data.orders_by_size"/>
43-
</div>
44-
</DashboardItem>
45-
<DashboardItem>
46-
<div class="text-center">
47-
Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’
48-
<p t-out="this.statistics.data.average_time" class="fs-1 fw-bold text-success"/>
14+
15+
<t t-set-slot="control-panel-additional-actions">
16+
<button type="button" class="btn btn-light p-1" t-on-click="toggleModal">
17+
<i class="fa fa-fw fa-cog fs-5 text-muted"></i>
18+
</button>
19+
</t>
20+
21+
<div class="d-flex flex-wrap mt-1 text-center">
22+
<t t-foreach="items" t-as="item" t-key="item.id">
23+
<DashboardItem size="item.size">
24+
<t t-set="itemProp" t-value="item.props ? item.props(this.statistics.data) : {'data': this.statistics.data}"/>
25+
<t t-component="item.Component" t-props="itemProp" />
26+
</DashboardItem>
27+
</t>
28+
</div>
29+
30+
<div class="modal fade d-block" t-att-class="(this.modalState.isOpen ? 'show': 'd-none')" tabindex="-1" role="dialog">
31+
<div class="modal-dialog modal-dialog-centered" role="document">
32+
<div class="modal-content">
33+
<div class="modal-header d-flex justify-content-between">
34+
<h5 class="modal-title">Dashboard Settings</h5>
35+
</div>
36+
<div class="modal-body">
37+
<label>Select dashboard items:</label>
38+
<div class="m-2">
39+
<t t-foreach="this.allItems" t-as="item" t-key="item.id">
40+
<div>
41+
<input type="checkbox" class='me-2'
42+
t-att-value="item.id"
43+
t-att-checked="!hiddenItems.ids.includes(item.id)"
44+
t-on-change="toggleItem"/>
45+
<t t-esc="item.description"/>
46+
</div>
47+
</t>
48+
</div>
49+
</div>
50+
<div class="modal-footer">
51+
<button class="btn btn-primary me-2" t-on-click="applySettings">Apply</button>
52+
<button class="btn btn-secondary" t-on-click="toggleModal">Cancel</button>
53+
</div>
4954
</div>
50-
</DashboardItem>
55+
</div>
5156
</div>
5257
</Layout>
5358
</t>

‎awesome_dashboard/static/src/dashboard/dashboard_items.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { registry } from "@web/core/registry";
2+
import { NumberCard } from "./numbercard/numbercard";
3+
import { PieChartCard } from "./piechartcard/piechartcard";
4+
5+
export const items = [
6+
{
7+
id: "average_quantity",
8+
description: "Average amount of t-shirt",
9+
Component: NumberCard,
10+
props: (data) => ({
11+
title: "Average amount of t-shirt by order this month",
12+
value: data.average_quantity,
13+
}),
14+
},
15+
{
16+
id: "nb_new_orders",
17+
description: "Number of new orders this month",
18+
Component: NumberCard,
19+
props: (data) => ({
20+
title: "Number of new orders this month",
21+
value: data.nb_new_orders,
22+
}),
23+
},
24+
{
25+
id: "nb_cancelled_orders",
26+
description: "Number of cancelled orders this month",
27+
Component: NumberCard,
28+
props: (data) => ({
29+
title: "Number of cancelled orders this month",
30+
value: data.nb_cancelled_orders,
31+
}),
32+
},
33+
{
34+
id: "total_amount",
35+
description: "Total amount of new orders this month",
36+
Component: NumberCard,
37+
props: (data) => ({
38+
title: "Total amount of new orders this month",
39+
value: data.total_amount,
40+
}),
41+
},
42+
{
43+
id: "orders_by_size",
44+
description: "Shirt orders by size",
45+
Component: PieChartCard,
46+
props: (data) => ({
47+
title: "Shirt orders by size",
48+
value: data.orders_by_size,
49+
}),
50+
},
51+
{
52+
id: "average_time",
53+
description:
54+
"Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’",
55+
Component: NumberCard,
56+
props: (data) => ({
57+
title: "Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’",
58+
value: data.average_time,
59+
}),
60+
},
61+
];
62+
63+
items.forEach((item) => {
64+
registry
65+
.category("awesome_dashboard")
66+
.add("awesome_dashboard.dashboard_item." + item.id, item);
67+
});

‎awesome_dashboard/static/src/dashboard/numbercard/numbercard.js‎

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: String,
8+
value: Number,
9+
};
10+
}

‎awesome_dashboard/static/src/dashboard/numbercard/numbercard.xml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<templates xml:space="preserve">
3+
<t t-name="awesome_dashboard.NumberCard">
4+
<h5 class="mb-0" t-esc="props.title"/>
5+
<p class='fs-1 fw-bold text-success mb-0' t-esc="props.value"/>
6+
</t>
7+
</templates>

‎awesome_dashboard/static/src/dashboard/piechart/piechart.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export class PieChart extends Component {
77
items: {
88
type: Object,
99
optional: true,
10-
default: () => ({}),
10+
default: () => { },
1111
},
1212
}
1313

‎awesome_dashboard/static/src/dashboard/piechartcard/piechartcard.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component } from "@odoo/owl";
2+
import { PieChart } from "../piechart/piechart";
3+
4+
export class PieChartCard extends Component {
5+
static template = "awesome_dashboard.PieChartCard";
6+
static components = { PieChart };
7+
8+
static props = {
9+
title: String,
10+
value: Object,
11+
};
12+
}

‎awesome_dashboard/static/src/dashboard/piechartcard/piechartcard.xml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<templates xml:space="preserve">
3+
<t t-name="awesome_dashboard.PieChartCard">
4+
<h5 class="mb-0" t-esc="props.title"/>
5+
<PieChart items="props.value"/>
6+
</t>
7+
</templates>

‎awesome_dashboard/static/src/dashboard/statistics_services.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const statisticsService = {
1111
state.data = await loadStatistics();
1212
};
1313
fetchData();
14-
setInterval(fetchData, 10000);
14+
setInterval(fetchData, 10 * 60 * 1000);
1515
return {
1616
state: state
1717
};

0 commit comments

Comments
 (0)