vijan - Technical Training

.gitignore

@@ -53,7 +53,6 @@ coverage.xml
 
 # Translations
 *.mo
-*.pot
 
 # Django stuff:
 *.log

awesome_dashboard/static/src/DashboardItem/DashboardItem.js

@@ -0,0 +1,18 @@
+import { Component } from "@odoo/owl";
+
+export class DashboardItem extends Component {
+    static template = "awesome_dashboard.DashboardItem";
+    static props = {
+        slots: {
+            type :Object,
+            shape:{
+                default:Object
+            }
+        },
+        size: {
+            type: Number,
+            default: 1,
+            optional: true
+        }
+    }
+}

awesome_dashboard/static/src/DashboardItem/DashboardItem.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.DashboardItem">
+        <div class="card m-2 border-dark" t-attf-style='width: {{18*props.size}}px'>
+            <t t-slot="default" class="card-text"/>
+        </div>
+    </t>
+</templates>

awesome_dashboard/static/src/PieChart/PieChart.js

@@ -0,0 +1,45 @@
+import { loadJS } from "@web/core/assets";
+import { Component, onWillStart, useRef,onMounted,onPatched,onWillUnmount} from "@odoo/owl";
+
+export class PieChart extends Component 
+{
+    static template = "awesome_dashboard.PieChart"
+    static props = {
+        label : String,
+        data : Object
+    }
+    setup()
+    {
+        this.canvasRef = useRef("canvas");
+        onWillStart(()=> loadJS("/web/static/lib/Chart/Chart.js"))
+
+        onMounted(()=> {this.renderChart();});
+
+        onPatched(() =>{
+            this.chart.destroy();
+            this.renderChart();
+        });
+
+        onWillUnmount(()=> {this.chart.destroy();});
+    }
+
+    renderChart()
+    {
+        console.log(this.props.data)
+        console.log(this.props.label)
+        this.chart = new Chart(this.canvasRef.el,
+            {
+                type: 'doughnut',
+                data:{
+                    labels:Object.keys(this.props.data),
+                    datasets: [
+                        {
+                            data: Object.values(this.props.data),
+                            label: this.props.label
+                        }
+                    ]
+                }
+
+            });
+    }
+}

awesome_dashboard/static/src/PieChart/PieChart.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.PieChart">
+        <canvas t-ref="canvas"/>
+    </t>
+</templates>

awesome_dashboard/static/src/core/statistics.js

@@ -0,0 +1,14 @@
+import { registry } from "@web/core/registry";
+import { rpc } from "@web/core/network/rpc";
+import { memoize } from "@web/core/utils/functions";
+
+const statistics = {
+    dependencies: [],
+    start(env) {
+        return {
+            loadStatistics: memoize(() => rpc("/awesome_dashboard/statistics"))
+            };
+        }
+    };
+
+    registry.category("services").add("awsome_dashboard.statistics",statistics)

awesome_dashboard/static/src/dashboard.js

@@ -1,8 +1,38 @@
-import { Component } from "@odoo/owl";
+import { Component, onWillStart, useState} 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";
+import { PieChart } from "./PieChart/PieChart";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout , DashboardItem, PieChart};
+
+    setup()
+    {
+        this.action = useService("action");
+        const statistics = useService("awsome_dashboard.statistics")
+        onWillStart(async ()=> 
+        {
+           this.result = await statistics.loadStatistics(); 
+           console.log(this.result);
+        });
+    }
+    openCustomers()
+    {
+        this.action.doAction("base.action_partner_form")
+    }
+    openLeads()
+    {
+        this.action.doAction(({
+            type: 'ir.actions.act_window',
+            name: "All leads",
+            res_model: 'account.move',
+            views: [[0,'list'],[1,'form']]
+        }));
+    }
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
+

awesome_dashboard/static/src/dashboard.scss

@@ -0,0 +1,7 @@
+.o_dashboard{
+    background-color: rgb(255, 209, 122);
+
+}
+.o_text{
+    align-self: center;
+}

awesome_dashboard/static/src/dashboard.xml

@@ -1,8 +1,41 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
-
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+        <Layout display="{controlPanel: {}}" className="'o_dashboard h-100'">
+            <t t-set-slot="layout-buttons"> 
+                <div class="d-flex flex-warp">
+                    <button class="btn btn-primary" t-on-click="openCustomers">Customers</button>
+                    <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
+                </div>
+            </t>
+            <div class="d-flex flex-warp">
+                <DashboardItem size="50">
+                    <h2 class="card-text o_text"> Average amount of t-shirt by order this month</h2>
+                    <t t-esc="result.average_quantity"/>
+                </DashboardItem>
+                <DashboardItem size="50">
+                    <h2 class="card-text"> Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’</h2>
+                    <t t-esc="result.average_time"/>
+                </DashboardItem>
+                <DashboardItem size="25">
+                    <h2 class="card-text">Number of cancelled orders this month</h2>
+                    <t t-esc="result.nb_cancelled_orders"/>
+                </DashboardItem>
+                <DashboardItem size="25">
+                    <h2 class="card-text">Number of new orders this month</h2>
+                    <t t-esc="result.nb_new_orders"/>
+                </DashboardItem>
+                <DashboardItem size="75">
+                    <h2 class="card-text">Total amount of new orders this month</h2>
+                    <t t-esc="result.total_amount"/>
+                </DashboardItem>
+                <DashboardItem>Test</DashboardItem>
+            </div>
+            <DashboardItem size="35">
+                <PieChart data="result.orders_by_size" label="'Shirt by size'"/>
+            </DashboardItem>
+        </Layout>
+
     </t>
 
 </templates>

awesome_owl/controllers/controllers.py

@@ -1,6 +1,7 @@
 from odoo import http
 from odoo.http import request, route
 
+
 class OwlPlayground(http.Controller):
     @http.route(['/awesome_owl'], type='http', auth='public')
     def show_playground(self):

awesome_owl/static/src/TodoItem/TodoItem.js

@@ -0,0 +1,33 @@
+import { Component, useState } from "@odoo/owl";
+
+export class TodoItem extends Component 
+{
+    static template = 'awesome_owl.TodoItem';
+    static props = {
+        todo : {
+            type: Object, 
+            shape:{
+                id: {type : Number},
+                description: {type : String},
+                isCompleted: {type: Boolean}}
+            },
+
+        updateState : {
+            type: Function,
+        },
+
+        deleteTodo : {
+            type : Function,
+            optional: true
+        }
+    };
+
+    updateState(event)
+    {
+        this.props.updateState(this.props.todo.id);
+    }
+    deleteTodo(event)
+    {
+        this.props.deleteTodo(this.props.todo.id);
+    }
+}

awesome_owl/static/src/TodoItem/TodoItem.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.TodoItem">
+        <div class="m-2 p-2 border d-inline-block" t-att-class="{'text-muted text-decoration-line-through' : props.todo.isCompleted};">
+
+            <p>ID : <t t-esc="props.todo.id"/></p>
+            <p>Desc : <t t-esc="props.todo.description"/></p>
+            <input type="checkbox" t-on-click="updateState"/>
+            <span class="fa fa-remove" t-on-click="deleteTodo"/>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/TodoList/TodoList.js

@@ -0,0 +1,46 @@
+import { Component, useState } from "@odoo/owl";
+import { TodoItem } from "../TodoItem/TodoItem";
+import { useAutoFocus } from "../utils";
+
+export class TodoList extends Component 
+{
+    static template = 'awesome_owl.TodoList';
+    static components = { TodoItem };
+    static props = {};
+    setup()
+    {
+        this.todos = useState([]);
+        this.ids = 0;
+        useAutoFocus('todo_input');
+    }
+    addTodo(event)
+    {
+        if (event.type !== 'keyup' || event.keyCode !== 13 || event.target.value == "" )
+            {
+                return;
+            }
+        this.todos.push({id:this.ids++,description:event.target.value,isCompleted:false});
+        event.target.value = "";
+
+    }
+    updateTodo(id)
+    {
+        let selectedTodo = this.todos.find(todo => todo.id == id);
+        if(selectedTodo)
+            {
+                selectedTodo.isCompleted = !selectedTodo.isCompleted;
+            }
+
+    }
+    deleteTodo(id)
+    {
+        const selectedTodo = this.todos.findIndex(todo => todo.id == id);
+        if(selectedTodo >= 0)
+            {
+                this.todos.splice(selectedTodo, 1);
+            }
+
+
+    }
+
+}

awesome_owl/static/src/TodoList/TodoList.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.TodoList">
+        <input t-on-keyup="addTodo" t-ref="todo_input"/>
+        <t t-foreach="todos" t-as="todo" t-key="todo.id">
+            <TodoItem todo="todo" updateState.bind="updateTodo" deleteTodo.bind="deleteTodo"/> 
+        </t>
+    </t>
+</templates>

awesome_owl/static/src/card/card.js

@@ -0,0 +1,26 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.Card";
+    static props = {
+        title: String,
+        slots: {
+            type: Object,
+            shape: {
+                default:true
+            }
+        },
+        html: {type:String}
+    };
+
+    setup()
+    {
+        this.hide = useState({value:false});
+    }
+
+    hideToggle()
+    {
+        this.hide.value = ! this.hide.value;
+    }
+
+}

awesome_owl/static/src/card/card.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.Card">
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <span class="fa fa-window-minimize" t-on-click="hideToggle"/>
+            <div class="card-body">
+                <h5 class="card-title"><t t-esc="props.title"/></h5>
+                <p class="card-text" t-if="! hide.value">
+                    <t t-slot="default"/>
+                    <t t-out="props.html"/>
+                </p>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,22 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component 
+{
+    static template = 'awesome_owl.counter';
+    static props = {
+        onChange: {type : Function}
+    };
+    setup()
+    {
+        this.state = useState({value: 0});
+    }
+
+    increment()
+    {
+        this.state.value++;
+        if(this.props.onChange)
+            {
+                this.props.onChange();
+            }
+    }
+}

awesome_owl/static/src/counter/counter.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <div class="m-2 p-2 border d-inline-block">
+            <p>Counter : <t t-esc="state.value"/></p>
+            <button class='btn btn-primary' t-on-click='increment'>
+                Increment
+            </button>
+        </div>
+    </t>
+</templates>