[IMP] awesome_dashboard: added selective display of data

This commit introduces display of selective charts via check boxes
This allows users to see only preferred charts and data points
local storage enables users to automatically save selected preference of
charts in browser

Author: paay-odoo

awesome_dashboard/__manifest__.py

@@ -30,4 +30,4 @@
         ],
     },
     'license': 'AGPL-3'
-}
+}

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -5,19 +5,39 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboard_item/dashboard_item";
-import { PieChart } from "./pie_chart/pie_chart";   
+import { DashboardSettings } from "./dashboard_settings/dashboard_settings";
+import { browser } from "@web/core/browser/browser";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-
-    static components = { Layout, DashboardItem, PieChart};
+    static components = { Layout, DashboardItem };
 
     setup() {
         this.actionService = useService("action");
         this.statisticsService = useService("awesome_dashboard.statistics");
         this.statistics = useState(this.statisticsService.data);
+
+        this.dialogService = useService("dialog");
+
         const dashboardItemsRegistry = registry.category("awesome_dashboard");
         this.items = dashboardItemsRegistry.getAll();
+
+        this.state = useState({
+            uncheckedItems: browser.localStorage.getItem("uncheckedItems")?.split(",").filter(id => id) || [],
+        });
+    }
+
+    updateConfiguration(newUncheckedItems) {
+        this.state.uncheckedItems.length = 0;
+        this.state.uncheckedItems.push(...newUncheckedItems); 
+    }
+
+    openConfiguration() {
+        this.dialogService.add(DashboardSettings, {
+            items: this.items,
+            initialUncheckedItems: this.state.uncheckedItems, 
+            updateConfiguration: this.updateConfiguration.bind(this),
+        });
     }
 
     openCustomers() {

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -7,14 +7,20 @@
                 <button t-on-click="openCustomers" type="button" class="btn btn-primary me-2" title="Customers">Customers</button>
                 <button t-on-click="openLeads" type="button" class="btn btn-primary" title="Leads">Leads</button>
             </t>
+
+            <t t-set-slot="control-panel-additional-actions">
+                <button class="btn btn-light" title="Dashboard Settings" t-on-click="openConfiguration">
+                    <i class="fa fa-cog"></i>
+                </button>
+            </t>
             <div class="p-3">
                 <div class="d-flex flex-wrap">
-                    <t t-foreach="items" t-as="item" t-key="item.id">
-                        <DashboardItem size="item.size || 1">
-                            <t t-set="itemProp" t-value="item.props ? item.props(statistics) : {'data': statistics}"/>
-                            <t t-component="item.Component" t-props="itemProp" />
+                    <t t-foreach="Object.values(items)" t-as="item" t-key="item.id">
+                        <DashboardItem t-if="!state.uncheckedItems.includes(item.id)" size="item.size || 1">
+                           <t t-set="itemProp" t-value="item.props ? item.props(statistics) : {'data': statistics}"/>
+                           <t t-component="item.Component" t-props="itemProp" />
                         </DashboardItem>
-                    </t>
+                     </t>
                 </div>
             </div>
         </Layout>

awesome_dashboard/static/src/dashboard/dashboard_settings/dashboard_settings.js

@@ -0,0 +1,44 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+import { browser } from "@web/core/browser/browser";
+
+export class DashboardSettings extends Component {
+    static template = "awesome_dashboard.DashboardSettings";
+    static components = { Dialog };
+
+    static props = {
+        close: { type: Function },
+    };
+
+    setup() {
+        const items = this.props.items || {};
+        const initialUncheckedItems = this.props.initialUncheckedItems || [];
+
+        this.dialogDisplayItems = useState(
+            Object.values(items).map((item) => ({
+                ...item,
+                checked: !initialUncheckedItems.includes(item.id),
+            }))
+        );
+    }
+
+    onChange(checked, itemInDialog) {
+        const targetItem = this.dialogDisplayItems.find(i => i.id === itemInDialog.id);
+        if (targetItem) {
+            targetItem.checked = checked;
+        }
+    }
+
+    confirmChanges() {
+        const newUncheckedItems = this.dialogDisplayItems.filter((item) => !item.checked).map((item) => item.id);
+
+        browser.localStorage.setItem("uncheckedItems", newUncheckedItems.join(","));
+
+        if (this.props.updateConfiguration) {
+            this.props.updateConfiguration(newUncheckedItems);
+        }
+        this.props.close();
+    }
+}

awesome_dashboard/static/src/dashboard/dashboard_settings/dashboard_settings.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.DashboardSettings">
+        <Dialog title="'Dashboard Items Configuration'">
+            <div class="p-3">
+                <p>Select items to display on your dashboard:</p>
+                <div t-foreach="dialogDisplayItems" t-as="item" t-key="item.id" class="form-check mb-2">
+                    <input
+                        type="checkbox"
+                        class="form-check-input"
+                        t-att-id="'settings_item_' + item.id"
+                        t-att-checked="item.checked"
+                        t-on-change="(ev) => this.onChange(ev.target.checked, item)"
+                    />
+                    <label class="form-check-label" t-att-for="'settings_item_' + item.id">
+                        <t t-out="item.description"/>
+                    </label>
+                </div>
+            </div>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="confirmChanges">Apply</button>
+                <button class="btn btn-secondary ms-2" t-on-click="props.close">Cancel</button>
+            </t>
+        </Dialog>
+    </t>
+</templates>