[IMP] awesome_dashboard: added settings in dashboard

Created a settings button in the dashboard to add and remove items. also
Clicking on a section of the pie chart should open a list view of all orders
that have the corresponding size and also make a responsive design.

Author: arat-odoo

awesome_dashboard/__init__.py

@@ -1,3 +1,4 @@
 # -*- coding: utf-8 -*-
 
+from . import models
 from . import controllers

awesome_dashboard/i18n/hi_IN.po

@@ -0,0 +1,70 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# 	* awesome_dashboard
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 18.0+e\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2025-06-24 12:17+0000\n"
+"PO-Revision-Date: 2025-06-24 12:17+0000\n"
+"Last-Translator: \n"
+"Language-Team: Hindi\n"
+"Language: hi\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#. module: awesome_dashboard
+#. odoo-javascript
+#: code:addons/awesome_dashboard/static/src/dashboard/dashboardSetting/dashboard_setting.xml:0
+msgid "Apply"
+msgstr "लागू करें"
+
+#. module: awesome_dashboard
+#: model:ir.ui.menu,name:awesome_dashboard.menu_root
+msgid "Awesome Dashboard"
+msgstr "ऑसम डैशबोर्ड"
+
+#. module: awesome_dashboard
+#. odoo-javascript
+#: code:addons/awesome_dashboard/static/src/dashboard/dashboardSetting/dashboard_setting.xml:0
+msgid "Cancel"
+msgstr "रद्द करें"
+
+#. module: awesome_dashboard
+#. odoo-javascript
+#: code:addons/awesome_dashboard/static/src/dashboard/dashboard.xml:0
+msgid "Customers"
+msgstr "ग्राहक"
+
+#. module: awesome_dashboard
+#: model:ir.actions.client,name:awesome_dashboard.dashboard
+#: model:ir.ui.menu,name:awesome_dashboard.dashboard_menu
+msgid "Dashboard"
+msgstr "डैशबोर्ड"
+
+#. module: awesome_dashboard
+#. odoo-javascript
+#: code:addons/awesome_dashboard/static/src/dashboard/dashboard.xml:0
+msgid "Dashboard Settings"
+msgstr "डैशबोर्ड सेटिंग्स"
+
+#. module: awesome_dashboard
+#. odoo-javascript
+#: code:addons/awesome_dashboard/static/src/dashboard/dashboard.xml:0
+msgid "Leads"
+msgstr "लीड्स"
+
+#. module: awesome_dashboard
+#. odoo-javascript
+#: code:addons/awesome_dashboard/static/src/dashboard/piechartcard/piechartcard.xml:0
+msgid "Loading chart..."
+msgstr "चार्ट लोड हो रहा है..."
+
+#. module: awesome_dashboard
+#. odoo-javascript
+#: code:addons/awesome_dashboard/static/src/dashboard/dashboardSetting/dashboard_setting.xml:0
+msgid "Select items to display on your dashboard:"
+msgstr "अपने डैशबोर्ड पर प्रदर्शित करने के लिए आइटम चुनें:"

awesome_dashboard/models/__init__.py

@@ -0,0 +1 @@
+from . import res_users

awesome_dashboard/models/res_users.py

@@ -0,0 +1,21 @@
+from odoo import fields, models, api
+
+
+class ResUsers(models.Model):
+    _inherit = "res.users"
+
+    dashboard_disabled_items = fields.Char(default="")
+
+    @api.model
+    def set_dashboard_settings(self, disable_item_ids):
+        if self.env.user:
+            items = ",".join(map(str, disable_item_ids))
+            self.env.user.sudo().write({"dashboard_disabled_items": items})
+            return True
+        return False
+
+    @api.model
+    def get_dashboard_settings(self):
+        if self.env.user and self.env.user.dashboard_disabled_items:
+            return self.env.user.dashboard_disabled_items.split(",")
+        return []

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -1,21 +1,50 @@
-/** @odoo-module **/
-
-import { Component, useState } from "@odoo/owl";
+import { Component, useState, onWillStart } 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/dashboard_item";
 import { Piechart } from "./pieChart/pieChart";
+import { DashboardSettings } from "./dashboardSetting/dashboard_setting";
+import { rpc } from "@web/core/network/rpc";
+
 class AwesomeDashboard extends Component {
   static template = "awesome_dashboard.AwesomeDashboard";
   static components = { Layout, DashboardItem, Piechart };
 
   setup() {
-    this.action = useService("action");
     const dashboardItemsRegistryData = registry.category("awesome_dashboard");
+    this.action = useService("action");
     this.items = dashboardItemsRegistryData.getAll();
     this.statisticServices = useService("awesome_dashboard.statistics");
     this.state = useState({ statistic: this.statisticServices.statistic });
+    this.dialogService = useService("dialog");
+    this.displayData = useState({
+      disabledItems: [],
+      isLoading: true,
+    });
+    onWillStart(async () => {
+      try {
+        // this.displayData.isLoading = true;
+        const fetchedDisabledItems = await rpc(
+          "/web/dataset/call_kw/res.users/get_dashboard_settings",
+          {
+            model: "res.users",
+            method: "get_dashboard_settings",
+            args: [],
+            kwargs: {},
+          }
+        );
+        this.displayData.disabledItems = fetchedDisabledItems;
+      } catch (error) {
+        console.error(
+          "Error loading initial dashboard settings from server:",
+          error
+        );
+        this.displayData.disabledItems = [];
+      } finally {
+        this.displayData.isLoading = false;
+      }
+    });
   }
   openCustomers() {
     this.action.doAction("base.action_partner_form");
@@ -34,6 +63,19 @@ class AwesomeDashboard extends Component {
       ],
     });
   }
+
+  updateConfiguration(newUncheckedItems) {
+    this.displayData.disabledItems.length = 0;
+    this.displayData.disabledItems.push(...newUncheckedItems);
+  }
+
+  openSetting() {
+    this.dialogService.add(DashboardSettings, {
+      items: this.items,
+      initialUncheckedItems: this.state.uncheckedItems,
+      updateConfiguration: this.updateConfiguration.bind(this),
+    });
+  }
 }
 
 registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard/dashboard.scss

@@ -18,3 +18,25 @@
     color: #228B22;
     font-weight: bold;
 }
+
+.o_dashboard_item {
+    background: #fff;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+    padding: 1rem;
+    margin: 1rem;
+    display: inline-flex;
+    justify-content: center;
+    vertical-align: top;
+    min-height: 3rem;
+}
+
+@media (max-width: 426px) {
+    .o_dashboard_item {
+        width: 100% !important;
+        display: flex;
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+        box-sizing: border-box;
+    }
+}

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -7,16 +7,19 @@
                 <button t-on-click="openCustomers" type="button" class="btn btn-primary" title="Customers">Customers</button>
                 <button t-on-click="openLeads" type="button" class="btn btn-primary" title="Customers">Leads</button>
             </t>
-            <div class="d-flex">
+            <t t-set-slot="control-panel-additional-actions">
+                <button class="btn btn-light" title="Dashboard Settings" t-on-click="openSetting">
+                    <i class="fa fa-cog"></i>
+                </button>
+            </t>
+            <div class="d-flex flex-wrap">
                 <t t-foreach="items" t-as="item" t-key="item.id">
-                    <DashboardItem size="item.size || 1">
+                    <DashboardItem t-if="(displayData.disabledItems || []).includes(item.id) === false" size="item.size || 1">
                         <t t-set="itemProp" t-value="item.props ? item.props(this.state.statistic) : {'data': this.state.statistic}"/>
                         <t t-component="item.Component" t-props="itemProp" />
                     </DashboardItem>
                 </t>
             </div>
-
         </Layout>
     </t>
-
 </templates>

awesome_dashboard/static/src/dashboard/dashboardItem/dashboard_item.xml

@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="awesome_dashboard.DashboardItem">                
-        <div class="card m-2 border-dark" t-attf-style="width: {{18 * props.size}}rem;">
+          <div t-attf-class="o_dashboard_item"
+            t-attf-style="width: #{18 * itemSize}rem; background: #fff; border-radius: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.07); padding: 1rem; margin: 1rem; display: inline-flex; justify-content: center; vertical-align: top; min-height: 3rem;">
           <div class="card-body">
             <t t-slot="default"/>
           </div>

awesome_dashboard/static/src/dashboard/dashboardSetting/dashboard_setting.js

@@ -0,0 +1,51 @@
+import { Component, useState } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+import { rpc } from "@web/core/network/rpc";
+
+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;
+    }
+  }
+
+  async confirmChanges() {
+    const newUncheckedItems = this.dialogDisplayItems
+      .filter((item) => !item.checked)
+      .map((item) => item.id);
+
+    await rpc("/web/dataset/call_kw/res.users/set_dashboard_settings", {
+      model: "res.users",
+      method: "set_dashboard_settings",
+      args: [newUncheckedItems],
+      kwargs: {},
+    });
+
+    if (this.props.updateConfiguration) {
+      this.props.updateConfiguration(newUncheckedItems);
+    }
+    this.props.close();
+  }
+}

awesome_dashboard/static/src/dashboard/dashboardSetting/dashboard_setting.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>

awesome_dashboard/static/src/dashboard/numbercard/numbercard.js

@@ -2,14 +2,7 @@ import { Component } from "@odoo/owl";
 export class Numbercard extends Component {
   static template = "awesome_dashboard.Numbercard";
   static props = {
-    size: {
-      type: Number,
-      default: 1,
-      optional: true,
-    },
-    slots: {
-      type: Object,
-      shape: { default: true },
-    },
+    title: { type: String },
+    value: { type: [String,Number] },
   };
 }

awesome_dashboard/static/src/dashboard/pieChart/pieChart.js

@@ -3,10 +3,10 @@ import {
   onWillStart,
   useRef,
   onMounted,
-  onWillUnmount,
   useEffect,
 } from "@odoo/owl";
 import { loadJS } from "@web/core/assets";
+import { useService } from "@web/core/utils/hooks";
 
 export class Piechart extends Component {
   static template = "awesome_dashboard.Piechart";
@@ -16,12 +16,13 @@ export class Piechart extends Component {
   setup() {
     this.chart = null;
     this.canvasRef = useRef("canvas");
+    this.action = useService("action");
 
     onWillStart(async () => {
       await loadJS("/web/static/lib/Chart/Chart.js");
     });
 
-    this.chartData = {
+    const chartData = {
       labels: Object.keys(this.props.data),
       datasets: [
         {
@@ -33,7 +34,16 @@ export class Piechart extends Component {
     onMounted(() => {
       this.chart = new Chart(this.canvasRef.el, {
         type: "pie",
-        data: this.chartData,
+        data: chartData,
+        options: {
+          onClick: (event, elements) => {
+            if (elements.length > 0) {
+              const idx = elements[0].index;
+              const size = chartData.labels[idx];
+              this.getOrdersBySize(size);
+            }
+          },
+        },
       });
     });
     useEffect(
@@ -47,4 +57,19 @@ export class Piechart extends Component {
       () => [this.props.data]
     );
   }
+  getOrdersBySize(size) {
+    this.action.doAction({
+      type: "ir.actions.act_window",
+      name: `Orders with Size ${size.toUpperCase()}`,
+      res_model: "sale.order",
+      views: [[false, "list"]],
+      domain: [
+        [
+          "order_line.product_template_attribute_value_ids.display_name",
+          "ilike",
+          size,
+        ],
+      ],
+    });
+  }
 }