[IMP] awsome_owl: Framework Finished Chapter 7-12

Author: VincentJanssen-Code

awesome_dashboard/static/src/dashboard/ChartCard/ChartCard.js

@@ -8,6 +8,6 @@ export class ChartCard extends Component {
     static props = {
         title: String,
         label : String,
-        data : Object,
+        data : {type : Object, optional: true},
     }
 }

awesome_dashboard/static/src/dashboard/NumberCard/NumberCard.js

@@ -3,7 +3,7 @@ export class NumberCard extends Component {
     static template = "awesome_dashboard.NumberCard";
     static components = { };
     static props = {
-        title: String,
-        value: Number
+        title: {type : String, optional: true},
+        value: { type: Number, optional: true}
     };
 }

awesome_dashboard/static/src/dashboard/PieChart/PieChart.js

@@ -1,16 +1,18 @@
 import { loadJS } from "@web/core/assets";
+import { useService } from "@web/core/utils/hooks";
 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
+        data : {type : Object, optional: true},
     }
     setup()
     {
         this.canvasRef = useRef("canvas");
+        this.action = useService("action");
         onWillStart(()=> loadJS("/web/static/lib/Chart/Chart.js"))
 
         onMounted(()=> {this.renderChart();});
@@ -36,8 +38,52 @@ export class PieChart extends Component
                             label: this.props.label
                         }
                     ]
-                }
+                },
+                options: {
+                    responsive: true,
+                    onClick: (e) =>{
+                        const activePoints = this.chart.getElementsAtEventForMode(e, 'nearest', {
+                        intersect: true
+                    }, false);
+                    if (activePoints.length > 0) {
+                        const index = activePoints[0].index;
+                        const label = this.chart.data.labels[index];
+                        const value = this.chart.data.datasets[0].data[index];
+                        this.onClick(label)
+                    }
+                    }
+                    // events: ['click'],
+                },
+                // plugins: [{
+                //     id: 'custome_plugin',
+                //     afterEvent(chart, args, pluginOptions)
+                //     { 
+                //         // this.onClick(chart.tooltip.title)
+                //         console.log(args);
+                //         import { useService } from "@web/core/utils/hooks";
+                //         this.action = useService("action");
+                //         // this.action.doAction(({
+                //         //     type: 'ir.actions.act_window',
+                //         //     name: "All leads",
+                //         //     res_model: 'account.move',
+                //         //     views: [[0,'list'],[1,'form']]
+                //         // }));
+                //     }
+                // }]
 
             });
+
+    }
+    onClick(title)
+    {
+        this.action.doAction(({
+            type: 'ir.actions.act_window',
+            name: "Sales Order",
+            res_model: 'sale.order',
+            //domain: [["order_line.product_id.name", "=", "Shirt"]],
+            domain: [["order_line.product_id.product_template_variant_value_ids.product_attribute_value_id.display_name", "=", title]],
+            views: [[0,'list'],[1,'form']]
+        }));
     }
+
 }

awesome_dashboard/static/src/dashboard/SettingsDialog/SettingsDialog.js

@@ -1,18 +1,38 @@
-import { Component} from "@odoo/owl";
+import { Component, useState} from "@odoo/owl";
 import { Dialog } from "@web/core/dialog/dialog";
+import { registry }  from "@web/core/registry";
+import { browser } from "@web/core/browser/browser";
+import {CheckBox} from "@web/core/checkbox/checkbox";
 
 export class SettingsDialog extends Component
 {
     static template = "awesome_dashboard.SettingsDialog";
-    static components = {Dialog}
-    static props = {}
+    static components = {Dialog, CheckBox}
+    static props = ['close','disabled','items','OnChange'];
 
     setup()
     {
-        console.log("dialogue open");
+        console.log(this.props.disabled);
+        this.items = useState(this.props.items.map((item) =>
+            {
+                return {
+                    ...item,
+                    enabled: !this.props.disabled.includes(item.id),
+                }
+            }))
     }
     done()
     {
         this.props.close();
     }
+    onChange(state, item)
+    {
+        item.enabled = state;
+        const updateDisabled = Object.values(this.items).filter(
+            (item) => !item.enabled
+        ).map((item) => item.id)
+
+        browser.localStorage.setItem("disabledDashboardItems",updateDisabled);
+        this.props.OnChange(updateDisabled);
+    }
 }

awesome_dashboard/static/src/dashboard/SettingsDialog/SettingsDialog.xml

@@ -1,9 +1,18 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
     <t t-name="awesome_dashboard.SettingsDialog">
-        <div height="20">
-        <h1> Test Dialogue</h1>
-        <button t-on-click="done">Done</button>
-        </div>
+        <Dialog title="Settings">
+            
+            <t t-foreach="items" t-as="item" t-key="item.id">
+                <div>
+                    <CheckBox value="item.enabled" onChange="(ev) =>this.onChange(ev,item)">
+                        <t t-esc="item.description"/>
+                    </CheckBox>
+                </div>
+            </t>
+            <t t-set-solt="footer">
+                <button class="btn btn-primary" t-on-click="done">Done</button>
+            </t>
+        </Dialog>
     </t>
 </templates>

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -1,10 +1,12 @@
+import {_t } from "@web/core/l10n/translation";
 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";
 import { SettingsDialog } from "./SettingsDialog/SettingsDialog";
+import { browser } from "@web/core/browser/browser";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
@@ -16,6 +18,9 @@ class AwesomeDashboard extends Component {
         this.result = useState(useService("awesome_dashboard.statistics"));
         this.items = registry.category("awesome_dashboard").getAll();
         this.dialog = useService("dialog");
+        this.state = useState({disabledItems : browser.localStorage.getItem("disabledDashboardItems")?.split(",")||[]});
+        this.Customer = _t("Customer");
+        this.Leads = _t("Leads");
 
     }
     openCustomers()
@@ -33,7 +38,15 @@ class AwesomeDashboard extends Component {
     }
     openSettings()
     {
-        this.dialog.add(SettingsDialog, {})
+        this.dialog.add(SettingsDialog, {
+            disabled:this.state.disabledItems,
+            items:this.items,
+            OnChange:this.updateSettings.bind(this),
+        })
+    }
+    updateSettings(disabledItems)
+    {
+        this.state.disabledItems = disabledItems;
     }
 }
 

awesome_dashboard/static/src/dashboard/dashboard.scss

@@ -4,4 +4,8 @@
 }
 .o_text{
     align-self: center;
-}
+}
+.o_settings_text
+{
+    padding-left: 15px;
+}

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -4,8 +4,8 @@
         <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>
+                    <button class="btn btn-primary" t-on-click="openCustomers"><t t-esc="Customer"/></button>
+                    <button class="btn btn-primary" t-on-click="openLeads"><t t-esc="Leads"/></button>
                 </div>
             </t>
             <t t-set-slot="control-panel-additional-actions">
@@ -15,7 +15,7 @@
             </t>
             <div class="flex-d flex-warp">
                <t t-foreach="items" t-as="item" t-key="item.id">
-                    <DashboardItem size="item.size || 10">
+                    <DashboardItem t-if="!state.disabledItems.includes(item.id)" size="item.size || 10">
                         <t t-set="itemProp" t-value="item.props ? item.props(result) : {'data': result}"/>
                         <t t-component="item.Component" t-props="itemProp" />
                     </DashboardItem>

awesome_dashboard/static/src/dashboard/dashboard_items.js

@@ -1,65 +1,66 @@
+import { _t } from "@web/core/l10n/translation";
 import { ChartCard } from "./ChartCard/ChartCard";
 import { NumberCard } from "./NumberCard/NumberCard";
 import { registry } from "@web/core/registry";
 
 const items = [
     {
         id:"avg_amount",
-        description: "Average amount of t-shirt by order this month",
+        description: _t("Average amount of t-shirt by order this month"),
         Component : NumberCard,
         size: 35,
         props: (data) => ({
-            title: "Average amount of t-shirt by order this month",
+            title: _t("Average amount of t-shirt by order this month"),
             value: data.average_quantity,
         })
     },
     {
         id:"avg_time",
-        description: "Average time for an order",
+        description: _t("Average time for an order"),
         Component : NumberCard,
         size: 35,
         props: (data) => ({
-            title: "Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’",
+            title: _t("Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’"),
             value: data.average_time
         })
     },
     {
         id:"nb_cancelled_orders",
-        description: "Number of cancelled orders this month",
+        description: _t("Number of cancelled orders this month"),
         Component : NumberCard,
         size: 25,
         props: (data) => ({
-            title: "Number of cancelled orders this month",
+            title: _t("Number of cancelled orders this month"),
             value: data.nb_cancelled_orders
         })
     },
     {
         id:"nb_new_orders",
-        description: "Number of new orders this month",
+        description: _t("Number of new orders this month"),
         Component : NumberCard,
         props: (data) => ({
-            title: "Number of new orders this month",
+            title: _t("Number of new orders this month"),
             value: data.nb_new_orders
         })
     },
     {
         id:"total_amount",
-        description: "Total amount of new orders this month",
+        description: _t("Total amount of new orders this month"),
         Component : NumberCard,
         size: 45,
         props: (data) => ({
-            title: "Total amount of new orders this month",
+            title: _t("Total amount of new orders this month"),
             value: data.total_amount
         })
     },
     {
         id:"orders_by_size",
-        description: "Shirt by size",
+        description: _t("Shirt by size"),
         Component : ChartCard,
         size: 25,
         props: (data) => ({
-            title: "Shirt by size",
-            label : "Shirt by size",
+            title: _t("Shirt by size"),
+            label : _t("Shirt by size"),
             data : data.orders_by_size,
         })
     },