[IMP] awesome_dashboard: Chapt2-9. make dashboard generic + some fixes

awesome_dashboard/__manifest__.py

@@ -1,4 +1,3 @@
-# -*- coding: utf-8 -*-
 {
     'name': "Awesome Dashboard",
 

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -5,15 +5,19 @@ 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 components = { Layout, DashboardItem };
 
     setup() {
         this.action = useService("action");
         this.statistics = useState(useService("awesome_dashboard.statistics"));
+        this.display = {
+            controlPanel: {},
+        };
+        this.items = items;
     }
 
     async openCustomersView() {

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -7,41 +7,14 @@
                 <button class="btn btn-primary" t-on-click="openCustomers">Customers</button>
                 <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
             </t>
-            <DashboardItem>
-                <h3>Average amount of t-shirt by order this month</h3>
-                <div class="text-center">
-                    <h1 style="color: green"><t t-esc="this.statistics.average_quantity"/></h1>
-                </div>
-            </DashboardItem>
-            <DashboardItem>
-                <h3>Average time for an order to go from 'new' to 'sent' or 'canceled'</h3>
-                <div class="text-center">
-                    <h1 style="color: green"><t t-esc="this.statistics.average_time"/></h1>
-                </div>
-            </DashboardItem>
-            <DashboardItem size="4">
-                <h3>Number of new orders this month</h3>
-                <div class="text-center">
-                    <h1 style="color: green"><t t-esc="this.statistics.nb_new_orders"/></h1>
-                </div>
-            </DashboardItem>
-            <DashboardItem>
-                <h3>Number of cancelled orders this month</h3>
-                <div class="text-center">
-                    <h1 style="color: green"><t t-esc="this.statistics.nb_cancelled_orders"/></h1>
-                </div>
-            </DashboardItem>
-            <DashboardItem>
-                <h3>Total amount of new orders this month</h3>
-                <div class="text-center">
-                    <h1 style="color: green"><t t-esc="this.statistics.total_amount"/></h1>
-                </div>
-            </DashboardItem>
 
-            <DashboardItem size="1" t-if="statistics.isReady">
-                Shirt orders by size
-                <PieChart data="statistics['orders_by_size']" label="'Shirt orders by size'"/>
-            </DashboardItem>
+            <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(statistics) : {'data': statistics}"/>
+                   <t t-component="item.Component" t-props="itemProp" />
+                </DashboardItem>
+            </t>
+
         </Layout>
     </t>
 

awesome_dashboard/static/src/dashboard/dashboard_items.js

@@ -0,0 +1,62 @@
+/** @odoo-module */
+
+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: 2,
+        props: (data) => ({
+            title: "Shirt orders by size",
+            values: data.orders_by_size,
+        })
+    }
+]

awesome_dashboard/static/src/dashboard/number_card/number_card.js

@@ -0,0 +1,15 @@
+/** @odoo-module */
+
+import { Component } from "@odoo/owl";
+
+export class NumberCard extends Component {
+    static template = "awesome_dashboard.NumberCard";
+    static props = {
+        title: {
+            type: String,
+        },
+        value: {
+            type: Number,
+        }
+    }
+}

awesome_dashboard/static/src/dashboard/number_card/number_card.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.NumberCard" owl="1">
+        <t t-esc="props.title"/>
+        <div class="fs-1 fw-bold text-success text-center">
+            <t t-esc="props.value"/>
+        </div>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.js

@@ -0,0 +1,17 @@
+/** @odoo-module */
+
+import { Component } from "@odoo/owl";
+import { PieChart } from "../pie_chart/pie_chart";
+
+export class PieChartCard extends Component {
+    static template = "awesome_dashboard.PieChartCard";
+    static components = { PieChart }
+    static props = {
+        title: {
+            type: String,
+        },
+        values: {
+            type: Object,
+        },
+    }
+}

awesome_dashboard/static/src/dashboard/pie_chart_card/pie_chart_card.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.PieChartCard" owl="1">
+        <t t-esc="props.title"/>
+        <PieChart data="props.values" label="''"/>
+    </t>
+</templates>

awesome_owl/static/src/card/card.js

@@ -3,7 +3,7 @@
 import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
-    static template = "awesome_owl.card";
+    static template = "awesome_owl.Card";
 
     static props = {
         title: {type: String},

awesome_owl/static/src/card/card.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_owl.card">
+    <t t-name="awesome_owl.Card">
         <div class="card d-inline-block m-2" style="width: 18rem;">
             <div class="card-body">
                 <h5 class="card-title" t-esc="props.title" t-on-click="this.toggleContent"></h5>

awesome_owl/static/src/counter/counter.js

@@ -3,7 +3,7 @@
 import { Component, useState } from "@odoo/owl";
 
 export class Counter extends Component {
-    static template = "awesome_owl.counter";
+    static template = "awesome_owl.Counter";
 
     static props = {
         onChange: {type: Function, optional: true}

awesome_owl/static/src/counter/counter.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_owl.counter">
+    <t t-name="awesome_owl.Counter">
         <p>Counter: <t t-esc="state.value"/></p>
         <button class="btn btn-primary" t-on-click="increment">Increment</button>
     </t>

awesome_owl/static/src/playground.js

@@ -6,7 +6,7 @@ import { Card } from "./card/card";
 import { TodoList } from "./todo/todo_list/todo_list";
 
 export class Playground extends Component {
-    static template = "awesome_owl.playground";
+    static template = "awesome_owl.Playground";
     static components = { Counter, Card, TodoList };
 
     html = markup(`

awesome_owl/static/src/playground.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_owl.playground">
+    <t t-name="awesome_owl.Playground">
         <div class="p-3">
             hello world
         </div>

awesome_owl/static/src/todo/todo_item/todo_item.js

@@ -3,7 +3,7 @@
 import { Component, useState } from "@odoo/owl";
 
 export class TodoItem extends Component {
-    static template = "awesome_owl.todo_item";
+    static template = "awesome_owl.TodoItem";
 
     static props = {
         todo: {type: { id: Number, description: String, isCompleted: Boolean }},

awesome_owl/static/src/todo/todo_item/todo_item.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_owl.todo_item">
+    <t t-name="awesome_owl.TodoItem">
         <input type="checkbox" value="props.todo.isCompleted" t-on-change="() => props.toggleState(props.todo.id)"/>
         <span t-att-class="{'text-muted text-decoration-line-through': props.todo.isCompleted}">
             <t t-esc="props.todo.id"/>. <t t-esc="props.todo.description"/>

awesome_owl/static/src/todo/todo_list/todo_list.js

@@ -5,20 +5,20 @@ import { TodoItem } from "../todo_item/todo_item";
 import { useAutoFocus } from "../../utils";
 
 export class TodoList extends Component {
-    static template = "awesome_owl.todo_list";
+    static template = "awesome_owl.TodoList";
     static components = { TodoItem };
 
     setup() {
         this.todos = useState([]);
-        this.count = useState({ value: 0 });
+        this.count = 0;
         useAutoFocus("todo_input");
     }
 
     addTodo(event) {
         if (event.keyCode === 13 && event.target.value) {
-            this.count.value ++;
+            this.count ++;
             this.todos.push({
-                id: this.count.value,
+                id: this.count,
                 description: event.target.value,
                 isCompleted: false
             });

awesome_owl/static/src/todo/todo_list/todo_list.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_owl.todo_list">
+    <t t-name="awesome_owl.TodoList">
         <input t-on-keyup="addTodo" placeholder="Add a todo" t-ref="todo_input"/>
         <t t-foreach="this.todos" t-as="todo" t-key="todo.id">
             <TodoItem todo="todo" toggleState="toggleState.bind(this)" removeTodo="removeTodo.bind(this)"/>

awesome_owl/static/src/utils.js

@@ -1,9 +1,9 @@
 /** @odoo-module **/
 
-import { useRef, onMounted } from "@odoo/owl";
+import { onMounted, useRef } from "@odoo/owl";
 
-function useAutoFocus(element_ref){
-    let inputRef = useRef(element_ref);
+function useAutoFocus(elementRef){
+    let inputRef = useRef(elementRef);
     onMounted(() => {
         inputRef.el.focus();
     });

estate_account/models/estate_property.py

@@ -2,14 +2,14 @@
 
 from odoo import models, Command
 
+
 class EstateProperty(models.Model):
     _inherit = "estate.property"
 
     def action_sold(self):
         values = {
             'move_type': 'out_invoice',
             'partner_id': self.buyer_id.id,
-            #'journal_id': self.env['account.journal'].search([('type', '=', 'sale')], limit=1).id
             'invoice_line_ids': [
                 Command.create({
                     'name': self.name + ' - 6% down payment',