[IMP] awesome_owl, awesome_dashboard: implement cards with slots and minimize card content using toggle button. create dashboard using layout component.

- Transform the Card component to use a default slot instead of a content prop, include multiple cards with arbitrary content (e.g., Counter), and enforce prop validation for the title.
- Add toggle functionality to the Card component using a boolean state, conditionally render its content with t-if, and include a header button to switch between open and closed states.
- Imported layout component in dashboard and added dashboard.scss to create a basic dasboard view.

Author: aarp-odoo

awesome_dashboard/static/src/dashboard.js

@@ -2,9 +2,11 @@
 
 import { Component } from "@odoo/owl";
 import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout };
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard.scss

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

awesome_dashboard/static/src/dashboard.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+        <Layout className="'o_dashboard h-100'"/>
     </t>
 
 </templates>

awesome_owl/static/src/card/card.js

@@ -1,13 +1,21 @@
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
     static template = "awesome_owl.Card"
     static props = {
         title: {
             type: String,
         },
-        content: {
-            type: String,
-        }
+        slots: {
+            type: Object,
+        },
+    }
+
+    setup() {
+        this.state = useState({ isCardOpen: false })
+    }
+
+    toggleCard() {
+        this.state.isCardOpen = !this.state.isCardOpen;
     }
 }

awesome_owl/static/src/card/card.xml

@@ -3,12 +3,15 @@
     <t t-name="awesome_owl.Card">
         <div class="card d-inline-block m-2" style="width: 18rem;">
             <div class="card-body">
-                <h5 class="card-title">
-                    <t t-esc="props.title"/>
-                </h5>
-                <p class="card-text">
-                    <t t-out="props.content"/>
-                </p>
+                <div class="d-flex align-items-center" style="justify-content: space-between;">
+                    <h5 class="card-title mb-0">
+                        <t t-esc="props.title"/>
+                    </h5>
+                    <button class="btn btn-primary text-black" style="background: #e7e9ed;" t-on-click="toggleCard">Toggle</button>
+                </div>
+                <t t-if="state.isCardOpen">
+                    <t t-slot="default"/>
+                </t>
             </div>
         </div>
     </t>

awesome_owl/static/src/playground.xml

@@ -15,8 +15,17 @@
             <div class="p-3 border m-5" style="max-width: fit-content;">
                 <h1>Cards</h1>
                 <div class="d-flex gap-3">
-                    <Card title="'Gandhinagar'" content="html"/>
-                    <Card title="'Ahmedabad'" content="markup_html"/>
+                    <Card title="'Gandhinagar'">
+                        <p class="card-text">Using Slot for card 1</p>
+                    </Card>
+                    <Card title="'Ahmedabad'">
+                        <p class="card-text">
+                            <t t-out="markup_html"/>
+                        </p>
+                    </Card>
+                    <Card title="'Counter Card'">
+                        <Counter title="'Counter 3'" onChange.bind="incrementSum"/>
+                    </Card>
                 </div>
             </div>
         </div>