[IMP] awesome_dashboard: reactive use

Author: baje-odoo

awesome_dashboard/__manifest__.py

@@ -24,7 +24,12 @@
     '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.js

@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { Component, onWillStart } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
@@ -13,13 +13,10 @@ class AwesomeDashboard extends Component {
 
     setup(){
         this.action = useService("action");
-        this.statisticsService = useService("awesome_dashboard.statistics");
+        this.statistics = useState(useService("awesome_dashboard.statistics"));
         this.display = {
             controlPanel: {},
         };
-        onWillStart(async() => {
-            this.statistics = await this.statisticsService.getStatistics();
-        })
     }
 
     openCustomerView() {
@@ -39,4 +36,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.xml

@@ -7,7 +7,7 @@
                 <button class="btn btn-primary" t-on-click="openCustomerView">Customers</button>
                 <button class="btn btn-primary" t-on-click="openLeadView">Leads</button>
             </t>
-            <div class="d-flex flex-wrap">
+            <div class="d-flex flex-wrap" t-if="statistics.isReady">
                 <DashboardItem>
                     Average amount of t-shirt by order this month
                     <div class="fs-1 fw-bold text-success text-center">

awesome_dashboard/static/src/dashboard_loader.js

@@ -0,0 +1,10 @@
+import { registry } from "@web/core/registry";
+import { LazyComponent } from "@web/core/assets";
+import { Component } from "@odoo/owl";
+
+class AwesomeDashboardLoader extends Component {
+    static template = "awesome_dashboard.AwesomeDashboardLoader";
+    static components = { LazyComponent };
+    static props = {};
+}
+registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboardLoader);

awesome_dashboard/static/src/dashboard_loader.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.AwesomeDashboardLoader">
+        <LazyComponent bundle="'awesome_dashboard.dashboard'" Component="'AwesomeDashboard'" props="props"/>
+    </t>
+</templates>

awesome_dashboard/static/src/pie_chart.js

@@ -1,6 +1,6 @@
 import { loadJS } from "@web/core/assets";
 import { getColor } from "@web/core/colors/colors";
-import { Component, onWillStart, onWillUnmount, onMounted, useRef } from "@odoo/owl";
+import { Component, onWillStart, onWillUnmount, onMounted, onWillUpdateProps, useRef } from "@odoo/owl";
 
 export class PieChart extends Component {
     static template = "awesome_dashboard.PieChart";
@@ -15,6 +15,10 @@ export class PieChart extends Component {
         onMounted(() => {
             this.renderChart();
         });
+        onWillUpdateProps(() => {
+            this.chart.destroy();
+            this.renderChart();
+        })
         onWillUnmount(() => {
             this.chart.destroy();
         });
@@ -38,4 +42,3 @@ export class PieChart extends Component {
         });
     }
 }
-

awesome_dashboard/static/src/statistics_service.js

@@ -1,16 +1,20 @@
 import { rpc } from "@web/core/network/rpc";
 import { registry } from "@web/core/registry";
-import { memoize } from "@web/core/utils/functions";
+import { reactive } from "@odoo/owl";
 
 const statisticsService = {
-    async: [
-        "getStatistics",
-    ],
     start(){
+        const statistics = reactive({ isReady: false });
 
-        return{
-            getStatistics: memoize(() => rpc("/awesome_dashboard/statistics"))
-        };
+        async function getData(){
+            const updates = await rpc("/awesome_dashboard/statistics");
+            Object.assign(statistics, updates, { isReady: true });
+        }
+
+        setInterval(getData, 1000*60*10);
+        getData();
+
+        return statistics;
     },
 };