[IMP] awesome_dashboard: changed project structure and made dashboard item more modular

Author: yagho-odoo

awesome_dashboard/__manifest__.py

@@ -24,6 +24,10 @@
     'assets': {
         'web.assets_backend': [
             'awesome_dashboard/static/src/**/*',
+            ('remove', 'awesome_dashboard/static/src/dashboard**/*'),
+        ],
+        'awesome_dashboard.dashboard': [
+            'awesome_dashboard/static/src/dashboard/**/*'
         ],
     },
     'license': 'AGPL-3'

awesome_dashboard/static/src/dashboard.xml

@@ -5,14 +5,13 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboard_item/dashboard_item";
-import { PieChart } from "./pie_chart/pie_chart";
+import { items } from "./dashboard_items";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
     static components = {
         Layout,
         DashboardItem,
-        PieChart
     };
 
     static props = {
@@ -24,6 +23,7 @@ class AwesomeDashboard extends Component {
     setup() {
         this.action = useService("action");
         this.result = useState(useService("awesome_dashboard.getStats"));
+        this.items = items
     }
 
     openCustomerKanban() {
@@ -41,4 +41,4 @@ class AwesomeDashboard extends Component {
     }
 }
 
-registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

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

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.AwesomeDashboard">
+        <div t-ref="root" class="h-100 d-flex flex-column">
+            <Layout className="'o_dashboard h-100'" display="props.display">
+                <button class="btn btn-primary myBtnChange" t-on-click="openCustomerKanban"> Open customer kanban </button>
+                <button class="btn btn-primary myBtnChange" t-on-click="openActivity"> Leads </button>
+                <div style="margin-left: 1rem; display: flex;">
+                    <t t-foreach="items" t-as="item" t-key="item.id">
+                        <DashboardItem size="item.size || 1">
+                            <t t-set="itemProp" t-value="item.props ? item.props(result) : {'data': result}"/>
+                            <t t-component="item.Component" t-props="itemProp" />
+                        </DashboardItem>
+                    </t>
+                </div>
+            </Layout>
+
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard.scss renamed to awesome_dashboard/static/src/dashboard/dashboard.scss

@@ -0,0 +1,60 @@
+import { NumberCard } from "./number_card/number_card";
+import { PieChartCard } from "./pie_chart_card/pie_chart_card";
+
+export const items = [
+    {
+        id: "average_quantity",
+        description: "Average amount of t-shirt",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Average amount of t-shirt by order this month",
+            value: data.average_quantity,
+        })
+    },
+    {
+        id: "average_time",
+        description: "Average time for an order",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+            value: data.average_time,
+        })
+    },
+    {
+        id: "number_new_orders",
+        description: "New orders this month",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Number of new orders this month",
+            value: data.nb_new_orders,
+        })
+    },
+    {
+        id: "cancelled_orders",
+        description: "Cancelled orders this month",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Number of cancelled orders this month",
+            value: data.nb_cancelled_orders,
+        })
+    },
+    {
+        id: "amount_new_orders",
+        description: "amount orders this month",
+        Component: NumberCard,
+        props: (data) => ({
+            title: "Total amount of new orders this month",
+            value: data.total_amount,
+        })
+    },
+    {
+        id: "pie_chart",
+        description: "Shirt orders by size",
+        Component: PieChartCard,
+        size: 1,
+        props: (data) => ({
+            title: "Shirt orders by size",
+            values: data.orders_by_size,
+        })
+    }
+]