[IMP] awesome_dashboard: add and remove dashboard items

Author: macocianradu

awesome_dashboard/static/src/dashboard/configuration_dialog.js

@@ -0,0 +1,33 @@
+import { Component } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+import { CheckBox } from "@web/core/checkbox/checkbox";
+
+export class ConfigurationDialog extends Component {
+    static template = "awesome_dashboard.ConfigurationDialog"
+    static components = { Dialog, CheckBox }
+    static props = {
+        items: [Array],
+        close: [{}],
+        onApply: [Function]
+    }
+
+    setup() {
+        this.disabledElements = this.props.items.filter(item => !item.enabled)
+            .map(item => item.element.id)
+    }
+
+    onChange(id) {
+        let index = this.disabledElements.indexOf(id)
+        if(index === -1) {
+            this.disabledElements.push(id)
+            return;
+        }
+        this.disabledElements.splice(index, 1)
+    }
+
+    apply() {
+        localStorage.setItem('disabledElements', this.disabledElements)
+        this.props.onApply();
+        this.props.close()
+    }
+}

awesome_dashboard/static/src/dashboard/configuration_dialog.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="perserve">
+    <t t-name="awesome_dashboard.ConfigurationDialog">
+        <Dialog title="'Dashboard configuration dialog'">
+            <div class="d-flex flex-column">
+                <t t-foreach="props.items" t-as="item" t-key="item.element.id">
+                    <div class="d-inline-flex gap-2">
+                        <p><t t-esc="item.element.description" /></p>
+                        <CheckBox
+                            value="item.enabled"
+                            t-on-change="(_) => this.onChange(item.element.id)" />
+                    </div>
+                </t>
+            </div>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="apply" >
+                    Apply
+                </button>
+            </t>
+        </Dialog>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -6,8 +6,8 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboard_item";
-import { items } from "./dashboard_items";
 import { PieChart } from "./pie_chart/pie_chart";
+import { ConfigurationDialog } from "./configuration_dialog";
 
 
 class AwesomeDashboard extends Component {
@@ -17,12 +17,22 @@ class AwesomeDashboard extends Component {
     setup() {
         this.action = useService("action");
         this.statistics = useService("awesome_dashboard.statistics");
-        this.state = useState({stats: this.statistics});
+        this.state = useState({items: [], stats: this.statistics});
+        this.dialog = useService("dialog");
+        this.updateDashboard()
+    }
 
-        for(let item of items) {
-            registry.category("awesome_dashboard").add(item.id, item);
+    updateDashboard() {
+        let disabledElements = localStorage.getItem('disabledElements') || '';
+        if(disabledElements.includes(',')) {
+            disabledElements = disabledElements.split(',')
+        }
+        else{
+            disabledElements = [disabledElements]
         }
-        this.items = registry.category("awesome_dashboard").getAll();
+        this.state.items = registry.category("awesome_dashboard")
+            .getAll()
+            .filter(el => !disabledElements.some((e) => e == el.id ))
     }
 
     openCustomers() {
@@ -37,6 +47,23 @@ class AwesomeDashboard extends Component {
             views: [[false, 'list'], [false, 'form']]
         })
     }
+
+    customizeDashboard() {
+        let items = []
+        let all = registry.category("awesome_dashboard").getAll();
+        all.forEach(el => {
+            const enabled = this.state.items.some(item => item.id == el.id)
+            items.push({
+                element: el,
+                enabled: enabled
+            })
+        })
+
+        this.dialog.add(ConfigurationDialog, {
+            items: items,
+            onApply: this.updateDashboard.bind(this)
+        })
+    }
 }
 
 registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -6,9 +6,12 @@
         <t t-set-slot='layout-buttons'>
             <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" t-on-click="customizeDashboard">
+                <span class="fa fa-gear" />
+            </button>
         </t>
         <div class="d-flex p-4 flex-wrap">
-            <t t-foreach="items" t-as="item" t-key="item.id">
+            <t t-foreach="state.items" t-as="item" t-key="item.id">
                 <DashboardItem size="item.size || 1">
                     <t t-set="itemProp" t-value="item.props
                            ? item.props(state.stats)

awesome_dashboard/static/src/dashboard/dashboard_items.js

@@ -1,7 +1,8 @@
 import { NumberCard } from "./number_card";
+import { registry } from "@web/core/registry";
 import { PieChartCard } from "./pie_chart_card";
 
-export const items = [
+const items = [
     {
         id: "average_quantity",
         description: "Average amount of t-shirt",
@@ -63,3 +64,7 @@ export const items = [
         })
     },
 ]
+
+for(let item of items) {
+    registry.category("awesome_dashboard").add(item.id, item);
+}

awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js

@@ -4,7 +4,10 @@ import { loadJS } from "@web/core/assets"
 export class PieChart extends Component {
     static template = "awesome_dashboard.PieChart";
 
-    static props = {'data':{optional: false}, 'size': {type: Number, optional: true}}
+    static props = {
+        'data':{optional: false},
+        'size': {type: Number, optional: true}
+    }
 
     setup() {
         onWillStart(() => loadJS(["/web/static/lib/Chart/Chart.js"]));

awesome_owl/static/src/playground.js

@@ -14,7 +14,6 @@ export class Playground extends Component {
     }
 
     incrementSum() {
-        console.log('call')
         this.state.sum++
     }