Skip to content

Commit ec968fb

Browse files
hich-odoohich-odoo
committed
[ADD] awesome dashboard: implemented dashboard using owl js framework
get data from API using rpc and set in reactive varibale. created generic components and render loop via reactive array . implemented pie chart to categorized data. created setting for dashboard to view only selected cards.
1 parent 2f6fde4 commit ec968fb

14 files changed

+324
-19
lines changed

‎awesome_dashboard/__manifest__.py‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@
2323
],
2424
'assets': {
2525
'web.assets_backend': [
26-
'awesome_dashboard/static/src/**/*',
26+
'awesome_dashboard/static/src/lazy_load_wrapper.js',
27+
],
28+
'awesome_dashboard.dashboard': [
29+
'awesome_dashboard/static/src/dashboard/**/*',
2730
],
2831
},
2932
'license': 'AGPL-3'

‎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.

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/** @odoo-module **/
2+
3+
import { Component, useState } from "@odoo/owl";
4+
import { useService } from "@web/core/utils/hooks";
5+
import { Layout } from "@web/search/layout";
6+
import { DashboardItem } from "./dashboard_item";
7+
import { Piechart } from "./piechart";
8+
import { registry } from "@web/core/registry";
9+
import { DBModal } from "./dashboard_setting_modal";
10+
11+
export class AwesomeDashboard extends Component {
12+
static template = "awesome_dashboard.AwesomeDashboard";
13+
14+
static components = { Layout, DashboardItem, Piechart };
15+
16+
setup() {
17+
this.action = useService("action");
18+
this.statisticService = useService("load_statistics");
19+
this.data = useState(this.statisticService);
20+
this.dialog = useService("dialog");
21+
}
22+
23+
openMyModal() {
24+
this.dialog.add(DBModal, {
25+
items: this.data.stats,
26+
chart: this.data.chartData,
27+
});
28+
}
29+
30+
viewCustomers() {
31+
this.action.doAction("base.action_partner_form");
32+
}
33+
34+
viewLeads() {
35+
this.action.doAction({
36+
type: "ir.actions.act_window",
37+
target: "current",
38+
res_model: "crm.lead",
39+
views: [
40+
[false, "form"],
41+
[false, "list"],
42+
],
43+
});
44+
}
45+
}
46+
47+
registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

‎awesome_dashboard/static/src/dashboard/dashboard.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.o_dashboard {
2+
background-color: #111827;
3+
.db-item-title {
4+
font-size:18px;
5+
}
6+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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 class="btn btn-primary" t-on-click="viewCustomers">Customers</button>
8+
<button class="btn btn-primary ms-2" t-on-click="viewLeads">Leads</button>
9+
<span class="fa fa-gear cursor-pointer mt-2 mx-2" t-on-click="openMyModal"/>
10+
</t>
11+
<div class="flex-wrap d-flex gap-3 p-3">
12+
<t t-if="this.data.stats.length > 0">
13+
<t t-foreach="this.data.stats" t-as="stat" t-key="stat.title">
14+
<t t-if="stat.isVisible">
15+
<DashboardItem title="stat.title" value="stat.value" size="stat.size"/>
16+
</t>
17+
</t>
18+
<t t-if="this.data.chartData.isVisible">
19+
<Piechart chartData="this.data.chartData"/>
20+
</t>
21+
</t>
22+
</div>
23+
</Layout>
24+
</t>
25+
26+
</templates>

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

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 DashboardItem extends Component {
6+
static template = "awesome_dashboard.dashboard_item";
7+
8+
static components = {};
9+
10+
static props = ["size", "title", "value"];
11+
12+
static defaultProps = {
13+
size: 1,
14+
};
15+
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<templates xml:space="preserve">
3+
4+
<t t-name="awesome_dashboard.dashboard_item">
5+
<div t-att-style="`width:${18*props.size}rem`" class="bg-light p-3 rounded">
6+
<p t-out="props.title" class="db-item-title"/>
7+
<h1 t-out="props.value" class="text-success"/>
8+
</div>
9+
</t>
10+
11+
</templates>

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Component } from "@odoo/owl";
2+
import { Dialog } from "@web/core/dialog/dialog";
3+
4+
export class DBModal extends Component {
5+
static template = "awesome_dashboard.db_modal";
6+
static components = { Dialog };
7+
8+
static props = ['items','chart']
9+
10+
setup() {
11+
this.items = this.props.items;
12+
this.chart = this.props.chart;
13+
this.visibleList = this.items.reduce((acc, crr) => {
14+
if (crr?.isVisible) {
15+
acc?.push(crr?.id);
16+
}
17+
return acc;
18+
}, []);
19+
20+
if (this.chart.isVisible) {
21+
this.visibleList.push("chart");
22+
}
23+
}
24+
25+
handleItemToggle = (_, id) => {
26+
if (this.visibleList.includes(id)) {
27+
this.visibleList = this.visibleList.filter((i) => i !== id);
28+
} else {
29+
this.visibleList.push(id);
30+
}
31+
};
32+
33+
handleApplySetting() {
34+
this.items.forEach((item) => {
35+
item.isVisible = this.visibleList.includes(item?.id);
36+
});
37+
38+
this.chart.isVisible = this.visibleList.includes("chart");
39+
40+
localStorage.setItem(
41+
"dashboardItemVisibility",
42+
JSON.stringify(this.visibleList)
43+
);
44+
this.props.close();
45+
}
46+
}

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

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+
<t t-name="awesome_dashboard.db_modal">
4+
<Dialog title="'Dashboard items configuration'">
5+
<h4>Which cards do you wish to see ?</h4>
6+
<t t-foreach="this.items" t-as="item" t-key="item.title">
7+
<div class="d-flex align-items-center mb-1">
8+
<input type="checkbox" t-on-change="(e)=>handleItemToggle(e,item.id)" t-att-checked="item.isVisible"/>
9+
<p class="mb-0 ms-2" t-out="item.title"/>
10+
</div>
11+
</t>
12+
<div class="d-flex align-items-center mb-1">
13+
<input type="checkbox" t-on-change="(e)=>handleItemToggle(e,'chart')" t-att-checked="this.chart.isVisible"/>
14+
<p class="mb-0 ms-2">T-shirts Sales by size</p>
15+
</div>
16+
<t t-set-slot="footer">
17+
<button class="btn btn-primary" t-on-click="handleApplySetting">Apply</button>
18+
</t>
19+
</Dialog>
20+
</t>
21+
</templates>

0 commit comments

Comments
 (0)