[IMP] awesome_dashboard: use a config dialog

Chapter 2: Build a dashboard (11)
- Use a dict for the dashboard data instead of a list
- Use a custom dialog to list the configurations and allow the user to disable/enable them

Author: Lud0do1202

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -1,19 +1,25 @@
 /** @odoo-module **/
 
-import { Component, useState } from "@odoo/owl";
+import { Component, useState, useEffect } from "@odoo/owl";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { AwesomeDashboardItem } from "@awesome_dashboard/dashboard/dashboard_item";
 import { registry } from "@web/core/registry";
+import { CogMenu } from "@web/search/cog_menu/cog_menu";
+import { AwesomeDashboardConfigDialog } from "@awesome_dashboard/dashboard/dialogs/dashboard_config_dailog";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout, AwesomeDashboardItem };
+    static components = { Layout, AwesomeDashboardItem, CogMenu };
 
     setup() {
         this.action = useService("action");
         this.stats = useState(useService("awesome_dashboard_statistics"));
-        this.items = registry.category("awesome_dashboard").get("data");
+        const config = JSON.parse(localStorage.getItem("awesome_dashboard_config"));
+        const data = registry.category("awesome_dashboard").get("data");
+        this.setActives(config, data);
+        this.items = useState({ data });
+        this.dialog = useService("dialog");
     }
 
     onClickCustomers() {
@@ -35,6 +41,24 @@ class AwesomeDashboard extends Component {
             views: [[false, "list"]],
         });
     }
+
+    setActives(ref, toUpdate) {
+        for (const key in ref) {
+            const entry = ref[key];
+            const dataItem = toUpdate[key];
+            if (dataItem) {
+                dataItem.active = entry.active;
+            }
+        }
+    }
+
+    openConfiguration() {
+        this.dialog.add(AwesomeDashboardConfigDialog, {
+            onConfirm: (configItems) => {
+                this.setActives(configItems, this.items.data);
+            },
+        });
+    }
 }
 
 registry.category("lazy_components").add("awesome_dashboard.AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        <Layout display="{ controlPanel: {} }" className="'o_dashboard h-100'">
+        <Layout display="{ controlPanel: {} }" className="'o_dashboard o_awesome_dashboard h-100'">
             <t t-set-slot="layout-buttons">
                 <div class="o_list_buttons d-flex gap-1 d-empty-none align-items-baseline" role="toolbar" aria-label="Main actions">
                     <button type="button" class="btn btn-primary" t-on-click="onClickCustomers">
@@ -13,9 +13,16 @@
                     </button>
                 </div>
             </t>
+            <t t-set-slot="control-panel-additional-actions">
+                <button t-on-click="openConfiguration" class="btn p-0 ms-1 border-0">
+                    <i class="fa fa-cog"></i>
+                </button>
+            </t>
             <div class="o_dashboard_items">
-                <t t-foreach="items" t-as="item" t-key="item.id">
-                    <AwesomeDashboardItem size="item.size">
+                <t t-foreach="Object.entries(items.data)" t-as="entry" t-key="entry[0]">
+                    <t t-set="key" t-value="entry[0]"/>
+                    <t t-set="item" t-value="entry[1]"/>
+                    <AwesomeDashboardItem t-if="item.active" size="item.size">
                         <t t-component="item.Component" t-props="item.props(stats)" />
                     </AwesomeDashboardItem>
                 </t>

awesome_dashboard/static/src/dashboard/data/dashboard_data.js

@@ -4,52 +4,51 @@ import { registry } from "@web/core/registry";
 import { PieChartCard } from "@awesome_dashboard/dashboard/cards/pie_chart_card";
 import { NumberCard } from "@awesome_dashboard/dashboard/cards/number_card";
 
-registry.category("awesome_dashboard").add("data", [
-    {
-        id: "average_quantity",
+registry.category("awesome_dashboard").add("data", {
+    average_quantity: {
         Component: NumberCard,
         props: (stats) => ({
             title: "Average amount of t-shirt by order this month",
             value: stats.data.average_quantity,
         }),
+        active: true,
     },
-    {
-        id: "average_time",
+    average_time: {
         Component: NumberCard,
         props: (stats) => ({
             title: "Average time to deliver an order this month",
             value: stats.data.average_time,
         }),
+        active: true,
     },
-    {
-        id: "nb_cancelled_orders",
+    nb_cancelled_orders: {
         Component: NumberCard,
         size: 2.5,
         props: (stats) => ({
             title: "Number of cancelled orders this month",
             value: stats.data.nb_cancelled_orders,
         }),
+        active: true,
     },
-    {
-        id: "nb_new_orders",
+    nb_new_orders: {
         Component: NumberCard,
         size: 2.5,
         props: (stats) => ({
             title: "Number of new orders this month",
             value: stats.data.nb_new_orders,
         }),
+        active: true,
     },
-    {
-        id: "total_amount",
+    total_amount: {
         Component: NumberCard,
         size: 2.5,
         props: (stats) => ({
             title: "Total amount of orders this month",
             value: stats.data.total_amount,
         }),
+        active: true,
     },
-    {
-        id: "orders_by_size",
+    orders_by_size: {
         Component: PieChartCard,
         props: (stats) => ({
             title: "Orders by size",
@@ -68,5 +67,6 @@ registry.category("awesome_dashboard").add("data", [
                 },
             },
         }),
+        active: true,
     },
-]);
+});

awesome_dashboard/static/src/dashboard/dialogs/dashboard_config_dailog.js

@@ -0,0 +1,41 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+
+export class AwesomeDashboardConfigDialog extends Component {
+    static template = "awesome_dashboard.AwesomeDashboardConfigDialog";
+    static components = { Dialog };
+    static props = { close: { type: Function, optional: true }, onConfirm: { type: Function, optional: true } };
+    static defaultProps = {
+        close: () => {},
+        onConfirm: () => {},
+    };
+
+    setup() {
+        if (localStorage.getItem("awesome_dashboard_config") === null) {
+            localStorage.setItem(
+                "awesome_dashboard_config",
+                JSON.stringify({
+                    average_quantity: { title: "Average Quantity", active: true },
+                    average_time: { title: "Average Time", active: true },
+                    nb_cancelled_orders: { title: "Cancelled Orders", active: true },
+                    nb_new_orders: { title: "New Orders", active: true },
+                    total_amount: { title: "Total Amount", active: true },
+                    orders_by_size: { title: "Orders by Size", active: true },
+                })
+            );
+        }
+        this.configItems = JSON.parse(localStorage.getItem("awesome_dashboard_config"));
+    }
+
+    onSave() {
+        localStorage.setItem("awesome_dashboard_config", JSON.stringify(this.configItems));
+        this.props.onConfirm(this.configItems);
+        this.props.close();
+    }
+
+    discard() {
+        this.props.close();
+    }
+}

awesome_dashboard/static/src/dashboard/dialogs/dashboard_config_dialog.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.AwesomeDashboardConfigDialog">
+        <Dialog size="'md'" title.translate="Dashboard Items Configuration">
+            <div class="d-flex flex-column gap-2">
+                <div class="form-check" t-foreach="Object.entries(configItems)" t-as="entry" t-key="entry[0]">
+                    <t t-set="key" t-value="entry[0]"/>
+                    <t t-set="item" t-value="entry[1]"/>
+                    <input class="form-check-input" type="checkbox" t-att-checked="item.active" t-attf-id="awesome_dashboard_config_{{key}}" t-on-change="() => this.configItems[key].active = !this.configItems[key].active"/>
+                    <label class="form-check-label" t-attf-for="awesome_dashboard_config_{{key}}" t-esc="item.title"/>
+                </div>
+                <t t-set-slot="footer">
+                    <button class="btn btn-primary" t-on-click="onSave">Save</button>
+                    <button class="btn btn-secondary" t-on-click="props.close">Discard</button>
+                </t>
+            </div>
+        </Dialog>
+    </t>
+
+</templates>