[IMP] awesome_dashboard: add generic dashboarditem to dashboard

Author: msho-odoo

awesome_dashboard/static/src/dashboard.js

@@ -2,10 +2,11 @@ import { Component } 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";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout }
+    static components = { Layout, DashboardItem };
 
     setup() {
         this.action = useService("action");
@@ -17,11 +18,11 @@ class AwesomeDashboard extends Component {
 
     async openLeadsView() {
         this.action.doAction({
-            type: 'ir.actions.act_window',
-            name: ('Leads'),
-            target: 'current',
-            res_model: 'crm.lead',
-            views: [[false, 'list'], [false, 'form']],
+            type: "ir.actions.act_window",
+            name: ("Leads"),
+            target: "current",
+            res_model: "crm.lead",
+            views: [[false, "list"], [false, "form"]],
         });
     }
 }

awesome_dashboard/static/src/dashboard.xml

@@ -4,7 +4,10 @@
     <t t-name="awesome_dashboard.AwesomeDashboard">
         <button t-on-click="openCustomersView">Customers</button>
         <button t-on-click="openLeadsView">Leads</button>
-        <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">some content</Layout>
+        <Layout display="{controlPanel: {} }" className="'o_dashboard h-100'">
+            <DashboardItem>Card 1 Content</DashboardItem>
+            <DashboardItem size="2">Card 2 Content</DashboardItem>
+        </Layout>
     </t>
 
 </templates>

awesome_dashboard/static/src/dashboarditem.js

@@ -0,0 +1,13 @@
+import { Component } from "@odoo/owl"
+
+export class DashboardItem extends Component {
+    static template = "awesome_dashboard.dashboarditem";
+    static props = {
+        size: {
+            type: Number,
+            default: 1,
+            optional: true,
+        },
+        slots: Object,
+    };
+}

awesome_dashboard/static/src/dashboarditem.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.dashboarditem">
+        <div class="card d-inline-block m-2" t-attf-style="width: {{18*props.size}}rem;">
+            <div class="card-body">
+                <t t-slot="default"/>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/todolist.js

@@ -9,7 +9,7 @@ export class TodoList extends Component {
     setup() {
         this.state = useState({
             todos: [],
-            idCounter: 0
+            idCounter: 0,
         });
         useAutofocus("input_todo");
     };
@@ -18,7 +18,7 @@ export class TodoList extends Component {
         if (ev.keyCode === 13) {
             this.state.idCounter++
             this.state.todos.push({
-                'id': this.state.idCounter, 'description': ev.target.value, 'isCompleted': false
+                "id": this.state.idCounter, "description": ev.target.value, "isCompleted": false
             });
             ev.target.value = "";
         }