[ADD] awesome_dashboard: Adding JS - from chapter 1 to chapter 5

Author: coder-odoo

awesome_dashboard/static/img/dashboard_bg.jpg

@@ -0,0 +1,13 @@
+import { Component } from "@odoo/owl";
+
+export class DashboardItem extends Component {
+    static template = "awesome_dashboard.dashboardItem";
+    static props = {
+        size: { type: Number, default: 1, optional: true }
+    };
+
+    get cardStyle() {
+        const width = 18 * this.props.size;
+        return `width: ${width}rem;`;
+    }
+}

awesome_dashboard/static/src/DashboardItem/dashboarditem.js

@@ -0,0 +1,11 @@
+.o_dashboard_item {
+    background: white;
+    border-radius: 10px;
+    padding: 16px;
+    margin: 8px;
+    opacity: 0.9;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}

awesome_dashboard/static/src/DashboardItem/dashboarditem.scss

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboardItem">
+        <div class="o_dashboard_item" t-att-style="cardStyle">
+            <t t-slot="default" />
+        </div>
+    </t>
+
+</templates>

awesome_dashboard/static/src/DashboardItem/dashboarditem.xml

@@ -1,8 +1,41 @@
-import { Component } from "@odoo/owl";
+import { Component, onWillStart } from "@odoo/owl";
 import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
+import { useService } from "@web/core/utils/hooks";
+import { DashboardItem } from "./DashboardItem/dashboarditem";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout, DashboardItem };
+
+    setup() {
+        this.actionService = useService("action");
+        this.statisticsService = useService("awesome_dashboard.statistics");
+
+        onWillStart(async () => {
+            const result = await this.statisticsService.loadStatistics();
+            this.average_quantity = result.average_quantity;
+            this.average_time = result.average_time;
+            this.nb_cancelled_orders = result.nb_cancelled_orders;
+            this.nb_new_orders = result.nb_new_orders;
+            this.total_amount = result.total_amount;
+        });
+
+    }
+
+    openCustomers() {
+        this.actionService.doAction("base.action_partner_form");
+    }
+
+    openLeads() {
+        this.actionService.doAction({
+            type: "ir.actions.act_window",
+            name: "Leads",
+            res_model: "crm.lead",
+            views: [[false, "list"], [false, "form"]],
+        });
+    }
+
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard.js

@@ -0,0 +1,22 @@
+.o_dashboard {
+    background-image: url("/awesome_dashboard/static/img/dashboard_bg.jpg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
+.o_dashboard_row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.o_header_dashboard_item {
+    font-size: 1.5em;
+}
+
+.o_average_quantity {
+    font-size: 2em;
+    color: #008528;
+    font-weight: bold;
+}

awesome_dashboard/static/src/dashboard.scss

@@ -2,7 +2,38 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+        <Layout className="'o_dashboard h-100'" display="{ controlPanel: {} }">
+            <button type="button" class="btn btn-primary m-3" t-on-click="openCustomers">Customers</button>
+            <button type="button" class="btn btn-primary m-3" t-on-click="openLeads">Leads</button>
+            
+            <div class="o_dashboard_row">
+                <DashboardItem>
+                    <p class="o_header_dashboard_item">Average amount of t-shirt by order this moth</p>
+                    <p class="o_average_quantity"><t t-esc="average_quantity"/></p>
+                </DashboardItem>
+
+                <DashboardItem>
+                    <p class="o_header_dashboard_item">Average time for an order to go from 'new' to 'send' r 'cancelled'</p>
+                    <p class="o_average_quantity"><t t-esc="average_time"/></p>
+                </DashboardItem>
+
+                <DashboardItem>
+                    <p class="o_header_dashboard_item">Number of new order this month</p>
+                    <p class="o_average_quantity"><t t-esc="nb_new_orders"/></p>
+                </DashboardItem>
+
+                <DashboardItem>
+                    <p class="o_header_dashboard_item">Number of new cancelled order this month</p>
+                    <p class="o_average_quantity"><t t-esc="nb_cancelled_orders"/></p>
+                </DashboardItem>
+
+                <DashboardItem>
+                    <p class="o_header_dashboard_item">Total amount of new orders this month</p>
+                    <p class="o_average_quantity"><t t-esc="total_amount"/></p>
+                </DashboardItem>
+
+            </div>
+        </Layout>
     </t>
 
 </templates>

awesome_dashboard/static/src/dashboard.xml

@@ -0,0 +1,17 @@
+import { registry } from "@web/core/registry";
+import { rpc } from "@web/core/network/rpc";
+import { memoize } from "@web/core/utils/functions";
+
+const loadStatistics = memoize(async () => {
+    return rpc("/awesome_dashboard/statistics", {});
+});
+
+export const statisticsService = {
+    start() {
+        return {
+            loadStatistics,
+        };
+    },
+};
+
+registry.category("services").add("awesome_dashboard.statistics", statisticsService);