[IMP]: awesome_dashboard: Tutorial chapter 2: item 11

awesome_dashboard/static/src/components/dashboard.js

@@ -5,10 +5,12 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { AwesomeDashboardItem } from "./dashboard_item"
+import { browser } from "@web/core/browser/browser";
+import { AwesomeDashboardDialog } from "./dashboard_dialog"
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout, AwesomeDashboardItem}
+    static components = { Layout, AwesomeDashboardItem }
     setup(){
         this.action = useService("action");
         /** Previous implementation: leaving here for tutorial review purposes **/
@@ -19,6 +21,11 @@ class AwesomeDashboard extends Component {
         }); **/
         this.data = useState(useService("awesome_dashboard.statistics"));
         this.dashboardItems = registry.category("awesome_dashboard").getAll();
+        this.dialogService = useService("dialog");
+        if(browser.localStorage.getItem("AwesomeDashboardUncheckedItems") == null){
+            browser.localStorage.setItem("AwesomeDashboardUncheckedItems", ({}));
+        }
+        this.uncheckedItems = useState({dashboardItems: browser.localStorage.getItem("AwesomeDashboardUncheckedItems")});
     }
     openCustomerView(){
         this.action.doAction("base.action_partner_form");
@@ -31,6 +38,15 @@ class AwesomeDashboard extends Component {
             target: 'current',
         });
     }
+    openOptionsDialog(){
+        this.dialogService.add(AwesomeDashboardDialog, {
+            dashboardItems: this.dashboardItems,
+            updateUncheckedItems: this.updateUncheckedItems.bind(this),
+        });
+    }
+    updateUncheckedItems(uncheckedItems){
+        this.uncheckedItems.dashboardItems = uncheckedItems;
+    }
 }
 
 registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/components/dashboard.xml

@@ -7,19 +7,11 @@
                 <button class="btn btn-primary" t-on-click="openCustomerView">Customers</button>
                 <button class="btn btn-primary" t-on-click="openLeadsViews">Leads</button>
             </t>
-            <!-- Previous implementation: leaving for tutorial review purposes -->
-            <!-- t t-foreach="data" t-as="item" t-key="item">
-                <div t-if="item != 'orders_by_size'">
-                    <AwesomeDashboardItem size="2">
-                        <t t-set-slot="title">
-                            <span t-esc="item"/>
-                        </t>
-                        <t t-esc="item_value"/>
-                    </AwesomeDashboardItem> 
-                </div>
-            </t-->
+            <t t-set-slot="control-panel-additional-actions">
+                <button class="fa fa-cog" t-on-click="openOptionsDialog"></button>
+            </t>
             <t t-foreach="dashboardItems" t-as="item" t-key="item.id">
-                <AwesomeDashboardItem size="item.size || 1">
+                <AwesomeDashboardItem t-if="!this.uncheckedItems.dashboardItems.includes(item.id)" size="item.size || 1">
                     <t t-set="itemProp" t-value="item.props ? item.props(data) : {'data': data}"/>
                     <t t-component="item.Component" t-props="itemProp"/>
                 </AwesomeDashboardItem>

awesome_dashboard/static/src/components/dashboard_dialog.js

@@ -0,0 +1,38 @@
+/** @odoo-module **/
+
+import { Component, useState} from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+import { CheckBox } from "@web/core/checkbox/checkbox";
+import { browser } from "@web/core/browser/browser";
+
+export class AwesomeDashboardDialog extends Component {
+    static template = "awesome_dashboard.AwesomeDashboardDialog";
+    static components = { Dialog, CheckBox }
+    static props = {
+        dashboardItems: Object,
+        updateUncheckedItems: Function,
+    }
+    setup(){
+        this.dashboardItems = useState(this.props.dashboardItems);
+        this.itemCheckmarks = useState({ });
+        let id;
+        for(let i = 0; i < this.dashboardItems.length; i++){
+            id = this.dashboardItems.at(i).id;
+            this.itemCheckmarks[id] = !browser.localStorage.getItem("AwesomeDashboardUncheckedItems").includes(id);
+        }
+        this.dialogTitle = "Dashboard items configuration";
+    }
+    itemToggle(ev, id){
+        this.itemCheckmarks[id] = ev;
+    }
+    dialogSave(){
+        const newUncheckedItems = [];
+        for(let i = 0; i < this.dashboardItems.length; i++){
+            if(this.itemCheckmarks[this.dashboardItems.at(i).id] == false){
+                newUncheckedItems.push(this.dashboardItems.at(i).id);
+            }
+        }
+        browser.localStorage.setItem("AwesomeDashboardUncheckedItems", newUncheckedItems);
+        this.props.updateUncheckedItems(newUncheckedItems);
+    }
+}

awesome_dashboard/static/src/components/dashboard_dialog.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.AwesomeDashboardDialog">
+        <Dialog title="dialogTitle">
+            <p>Check items to be displayed:</p>
+            <t t-foreach="dashboardItems" t-as="item" t-key="item.id">
+                <CheckBox value="itemCheckmarks[item.id]" onChange="(ev) => this.itemToggle(ev, item.id)">
+                    <t t-esc="item.description"/>
+                </CheckBox>
+            </t>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="dialogSave">Save</button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>