[IMP] awesomeclicker: add editor metadata in Python file

awesome_dashboard/__init__.py

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

awesome_dashboard/controllers/__init__.py

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

awesome_dashboard/controllers/controllers.py

@@ -8,6 +8,7 @@
 
 logger = logging.getLogger(__name__)
 
+
 class AwesomeDashboard(http.Controller):
     @http.route('/awesome_dashboard/statistics', type='jsonrpc', auth='user')
     def get_statistics(self):
@@ -33,4 +34,3 @@ def get_statistics(self):
             },
             'total_amount': random.randint(100, 1000)
         }
-

awesome_gallery/models/ir_action.py

@@ -7,4 +7,4 @@ class ActWindowView(models.Model):
 
     view_mode = fields.Selection(selection_add=[
         ('gallery', "Awesome Gallery")
-    ],  ondelete={'gallery': 'cascade'})
+    ], ondelete={'gallery': 'cascade'})

awesome_owl/__init__.py

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

awesome_owl/controllers/__init__.py

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

awesome_owl/controllers/controllers.py

@@ -1,5 +1,6 @@
 from odoo import http
-from odoo.http import request, route
+from odoo.http import request
+
 
 class OwlPlayground(http.Controller):
     @http.route(['/awesome_owl'], type='http', auth='public')

awesome_owl/static/src/card/card.js

@@ -0,0 +1,18 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+    static template = "awesome_owl.Card";
+
+    static props = {
+        title: String,
+        slots: { type: Object, optional: true },
+    };
+
+    setup() {
+        this.state = useState({ open: true });
+    }
+
+    toggle() {
+        this.state.open = !this.state.open;
+    }
+}

awesome_owl/static/src/card/card.xml

@@ -0,0 +1,19 @@
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.Card">
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="card-title mb-0">
+                    <t t-out="props.title"/>
+                </h5>
+                <button class="btn btn-sm btn-outline-primary" t-on-click="toggle">
+                    <t t-out="state.open ? 'Hide' : 'Show'"/>
+                </button>
+            </div>
+
+            <div class="card-body" t-if="state.open">
+                <!-- Default slot for arbitrary content -->
+                <t t-slot="default"/>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,21 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "awesome_owl.Counter";
+
+    static props = {
+        onChange: { type: Function, optional: true }, // optional callback
+    };
+
+    setup() {
+        this.state = useState({ value: 0 });
+    }
+
+    increment() {
+        this.state.value++;
+
+        if (this.props.onChange) {
+            this.props.onChange(this.state.value);
+        }
+    }
+}

awesome_owl/static/src/counter/counter.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.Counter">
+        <div class="p-3">
+            <span>Counter: <t t-out="state.value"/></span>
+            <button class="btn btn-primary ms-2" t-on-click="increment">
+                Increment
+            </button>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/main.js

@@ -9,4 +9,3 @@ const config = {
 
 // Mount the Playground component when the document.body is ready
 whenReady(() => mountComponent(Playground, document.body, config));
-

awesome_owl/static/src/playground.js

@@ -1,5 +1,9 @@
 import { Component } from "@odoo/owl";
+import { TodoList } from "./todo/todo_list";
+import { Card } from "./card/card";
+import { Counter } from "./counter/counter";
 
 export class Playground extends Component {
-    static template = "awesome_owl.playground";
-}
+    static template = "awesome_owl.Playground";
+    static components = { TodoList, Card, Counter };
+}

awesome_owl/static/src/playground.xml

@@ -1,10 +1,21 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<templates xml:space="preserve">
+<t t-name="awesome_owl.Playground">
+    <div class="p-3">
 
-    <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
-        </div>
-    </t>
+        <!-- Card with normal content -->
+        <Card title="'Simple Card'">
+            <p>Just a basic text card.</p>
+        </Card>
 
-</templates>
+        <!-- Card containing a Counter component -->
+        <Card title="'Counter Card'">
+            <Counter/>
+        </Card>
+
+        <!-- Card with multiple components -->
+        <Card title="'Multiple Items'">
+            <Counter/>
+            <p>Some extra text beacause, I can.</p>
+        </Card>
+
+    </div>
+</t>

awesome_owl/static/src/todo/todo_item.js

@@ -0,0 +1,29 @@
+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+    static template = "awesome_owl.TodoItem";
+
+    static props = {
+        // Define a shape for the todo object
+        todo: {
+            type: Object,
+            shape: {
+                id: { type: [String, Number], required: true },
+                description: { type: String, required: true },
+                isCompleted: { type: Boolean, required: true },
+            },
+            required: true,
+        },
+        toggleState: { type: Function, required: true },
+        removeTodo: { type: Function, required: true },
+    };
+
+    onCheckboxChange() {
+        // Call parent callback with the todo ID
+        this.props.toggleState(this.props.todo.id);
+    }
+
+    onRemoveClick() {
+        this.props.removeTodo(this.props.todo.id);
+    }
+}

awesome_owl/static/src/todo/todo_item.xml

@@ -0,0 +1,38 @@
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.TodoItem">
+        <div class="mb-1 d-flex align-items-center">
+
+            <!-- Checkbox -->
+            <input
+                type="checkbox"
+                class="me-2"
+                t-att-checked="props.todo.isCompleted"
+                t-on-change="onCheckboxChange"
+            />
+
+            <!-- ID -->
+            <strong 
+                class="me-2"
+                t-att-class="props.todo.isCompleted ? 'text-muted text-decoration-line-through' : ''"
+            >
+                <t t-out="props.todo.id"/>:
+            </strong>
+
+            <!-- Description -->
+            <span 
+                class="flex-grow-1"
+                t-att-class="props.todo.isCompleted ? 'text-muted text-decoration-line-through' : ''"
+            >
+                <t t-out="props.todo.description"/>
+            </span>
+
+            <!-- Delete button -->
+            <button
+                type="button"
+                class="fa fa-remove ms-2 text-danger btn btn-link p-0"
+                t-on-click="onRemoveClick"
+                aria-label="Remove todo"
+            ></button>
+        </div>
+    </t>
+</templates>