[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() {
@@ -34,4 +54,4 @@ class AwesomeDashboard extends Component {
     }
 }
 
-registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard/dashboard.scss

@@ -1,3 +1,3 @@
 .o_dashboard {
     background-color: grey;
-}
+}

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -7,16 +7,22 @@
                 <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>
     </t>
-</templates>
+</templates>

awesome_dashboard/static/src/dashboard/dashboard_item/dashboard_item.js

@@ -16,4 +16,4 @@ export class DashboardItem extends Component {
             shape: {default: Object}
         }
     }
-}
+}

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

@@ -7,4 +7,4 @@
             </div>
         </div>
     </t>
-</templates>
+</templates>

awesome_dashboard/static/src/dashboard/dashboard_items.js

@@ -64,4 +64,4 @@ export const items = [
 
 items.forEach((item) => {
     registry.category("awesome_dashboard").add(item.id, item)
-});
+});

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>

awesome_dashboard/static/src/dashboard/number_card/number_card.js

@@ -8,4 +8,4 @@ export class NumberCard extends Component {
         title: { type: String },
         value: { type: [String, Number] },
     };
-}
+}

awesome_dashboard/static/src/dashboard/number_card/number_card.xml

@@ -6,4 +6,4 @@
             <p class="fs-4 fw-bold text-success" t-out="props.value"/>
         </div>
     </t>
-</templates>
+</templates>

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

@@ -88,4 +88,4 @@ export class PieChart extends Component {
             }
         });
     }
-}
+}

awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml

@@ -5,4 +5,4 @@
             <canvas t-ref="canvas"/>
         </div>
     </t>
-</templates>
+</templates>

awesome_dashboard/static/src/dashboard/piechart_card/piechart_card.js

@@ -10,4 +10,4 @@ export class PieChartCard extends Component {
         title: { type: String, optional: true },
         data: { type: Object },
     };
-}
+}

awesome_dashboard/static/src/dashboard/piechart_card/piechart_card.xml

@@ -6,4 +6,4 @@
             <PieChart data="props.data"/>
         </div>
     </t>
-</templates>
+</templates>

awesome_dashboard/static/src/dashboard_action.js

@@ -11,4 +11,4 @@ export class AwesomeDashboardLoader extends Component {
     `;
 }
 
-registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboardLoader);
+registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboardLoader);

awesome_owl/static/src/card/card.js

@@ -18,4 +18,4 @@ export class Card extends Component {
         // Toggle the open/closed state
         this.state.isOpen = !this.state.isOpen;
     }
-}
+}

awesome_owl/static/src/card/card.xml

@@ -17,4 +17,4 @@
             </div>
         </div>
     </t>
-</templates>
+</templates>

awesome_owl/static/src/counter/counter.js

@@ -20,4 +20,4 @@ export class Counter extends Component {
             this.props.onChange();
         }
     }
-}
+}

awesome_owl/static/src/counter/counter.xml

@@ -4,4 +4,4 @@
         <p> Counter :<t t-esc="state.value"/></p>
         <button class="btn btn-primary" t-on-click="increment" style="border: 2px solid #007bff; background-color: #28a745; color: #fff;">Increment</button>
     </t>
-</templates>
+</templates>

awesome_owl/static/src/playground.js

@@ -16,4 +16,4 @@ export class Playground extends Component {
     incrementSum() {
         this.state.sum += 1;
     }
-}
+}

awesome_owl/static/src/playground.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
+
     <t t-name="awesome_owl.playground">
         <div class="container py-4">
             <h1 class="mb-4 text-primary text-center">Owl Playground</h1>
@@ -33,4 +34,4 @@
             </div>
         </div>
     </t>
-</templates>
+</templates>

awesome_owl/static/src/todo_list/todo_items.js

@@ -27,4 +27,4 @@ export class TodoItem extends Component {
         // Call the parent's removeTodo function with the todo id
         this.props.removeTodo(this.props.todo.id);
     }
-}
+}

awesome_owl/static/src/todo_list/todo_items.xml

@@ -10,4 +10,4 @@
             <span class="fa fa-remove" t-on-click="removeTodo" title="Delete Todo" style="color: #dc3545; padding:5px"/>
         </div>
     </t>
-</templates>
+</templates>

awesome_owl/static/src/todo_list/todo_list.js

@@ -40,4 +40,4 @@ export class TodoList extends Component {
             this.todos.splice(index, 1);
         }
     }
-}
+}

awesome_owl/static/src/todo_list/todo_list.xml

@@ -12,4 +12,4 @@
             </t>
         </div>
     </t>
-</templates>
+</templates>

awesome_owl/static/src/utils.js

@@ -10,4 +10,4 @@ export function useAutoFocus(refname) {
             inputRef.el.focus();
         }
     });
-}
+}

estate/data/estate_property_demo.xml

@@ -62,4 +62,4 @@
             ]"/>
         </record>
     </data>
-</odoo>
+</odoo>

estate/data/estate_property_offer_demo.xml

@@ -25,4 +25,4 @@
             <value eval="ref('demo_big_villa_offer_2')"/>
         </function>
     </data>
-</odoo>
+</odoo>

estate/data/estate_property_type_demo.xml

@@ -15,4 +15,4 @@
             <field name="name">Industrial</field>
         </record>
     </data>
-</odoo>
+</odoo>

estate/models/estate_property.py

@@ -74,22 +74,20 @@ class EstateProperty(models.Model):
         compute="_compute_total_area",
         store=True,
     )
-
     company_id = fields.Many2one(
         "res.company", required=True, default=lambda self: self.env.company
     )
-
-    @api.depends("living_area", "garden_area")
-    def _compute_total_area(self):
-        for record in self:
-            record.total_area = record.living_area + record.garden_area
-
     best_price = fields.Float(
         string="Best Price",
         compute="_compute_best_price",
         store=True,
     )
 
+    @api.depends("living_area", "garden_area")
+    def _compute_total_area(self):
+        for record in self:
+            record.total_area = record.living_area + record.garden_area
+
     @api.depends("offer_ids.price")
     def _compute_best_price(self):
         for record in self:
@@ -127,8 +125,6 @@ def action_set_cancel(self):
                     "Only refused offers can set the property as cancelled."
                 )
 
-        # we will not accept the offer if the price is less than 10% of the selling price
-
     @api.constrains("selling_price", "expected_price")
     def _check_price(self):
         for record in self:
@@ -148,8 +144,6 @@ def _ondelete_property(self):
 
     @api.onchange("offer_ids")
     def _onchange_offer_ids(self):
-        if self.offer_ids:
-            self.state = "offer_received"
         if not self.offer_ids and self.state != "new":
             self.state = "new"