[IMP] awesome_dashboard: make dashboard extensible and implement persistent dashboard.

- Registered all the dashboard items in awesome_dashboard registry.
- Used the newly registered dashboard item registry to import all dashboard items.
- Adds a gear icon in the control panel to open a settings dialog.
- The dialog lists dashboard items with checkboxes and an Apply button.
- Unchecked items are stored in local storage and filtered out from the Dashboard view.
- Removed trailing whitespaces and fixed linting issues.

Author: aarp-odoo

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

@@ -5,7 +5,7 @@ import { loadJS } from '@web/core/assets';
 
 export class PieChart extends Component {
     static template = "awesome_dashboard.PieChart";
-    
+
     static props = {
         title: {
             type: String,

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -6,70 +6,65 @@ import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "../dashboard_item/dashboard_item";
 import { PieChart } from "./PieChartCard/pie_chart";
-import { dashboardCards } from "./dashboard_items";
 import { Component, useState } from "@odoo/owl";
+import { DashboardDialog } from "../dashboard_dialog/dashboard_dialog";
+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, PieChart, DashboardDialog };
 
     setup() {
         this.action = useService("action");
+        this.dialog = useService("dialog");
         this.statistics = useService("awesome_dashboard.statistics");
         this.result = useState(this.statistics.stats);
-        this.items = useState(dashboardCards);
+        this.state = useState({ metricConfigs: {} });
+        this.items = registry.category("awesome_dashboard_cards").get("awesome_dashboard.Cards");
+        this.getBrowserCookie();
     }
 
-    get cards() {
-        return [
-            {
-                id: "nb_new_orders",
-                description: "New t-shirt orders this month.",
-                size: 2,
-                props: (data) => ({
-                    title: "Number of new orders this month",
-                    value: this.result.nb_new_orders,
-                }),
-            },
-            {
-                id: "total_amount",
-                description: "New orders this month.",
-                size: 2,
-                title: "Total amount of new order this month",
-                value: this.result.total_amount,
-            },
-            {
-                id: "average_quantity",
-                description: "Average amount of t-shirt.",
-                size: 2,
-                title: "Average amount of t-shirt by order this month",
-                value: this.result.average_quantity,
-            },
-            {
-                id: "nb_cancelled_orders",
-                description: "Cancelled orders this month.",
-                size: 2,
-                title: "Number of cancelled orders this month",
-                value: this.result.nb_cancelled_orders,
-            },
-            {
-                id: "average_time",
-                description: "Average time for an order to reach conclusion (sent or cancelled).",
-                size: 2,
-                title: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
-                value: this.result.average_time,
-            }
-        ]
+    openDialog() {
+        this.dialog.add(DashboardDialog, {
+            metrics: this.items,
+            metricConfigs: this.state.metricConfigs,
+            closeDialog: this.closeDialog.bind(this),
+            updateMetricConfigCallback: this.updateMetricConfig.bind(this)
+        });
+    }
+
+    closeDialog() {
+        this.getBrowserCookie();
+    }
+
+    updateMetricConfig(updated_metricConfig) {
+        this.state.metricConfigs = updated_metricConfig;
+        this.setBrowserCookie();
     }
 
-    get chart() {
-        return this.result.orders_by_size;
+    setBrowserCookie() {
+        browser.localStorage.setItem(
+            "awesome_dashboard.metric_configs", JSON.stringify(this.state.metricConfigs)
+        );
+    }
+
+    getBrowserCookie() {
+        const metric_cookie_data = browser.localStorage.getItem("awesome_dashboard.metric_configs");
+        if (metric_cookie_data) {
+            this.state.metricConfigs = JSON.parse(metric_cookie_data);
+        } else {
+            const initialMetricState = {};
+            for (const metric of this.items) {
+                initialMetricState[metric.id] = true;
+            }
+            this.state.metricConfigs = initialMetricState;
+        }
     }
 
     openCustomers() {
         this.action.doAction("base.action_partner_form");
     }
-    
+
     openLeads() {
         this.action.doAction({
             type: 'ir.actions.act_window',

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -7,29 +7,23 @@
                 <button type="button" class="btn btn-primary" t-on-click="openCustomers">Customers</button>
                 <button type="button" class="btn btn-primary" t-on-click="openLeads">Leads</button>
             </t>
+            <t t-set-slot="control-panel-additional-actions">
+                <button class="d-print-none btn p-0 border-0" data-hotkey="u" t-on-click="openDialog" data-tooltip="Actions">
+                    <i class="fa fa-fw fa-cog"/>
+                </button>
+            </t>
 
             <div class="d-flex flex-wrap gap-3 m-3">
                 <div class="d-flex flex-wrap gap-3">
                     <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(result) : {'data': result}"/>
-                            <t t-log="itemProp"/>
-                            <t t-component="item.Component" t-props="itemProp"/>
-                        </DashboardItem>
+                        <t t-if="state.metricConfigs[item.id]">
+                            <DashboardItem size="item.size || 1">
+                                <t t-set="itemProp" t-value="item.props ? item.props(result) : {'data': result}"/>
+                                <t t-component="item.Component" t-props="itemProp"/>
+                            </DashboardItem>
+                        </t>
                     </t>
-                    <!-- <t t-foreach="cards" t-as="card" t-key="card.id">
-                        <DashboardItem size="card.size">
-                            <p class="mb-0" style="text-align: left;" t-esc="card.title"/>
-                            <t t-set-slot="value">
-                                <t t-esc="card.value"/>
-                            </t>
-                        </DashboardItem>
-                    </t> -->
                 </div>
-                <!-- <DashboardItem size="2">
-                    <p class="mb-0 text-center">T-Shirt orders by size</p>
-                    <PieChart tshirtSales="chart"/>
-                </DashboardItem> -->
             </div>
         </Layout>
     </t>

awesome_dashboard/static/src/dashboard/dashboard_items.js

@@ -1,6 +1,7 @@
 
 import { NumberCard } from "./NumberCard/number_card";
 import { PieChart } from "./PieChartCard/pie_chart";
+import { registry } from "@web/core/registry";
 
 export const dashboardCards = [
     {
@@ -64,3 +65,5 @@ export const dashboardCards = [
         }),
     }
 ]
+
+registry.category("awesome_dashboard_cards").add("awesome_dashboard.Cards", dashboardCards);

awesome_dashboard/static/src/dashboard/statistics_service.js

@@ -4,15 +4,13 @@ import { registry } from "@web/core/registry";
 import { rpc } from "@web/core/network/rpc";
 import { reactive } from "@odoo/owl";
 
-let statisticsObj = reactive({
+const statisticsObj = reactive({
     nb_new_orders: 0,
     total_amount: 0,
     average_quantity: 0,
     nb_cancelled_orders: 0,
     average_time: 0,
     orders_by_size: {}
-}, () => {
-    console.log("Observed");
 });
 
 const loadStatistics = async() => {
@@ -34,7 +32,7 @@ export const loadStatService = {
         return {
             get stats() {
                 return statisticsObj;
-            }
+            },
         }
     }
 }

awesome_dashboard/static/src/dashboard_action.js

@@ -10,4 +10,3 @@ export class LazyDashboardLoader extends Component {
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", LazyDashboardLoader);
-

awesome_dashboard/static/src/dashboard_dialog/dashboard_dialog.js

@@ -0,0 +1,39 @@
+import { Component, useState } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+import { CheckBox } from "@web/core/checkbox/checkbox";
+
+export class DashboardDialog extends Component {
+    static template = "awesome_dashboard.DashboardDialog";
+    static components = { Dialog, CheckBox }
+    static props = {
+        close: Function,
+        updateMetricConfigCallback: Function,
+        closeDialog: Function,
+        metrics: {
+            type: Object,
+        },
+        metricConfigs: {
+            type: Object,
+        }
+    }
+
+    setup() {
+        this.state = useState({
+            metricConfigs: this.props.metricConfigs
+        })
+    }
+
+    applyChanges() {
+        this.props.updateMetricConfigCallback(this.state.metricConfigs);
+        this.props.close();
+    }
+
+    toggleMetricConfig(itemID, checked) {
+        this.state.metricConfigs[itemID] = checked;
+    }
+
+    closeDialog() {
+        this.props.closeDialog();
+        this.props.close();
+    }
+}

awesome_dashboard/static/src/dashboard_dialog/dashboard_dialog.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.DashboardDialog">
+        <Dialog>
+            <t t-set-slot="header">
+                <h3 class="modal-title text-break">
+                    Dashboard Item Configuration
+                </h3>
+                <button type="button" class="btn-close" aria-label="close" t-on-click="closeDialog"/>
+            </t>
+            <div>
+                <p>
+                    Which metrics do you want to see?
+                </p >
+                <t t-foreach="props.metrics" t-as="metric" t-key="metric.id">
+                    <div class="d-flex gap-2 m-2">
+                        <CheckBox value="state.metricConfigs[metric.id]" onChange.bind="(checked) => this.toggleMetricConfig(metric.id, checked)">
+                            <t t-esc="metric.description"/>
+                        </CheckBox>
+                    </div>
+                </t>
+            </div>
+            <t t-set-slot="footer">
+                <button class="button btn btn-lg btn-primary" t-on-click="applyChanges">
+                    Apply
+                </button>
+            </t>
+        </Dialog>
+    </t>
+</templates>

estate/__manifest__.py

@@ -10,12 +10,12 @@
     'installable': True,
     'license': 'LGPL-3',
     'data': [
+        'security/ir.model.access.csv',
         'views/estate_property_offer_views.xml',
         'views/estate_property_type_views.xml',
         'views/estate_property_tags_views.xml',
         'views/res_users_views.xml',
         'views/estate_property_views.xml',
         'views/estate_menus_views.xml',
-        'security/ir.model.access.csv',
     ]
 }

estate/models/estate_property.py

@@ -105,7 +105,7 @@ def _onchange_garden(self):
     # CRUD methods
     # -----------------------
     @api.ondelete(at_uninstall=False)
-    def _unlink_except_new_or_cancelled(self):
+    def _unlink_if_new_or_cancelled(self):
         for record in self:
             if record.state not in ['new', 'cancelled']:
                 raise UserError('You can only delete properties that are in New or Cancelled state.')