diff --git a/awesome_dashboard/__manifest__.py b/awesome_dashboard/__manifest__.py index 31406e8addb..c5b63b98530 100644 --- a/awesome_dashboard/__manifest__.py +++ b/awesome_dashboard/__manifest__.py @@ -25,6 +25,9 @@ 'web.assets_backend': [ 'awesome_dashboard/static/src/**/*', ], + 'awesome_dashboard.dashboard': [ + 'awesome_dashboard/static/src/dashboard/**/*', + ], }, 'license': 'AGPL-3' } diff --git a/awesome_dashboard/static/src/dashboard.js b/awesome_dashboard/static/src/dashboard.js deleted file mode 100644 index 637fa4bb972..00000000000 --- a/awesome_dashboard/static/src/dashboard.js +++ /dev/null @@ -1,10 +0,0 @@ -/** @odoo-module **/ - -import { Component } from "@odoo/owl"; -import { registry } from "@web/core/registry"; - -class AwesomeDashboard extends Component { - static template = "awesome_dashboard.AwesomeDashboard"; -} - -registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard); diff --git a/awesome_dashboard/static/src/dashboard/cards/number_card.js b/awesome_dashboard/static/src/dashboard/cards/number_card.js new file mode 100644 index 00000000000..ec3a9d5405f --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/cards/number_card.js @@ -0,0 +1,11 @@ +/** @odoo-module **/ + +import { Component } from "@odoo/owl"; + +export class NumberCard extends Component { + static template = "awesome_dashboard.NumberCard"; + static props = { + title: { type: String, optional: true }, + value: { type: [String, Number] }, + }; +} diff --git a/awesome_dashboard/static/src/dashboard/cards/number_card.xml b/awesome_dashboard/static/src/dashboard/cards/number_card.xml new file mode 100644 index 00000000000..41461596878 --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/cards/number_card.xml @@ -0,0 +1,11 @@ + + + + +
+
+
+
+ + + diff --git a/awesome_dashboard/static/src/dashboard/cards/pie_chart_card.js b/awesome_dashboard/static/src/dashboard/cards/pie_chart_card.js new file mode 100644 index 00000000000..2be3e6fabe6 --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/cards/pie_chart_card.js @@ -0,0 +1,13 @@ +/** @odoo-module **/ + +import { Component } from "@odoo/owl"; +import { PieChart } from "@awesome_dashboard/dashboard/charts/pie_chart"; + +export class PieChartCard extends Component { + static template = "awesome_dashboard.PieChartCard"; + static components = { PieChart }; + static props = { + title: { type: String, optional: true }, + chart: { type: Object, optional: true, shape: { ...PieChart.props } }, + }; +} diff --git a/awesome_dashboard/static/src/dashboard/cards/pie_chart_card.xml b/awesome_dashboard/static/src/dashboard/cards/pie_chart_card.xml new file mode 100644 index 00000000000..b0b68f4fc32 --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/cards/pie_chart_card.xml @@ -0,0 +1,11 @@ + + + + +
+
+ +
+ + + diff --git a/awesome_dashboard/static/src/dashboard/charts/pie_chart.js b/awesome_dashboard/static/src/dashboard/charts/pie_chart.js new file mode 100644 index 00000000000..f41f4dd6d31 --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/charts/pie_chart.js @@ -0,0 +1,42 @@ +/** @odoo-module **/ + +import { Component, onWillStart, onWillUnmount, useRef, useEffect } from "@odoo/owl"; +import { loadJS } from "@web/core/assets"; + +export class PieChart extends Component { + static template = "awesome_dashboard.PieChart"; + static props = { + data: { type: Object }, + options: { type: Object, optional: true }, + }; + + setup() { + this.canvasRef = useRef("canvas"); + this.chart = null; + + onWillStart(async () => { + await loadJS("/web/static/lib/Chart/Chart.js"); + }); + useEffect(() => this.renderChart()); + onWillUnmount(this.onWillUnmount); + } + + onWillUnmount() { + if (this.chart) { + this.chart.destroy(); + } + } + + renderChart() { + if (this.chart) { + this.chart.destroy(); + } + if (this.canvasRef.el) { + this.chart = new Chart(this.canvasRef.el, { + type: "pie", + data: this.props.data, + options: this.props.options, + }); + } + } +} diff --git a/awesome_dashboard/static/src/dashboard.xml b/awesome_dashboard/static/src/dashboard/charts/pie_chart.xml similarity index 55% rename from awesome_dashboard/static/src/dashboard.xml rename to awesome_dashboard/static/src/dashboard/charts/pie_chart.xml index 1a2ac9a2fed..ad3de405b33 100644 --- a/awesome_dashboard/static/src/dashboard.xml +++ b/awesome_dashboard/static/src/dashboard/charts/pie_chart.xml @@ -1,8 +1,8 @@ - - hello dashboard + + diff --git a/awesome_dashboard/static/src/dashboard/dashboard.js b/awesome_dashboard/static/src/dashboard/dashboard.js new file mode 100644 index 00000000000..d3d9ea072b0 --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/dashboard.js @@ -0,0 +1,64 @@ +/** @odoo-module **/ + +import { Component, useState, useEffect } from "@odoo/owl"; +import { Layout } from "@web/search/layout"; +import { useService } from "@web/core/utils/hooks"; +import { AwesomeDashboardItem } from "@awesome_dashboard/dashboard/dashboard_item"; +import { registry } from "@web/core/registry"; +import { CogMenu } from "@web/search/cog_menu/cog_menu"; +import { AwesomeDashboardConfigDialog } from "@awesome_dashboard/dashboard/dialogs/dashboard_config_dailog"; + +class AwesomeDashboard extends Component { + static template = "awesome_dashboard.AwesomeDashboard"; + static components = { Layout, AwesomeDashboardItem, CogMenu }; + + setup() { + this.action = useService("action"); + this.stats = useState(useService("awesome_dashboard_statistics")); + const config = JSON.parse(localStorage.getItem("awesome_dashboard_config")); + const data = registry.category("awesome_dashboard").get("data"); + this.setActives(config, data); + this.items = useState({ data }); + this.dialog = useService("dialog"); + } + + onClickCustomers() { + this.action.doAction({ + type: "ir.actions.act_window", + name: "Customers", + target: "current", + res_model: "res.partner", + views: [[false, "kanban"]], + }); + } + + onClickLeads() { + this.action.doAction({ + type: "ir.actions.act_window", + name: "Leads", + target: "current", + res_model: "crm.lead", + views: [[false, "list"]], + }); + } + + setActives(ref, toUpdate) { + for (const key in ref) { + const entry = ref[key]; + const dataItem = toUpdate[key]; + if (dataItem) { + dataItem.active = entry.active; + } + } + } + + openConfiguration() { + this.dialog.add(AwesomeDashboardConfigDialog, { + onConfirm: (configItems) => { + this.setActives(configItems, this.items.data); + }, + }); + } +} + +registry.category("lazy_components").add("awesome_dashboard.AwesomeDashboard", AwesomeDashboard); diff --git a/awesome_dashboard/static/src/dashboard/dashboard.scss b/awesome_dashboard/static/src/dashboard/dashboard.scss new file mode 100644 index 00000000000..5a915ac6f1b --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/dashboard.scss @@ -0,0 +1,19 @@ +.o_dashboard { + background-color: #f0f0f0; + padding: 20px; + + .o_dashboard_items { + display: flex; + flex-wrap: wrap; + align-items: stretch; + gap: 20px; + + .o_dashboard_item { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + padding: 10px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + } + } +} diff --git a/awesome_dashboard/static/src/dashboard/dashboard.xml b/awesome_dashboard/static/src/dashboard/dashboard.xml new file mode 100644 index 00000000000..7e892fae634 --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/dashboard.xml @@ -0,0 +1,33 @@ + + + + + + + + + + + +
+ + + + + + + +
+
+
+ +
diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item.js b/awesome_dashboard/static/src/dashboard/dashboard_item.js new file mode 100644 index 00000000000..62e5f89562f --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/dashboard_item.js @@ -0,0 +1,12 @@ +/** @odoo-module **/ + +import { Component } from "@odoo/owl"; + +export class AwesomeDashboardItem extends Component { + static template = "awesome_dashboard.AwesomeDashboardItem"; + static props = { + size: { type: Number, optional: true }, + slots: { type: Object }, + }; + static defaultProps = { size: 1 }; +} diff --git a/awesome_dashboard/static/src/dashboard/dashboard_item.xml b/awesome_dashboard/static/src/dashboard/dashboard_item.xml new file mode 100644 index 00000000000..5fa70ae3125 --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/dashboard_item.xml @@ -0,0 +1,10 @@ + + + + +
+ +
+
+ +
diff --git a/awesome_dashboard/static/src/dashboard/data/dashboard_data.js b/awesome_dashboard/static/src/dashboard/data/dashboard_data.js new file mode 100644 index 00000000000..5f9a36e26b3 --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/data/dashboard_data.js @@ -0,0 +1,72 @@ +/** @odoo-module **/ + +import { registry } from "@web/core/registry"; +import { PieChartCard } from "@awesome_dashboard/dashboard/cards/pie_chart_card"; +import { NumberCard } from "@awesome_dashboard/dashboard/cards/number_card"; + +registry.category("awesome_dashboard").add("data", { + average_quantity: { + Component: NumberCard, + props: (stats) => ({ + title: "Average amount of t-shirt by order this month", + value: stats.data.average_quantity, + }), + active: true, + }, + average_time: { + Component: NumberCard, + props: (stats) => ({ + title: "Average time to deliver an order this month", + value: stats.data.average_time, + }), + active: true, + }, + nb_cancelled_orders: { + Component: NumberCard, + size: 2.5, + props: (stats) => ({ + title: "Number of cancelled orders this month", + value: stats.data.nb_cancelled_orders, + }), + active: true, + }, + nb_new_orders: { + Component: NumberCard, + size: 2.5, + props: (stats) => ({ + title: "Number of new orders this month", + value: stats.data.nb_new_orders, + }), + active: true, + }, + total_amount: { + Component: NumberCard, + size: 2.5, + props: (stats) => ({ + title: "Total amount of orders this month", + value: stats.data.total_amount, + }), + active: true, + }, + orders_by_size: { + Component: PieChartCard, + props: (stats) => ({ + title: "Orders by size", + chart: { + data: { + datasets: [ + { + data: [ + stats.data.orders_by_size.m, + stats.data.orders_by_size.s, + stats.data.orders_by_size.xl, + ], + }, + ], + labels: ["M", "S", "XL"], + }, + }, + }), + active: true, + }, +}); diff --git a/awesome_dashboard/static/src/dashboard/dialogs/dashboard_config_dailog.js b/awesome_dashboard/static/src/dashboard/dialogs/dashboard_config_dailog.js new file mode 100644 index 00000000000..3459aa0da0d --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/dialogs/dashboard_config_dailog.js @@ -0,0 +1,41 @@ +/** @odoo-module **/ + +import { Component } from "@odoo/owl"; +import { Dialog } from "@web/core/dialog/dialog"; + +export class AwesomeDashboardConfigDialog extends Component { + static template = "awesome_dashboard.AwesomeDashboardConfigDialog"; + static components = { Dialog }; + static props = { close: { type: Function, optional: true }, onConfirm: { type: Function, optional: true } }; + static defaultProps = { + close: () => {}, + onConfirm: () => {}, + }; + + setup() { + if (localStorage.getItem("awesome_dashboard_config") === null) { + localStorage.setItem( + "awesome_dashboard_config", + JSON.stringify({ + average_quantity: { title: "Average Quantity", active: true }, + average_time: { title: "Average Time", active: true }, + nb_cancelled_orders: { title: "Cancelled Orders", active: true }, + nb_new_orders: { title: "New Orders", active: true }, + total_amount: { title: "Total Amount", active: true }, + orders_by_size: { title: "Orders by Size", active: true }, + }) + ); + } + this.configItems = JSON.parse(localStorage.getItem("awesome_dashboard_config")); + } + + onSave() { + localStorage.setItem("awesome_dashboard_config", JSON.stringify(this.configItems)); + this.props.onConfirm(this.configItems); + this.props.close(); + } + + discard() { + this.props.close(); + } +} diff --git a/awesome_dashboard/static/src/dashboard/dialogs/dashboard_config_dialog.xml b/awesome_dashboard/static/src/dashboard/dialogs/dashboard_config_dialog.xml new file mode 100644 index 00000000000..baf147eeea9 --- /dev/null +++ b/awesome_dashboard/static/src/dashboard/dialogs/dashboard_config_dialog.xml @@ -0,0 +1,22 @@ + + + + + + +
+
+ + + +
+ + + + +
+
+
+ +
diff --git a/awesome_dashboard/static/src/dashboard_action.js b/awesome_dashboard/static/src/dashboard_action.js new file mode 100644 index 00000000000..ad8e0523052 --- /dev/null +++ b/awesome_dashboard/static/src/dashboard_action.js @@ -0,0 +1,12 @@ +/** @odoo-module **/ + +import { Component } from "@odoo/owl"; +import { registry } from "@web/core/registry"; +import { LazyComponent } from "@web/core/assets"; + +class AwesomeDashboardLoader extends Component { + static components = { LazyComponent }; + static template = "awesome_dashboard.AwesomeDashboardLoader"; +} + +registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboardLoader); diff --git a/awesome_dashboard/static/src/dashboard_action.xml b/awesome_dashboard/static/src/dashboard_action.xml new file mode 100644 index 00000000000..6d0512a6fb6 --- /dev/null +++ b/awesome_dashboard/static/src/dashboard_action.xml @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/awesome_dashboard/static/src/statistics/awesome_dashboard_statistics.js b/awesome_dashboard/static/src/statistics/awesome_dashboard_statistics.js new file mode 100644 index 00000000000..85a85f34b60 --- /dev/null +++ b/awesome_dashboard/static/src/statistics/awesome_dashboard_statistics.js @@ -0,0 +1,32 @@ +/** @odoo-module **/ + +import { memoize } from "@web/core/utils/functions"; +import { rpc } from "@web/core/network/rpc"; +import { registry } from "@web/core/registry"; +import { reactive } from "@odoo/owl"; + +export const awesomeDashboardStatisticsService = { + start() { + const stats = reactive({ data: null }); + + // Get a new memoized function for fetching statistics + const getMemoizeFetch = () => { + return memoize(async () => { + return await rpc("/awesome_dashboard/statistics"); + }); + }; + + // Fetch statistics + const fetchStatistics = async () => { + const memoizedFetch = getMemoizeFetch(); + stats.data = await memoizedFetch(); + }; + + // Setup interval + fetchStatistics(); + setInterval(fetchStatistics, 600000); + + return stats; + }, +}; +registry.category("services").add("awesome_dashboard_statistics", awesomeDashboardStatisticsService); diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js new file mode 100644 index 00000000000..71076c300bc --- /dev/null +++ b/awesome_owl/static/src/counter/counter.js @@ -0,0 +1,25 @@ +/** @odoo-module **/ + +import { Component, useState } from "@odoo/owl"; + +export class Counter extends Component { + static template = "awesome_owl.counter"; + static props = { + title: { type: String, optional: true }, + onIncrement: { type: Function, optional: true }, + slots: { type: Object, optional: true }, + }; + + setup() { + this.state = useState({ count: 0, show: true }); + } + + increment() { + this.state.count++; + this.props.onIncrement?.(); + } + + toggleShow() { + this.state.show = !this.state.show; + } +} diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml new file mode 100644 index 00000000000..bdfe9e15760 --- /dev/null +++ b/awesome_owl/static/src/counter/counter.xml @@ -0,0 +1,26 @@ + + + + +
+
+
+
+ +
+
+ +
+ +
+ +
+ + diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js index 657fb8b07bb..100cf5eba78 100644 --- a/awesome_owl/static/src/playground.js +++ b/awesome_owl/static/src/playground.js @@ -1,7 +1,21 @@ /** @odoo-module **/ -import { Component } from "@odoo/owl"; +import { Component, useState } from "@odoo/owl"; +import { Counter } from "@awesome_owl/counter/counter"; +import { TodoList } from "@awesome_owl/todo/todo_list"; export class Playground extends Component { static template = "awesome_owl.playground"; + static components = { Counter, TodoList }; + + setup() { + this.state = useState({ + sum: 0, + todos: [], + }); + } + + incrementSum() { + this.state.sum++; + } } diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml index 4fb905d59f9..3c3f0bb96ee 100644 --- a/awesome_owl/static/src/playground.xml +++ b/awesome_owl/static/src/playground.xml @@ -2,8 +2,28 @@ -
- hello world +
+ +
+ EXTRA content strong +
+
+ +
+