[IMP] awesome_owl: add counter component as sub component to playground

awesome_dashboard/static/src/dashboard.js

@@ -1,10 +1,32 @@
-/** @odoo-module **/
-
-import { Component } 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";
+import { DashboardItem } from "./dashboarditem";
+import { PieChart } from "./piechart";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout, DashboardItem, PieChart };
+
+    setup() {
+        this.action = useService("action");
+        this.statistics = useState(useService("awesome_dashboard.statistics"));
+    }
+
+    openCustomersView() {
+        this.action.doAction("base.action_partner_form");
+    }
+
+    async openLeadsView() {
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            name: ("Leads"),
+            target: "current",
+            res_model: "crm.lead",
+            views: [[false, "list"], [false, "form"]],
+        });
+    }
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard.scss

@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: rgb(234, 243, 246);
+}

awesome_dashboard/static/src/dashboard.xml

@@ -2,7 +2,55 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+        <button t-on-click="openCustomersView">Customers</button>
+        <button t-on-click="openLeadsView">Leads</button>
+        <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">
+            <DashboardItem size="2">
+                <div style="text-align: center;">
+                    <h4>Number of new orders this month</h4>
+                    <h3 style="color: green;">
+                        <t t-esc="this.statistics.nb_new_orders"/>
+                    </h3>
+                </div>
+            </DashboardItem>
+            <DashboardItem size="1">
+                <div style="text-align: center;">
+                    <h4>Number of cancelled orders this month</h4>
+                    <h3 style="color: green;">
+                        <t t-esc="this.statistics.nb_cancelled_orders"/>
+                    </h3>
+                </div>
+            </DashboardItem>
+            <DashboardItem size="1">
+                <div style="text-align: center;">
+                    <h4>Average amount of t-shirt by order this month</h4>
+                    <h3 style="color: green;">
+                        <t t-esc="this.statistics.average_quantity"/>
+                    </h3>
+                </div>
+            </DashboardItem>
+            <DashboardItem size="2">
+                <div style="text-align: center;">
+                    <h4>Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’</h4>
+                    <h3 style="color: green;">
+                        <t t-esc="this.statistics.average_time"/>
+                    </h3>
+                </div>
+            </DashboardItem>
+            <DashboardItem size="3">
+                <div style="text-align: center;">
+                    <h4>Total amount of new orders this month</h4>
+                    <h3 style="color: green;">
+                        <t t-esc="this.statistics.total_amount"/>
+                    </h3>
+                </div>
+            </DashboardItem>
+            <DashboardItem size="2">
+                <div style="text-align: center;">
+                    <PieChart data="this.statistics"/>
+                </div>
+            </DashboardItem>
+        </Layout>
     </t>
 
 </templates>

awesome_dashboard/static/src/dashboarditem.js

@@ -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,
+        },
+        slots: Object,
+    };
+}

awesome_dashboard/static/src/dashboarditem.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboarditem">
+        <div class="card d-inline-block m-2" t-attf-style="width: {{18*props.size}}rem;">
+            <div class="card-body">
+                <t t-slot="default"/>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_dashboard/static/src/piechart.js

@@ -0,0 +1,34 @@
+import { Component, onWillStart, onMounted, onWillUnmount, useRef } from "@odoo/owl"
+import { loadJS } from "@web/core/assets"
+import { getColor } from "@web/core/colors/colors"
+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.piechart";
+    static props = {
+        data: Object,
+    }
+
+    setup() {
+        this.canvasRef = useRef("canvas");
+        onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js"));
+        onMounted(() => this.renderChart());
+        onWillUnmount(() => this.chart.destroy());
+    }
+
+    renderChart() {
+        const chartLabels = Object.keys(this.props.data.orders_by_size)
+        this.chart = new Chart(this.canvasRef.el, {
+            type: 'pie',
+            data: {
+                labels: chartLabels,
+                datasets: [
+                    {
+                        label: "Sizes Chart",
+                        data: Object.values(this.props.data.orders_by_size),
+                        backgroundColor: chartLabels.map((_, index) => getColor(index)),
+                    }
+                ]
+            }
+        });
+    }
+}

awesome_dashboard/static/src/piechart.xml

@@ -0,0 +1,7 @@
+<?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/statistics_service.js

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

awesome_owl/static/src/card.js

@@ -0,0 +1,17 @@
+import { Component, useState } from "@odoo/owl"
+
+export class Card extends Component {
+    static template = "awesome_owl.card";
+    static props = {
+        title: String,
+        slots: Object,
+    };
+
+    setup() {
+        this.state = useState({ isOpen: true });
+    }
+
+    toggleState() {
+        this.state.isOpen = !this.state.isOpen;
+    }
+}

awesome_owl/static/src/card.xml

@@ -0,0 +1,17 @@
+<?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="border:1px solid black; width: 18rem;">
+            <div class="card-body">
+                <h5 class="card-title">
+                    <t t-esc="props.title"/>
+                    <button style="border:0.5px solid purple;" class="btn btn-primary" t-on-click="toggleState">Hide/Show</button>
+                </h5>
+                <p class="card-text" t-if="state.isOpen">
+                    <t t-slot="default"/>
+                </p>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/counter.js

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

awesome_owl/static/src/counter.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <div style="border:1px solid black; width: 10rem;">Hello World
+            <p>Counter: <t t-esc="state.value"/>
+            </p>
+            <button style="border:0.5px solid black;" class="btn btn-primary" t-on-click="increment">Increment</button>
+        </div>
+    </t>
+
+</templates>

awesome_owl/static/src/playground.js

@@ -1,7 +1,20 @@
-/** @odoo-module **/
-
-import { Component } from "@odoo/owl";
+import { Component, useState, markup } from "@odoo/owl";
+import { Counter } from "./counter";
+import { Card } from "./card";
+import { TodoList } from "./todolist";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+    static components = { Counter, Card, TodoList };
+
+    setup() {
+        this.state = useState({ sum: 0 });
+    }
+
+    card1Content = markup("<div>Some Text in div Tag</div>");
+    card2Content = "<div>Some Text in div Tag</div>";
+
+    incrementSum() {
+        this.state.sum++;
+    }
 }

awesome_owl/static/src/playground.xml

@@ -2,9 +2,15 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
-        </div>
+        <p>Counters Sum: <t t-esc="state.sum"/>
+        </p>
+        <Card title="'Card 1'">
+            <Counter onChange.bind="incrementSum"></Counter>
+        </Card>
+        <Card title="'Card 2'">
+            <Counter onChange.bind="incrementSum"></Counter>
+        </Card>
+        <TodoList/>
     </t>
 
 </templates>

awesome_owl/static/src/todoitem.js

@@ -0,0 +1,10 @@
+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.todoitem";
+    static props = {
+        todo: Object,
+        onToggleState: Function,
+        onRemoveTodo: Function,
+    }
+}

awesome_owl/static/src/todoitem.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todoitem">
+        <input type="checkbox" t-on-change="() => props.onToggleState(props.todo.id)"/>
+        <div t-att-class="{'text-muted': props.todo.isCompleted, 'text-decoration-line-through': props.todo.isCompleted}">
+            <t t-out="props.todo.id + '. ' + props.todo.description"/>
+        </div>
+        <span t-on-click="() => props.onRemoveTodo(props.todo.id)" class="fa fa-remove"></span>
+    </t>
+
+</templates>

awesome_owl/static/src/todolist.js

@@ -0,0 +1,38 @@
+import { Component, useState } from "@odoo/owl";
+import { TodoItem } from "./todoitem";
+import { useAutofocus } from "./utils";
+
+export class TodoList extends Component {
+    static template = "awesome_owl.todolist";
+    static components = { TodoItem };
+
+    setup() {
+        this.state = useState({
+            todos: [],
+            idCounter: 0,
+        });
+        useAutofocus("input_todo");
+    };
+
+    addTodo(ev) {
+        if (ev.keyCode === 13) {
+            this.state.idCounter++
+            this.state.todos.push({
+                "id": this.state.idCounter, "description": ev.target.value, "isCompleted": false
+            });
+            ev.target.value = "";
+        }
+    };
+
+    toggleState(todoId) {
+        const todo = this.state.todos.find(todo => todo.id === todoId);
+        todo.isCompleted = !todo.isCompleted;
+    }
+
+    removeTodo(todoId) {
+        const index = this.state.todos.findIndex(todo => todo.id === todoId);
+        if (index >= 0) {
+            this.state.todos.splice(index, 1);
+        }
+    }
+}

awesome_owl/static/src/todolist.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.todolist">
+        <br/>
+        <input t-ref="input_todo" t-on-keyup="ev => this.addTodo(ev)" type="text" placeholder="Enter a new task"/>
+        <t t-foreach="state.todos" t-as="todo" t-key="todo.id">
+            <div style="border: 1px solid black">
+                <TodoItem todo="todo" onToggleState.bind="toggleState" onRemoveTodo.bind="removeTodo"/>
+            </div>
+        </t>
+    </t>
+
+</templates>

awesome_owl/static/src/utils.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "@odoo/owl";
+
+export function useAutofocus(refName) {
+  let ref = useRef(refName);
+  useEffect(
+    (el) => el && el.focus(),
+    () => [ref.el]
+  );
+}