[IMP] awesome_owl: add counter component as sub component to playground #747

msho-odoo · 2025-04-29T15:17:03Z

No description provided.

robodoo · 2025-04-29T15:17:05Z

SergeBayet · 2025-05-02T07:27:45Z

@msho-odoo
Just passing by, don't forget the blank line at the end of your files. And remove the header odoo-module at the top of the js files. This is not necessary anymore. Cheers.

SergeBayet · 2025-05-02T07:49:09Z

@msho-odoo Just passing by, don't forget the blank line at the end of your files. And remove the header odoo-module at the top of the js files. This is not necessary anymore. Cheers.

And for the XML files as well :)

…leted

…eted

SergeBayet · 2025-05-02T11:40:41Z

awesome_owl/static/src/todoitem.xml

@@ -2,6 +2,7 @@
 <templates xml:space="preserve">

    <t t-name="awesome_owl.todoitem">
+        <input type="checkbox" t-on-change="()=> props.onToggleState(props.todo.id)"/>


Suggested change

<input type="checkbox" t-on-change="()=> props.onToggleState(props.todo.id)"/>

<input type="checkbox" t-on-change="() => props.onToggleState(props.todo.id)"/>

SergeBayet · 2025-05-02T11:40:56Z

awesome_owl/static/src/todolist.js

@@ -23,4 +23,9 @@ export class TodoList extends Component {
            ev.target.value = "";
        }
    };
+
+    toggleState(todoId) {
+        let todo = this.state.todos.find(todo => todo.id === todoId);


Suggested change

let todo = this.state.todos.find(todo => todo.id === todoId);

const todo = this.state.todos.find(todo => todo.id === todoId);

SergeBayet · 2025-05-02T11:41:54Z

awesome_owl/static/src/todolist.xml

@@ -7,7 +7,7 @@
        <t t-foreach="state.todos" t-as="i" t-key="i.id">


Convention: foreach -> plural, t-as -> singular.

Suggested change

<t t-foreach="state.todos" t-as="i" t-key="i.id">

<t t-foreach="state.todos" t-as="todo" t-key="todo.id">

SergeBayet · 2025-05-02T11:42:13Z

awesome_owl/static/src/todolist.xml

@@ -7,7 +7,7 @@
        <t t-foreach="state.todos" t-as="i" t-key="i.id">
            <div style="border: 1px solid black">
                <div t-att-class="{'text-muted': i.isCompleted, 'text-decoration-line-through': i.isCompleted}">
-                    <TodoItem todo= "i"/>
+                    <TodoItem todo= "i" onToggleState.bind="toggleState"/>


Suggested change

<TodoItem todo= "i" onToggleState.bind="toggleState"/>

<TodoItem todo="todo" onToggleState.bind="toggleState"/>

SergeBayet · 2025-05-02T11:43:08Z

awesome_owl/static/src/todoitem.xml

@@ -2,6 +2,7 @@
 <templates xml:space="preserve">

    <t t-name="awesome_owl.todoitem">
+        <input type="checkbox" t-on-change="()=> props.onToggleState(props.todo.id)"/>
        <t t-out="props.todo.id+'. '+props.todo.description"/>


Suggested change

<t t-out="props.todo.id+'. '+props.todo.description"/>

<t t-out="props.todo.id + '. ' + props.todo.description"/>

SergeBayet · 2025-05-02T11:48:07Z

awesome_owl/static/src/todolist.js

@@ -28,4 +28,11 @@ export class TodoList extends Component {
        let todo = this.state.todos.find(todo => todo.id === todoId);
        todo.isCompleted = !todo.isCompleted;
    }
+
+    removeTodo(todoId) {
+        let index = this.state.todos.findIndex(todo => todo.id === todoId);


msho-odoo · 2025-05-02T13:36:17Z

@SergeBayet
Fixed with interactive rebase :)

SergeBayet · 2025-05-02T13:49:19Z

awesome_owl/static/src/todolist.js

+        if (ev.keyCode === 13) {
+            this.state.idCounter++
+            this.state.todos.push({
+                'id': this.state.idCounter, 'description': ev.target.value, 'isCompleted': false


double quotes :)

SergeBayet · 2025-05-02T13:49:33Z

awesome_owl/static/src/todolist.js

+    setup() {
+        this.state = useState({
+            todos: [],
+            idCounter: 0


Suggested change

idCounter: 0

idCounter: 0,

SergeBayet · 2025-05-05T12:15:14Z

awesome_dashboard/static/src/dashboard.js

+            name: ('Leads'),
+            target: 'current',
+            res_model: 'crm.lead',
+            views: [[false, 'list'], [false, 'form']],


double quotes :)

SergeBayet · 2025-05-05T12:15:22Z

awesome_dashboard/static/src/dashboard.js


 class AwesomeDashboard extends Component {
    static template = "awesome_dashboard.AwesomeDashboard";
+    static components = { Layout }


Suggested change

static components = { Layout }

static components = { Layout };

SergeBayet · 2025-05-05T13:01:36Z

awesome_dashboard/static/src/dashboard.js


 class AwesomeDashboard extends Component {
    static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout }
+    static components = { Layout, DashboardItem }


Don't forget the semi-colon :)

Suggested change

static components = { Layout, DashboardItem }

static components = { Layout, DashboardItem };

yes, I pushed and then saw the review, the update is on the way :)

MohammedBasioni

Great work! ;)

MohammedBasioni · 2025-05-05T13:10:42Z

awesome_owl/static/src/card.xml

+                    <t t-esc="props.title"/>
+                    <button style="border:0.5px solid purple;" class="btn btn-primary" t-on-click="toggleState">Hide/Show</button>
+                </h5>
+                <p class="card-text" t-if="state.isOpen">


better practice to have t-if first

Suggested change

<p class="card-text" t-if="state.isOpen">

<p t-if="state.isOpen" class="card-text">

MohammedBasioni · 2025-05-05T13:11:45Z

awesome_owl/static/src/counter.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">


not needed

Suggested change

<templates xml:space="preserve">

<templates>

MohammedBasioni · 2025-05-05T13:15:46Z

awesome_owl/static/src/counter.xml

+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <div style="border:1px solid black; width: 10rem;">Hello World


Inline styles are not encouraged. You may either use Bootstrap classes directly or create your custom classes and use them.

MohammedBasioni · 2025-05-05T13:18:02Z

awesome_owl/static/src/counter.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>


not needed as this xml is parsed by either Owl or Qweb which already use UTF-8

Suggested change

<?xml version="1.0" encoding="UTF-8" ?>

<?xml version="1.0" ?>

[IMP] awesome_owl: add counter component as sub component to playground

19a8882

[IMP] awesome_owl: add props validation in card component

459b6a5

[IMP] awesome_owl: add input text to add todoitems dynamically

1d61c05

msho-odoo force-pushed the 18.0-owl-tutorial-msho branch from 0a27663 to 1d61c05 Compare May 2, 2025 07:32

[IMP] awesome_owl: add auto focus hook on todolist text input

c387d41

msho-odoo force-pushed the 18.0-owl-tutorial-msho branch from 108f182 to c387d41 Compare May 2, 2025 09:24

msho-odoo added 2 commits May 2, 2025 13:29

[IMP] awesome_owl: allow to toggle todoitems as completed or not comp…

1891fa1

…leted

[IMP] awesome_owl: allow to toggle todoitem as completed ot not compl…

00c9d0f

…eted

SergeBayet suggested changes May 2, 2025

View reviewed changes

SergeBayet reviewed May 2, 2025

View reviewed changes

[IMP] awesome_owl: allow to delete todoitem

383d906

msho-odoo force-pushed the 18.0-owl-tutorial-msho branch from c1b4817 to 383d906 Compare May 2, 2025 13:25

msho-odoo added 2 commits May 5, 2025 10:41

[IMP] awesome_owl: make card content defined by slots

0f17c8a

[IMP] awesome_dashboard: add customers and leads action buttons

99bac3e

SergeBayet suggested changes May 5, 2025

View reviewed changes

[IMP] awesome_dashboard: add generic dashboarditem to dashboard

d91de1e

SergeBayet reviewed May 5, 2025

View reviewed changes

msho-odoo force-pushed the 18.0-owl-tutorial-msho branch from 7952511 to d91de1e Compare May 5, 2025 13:03

MohammedBasioni reviewed May 5, 2025

View reviewed changes

msho-odoo added 3 commits May 5, 2025 16:49

[IMP] awesome_dashboard: add statistics cards to the dashboard

c122a8d

[IMP] awesome_dashboard: use memoization to load statistics

451124f

[IMP] awesome_dashboard: add piechart of orders sizes

b5964b6

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[IMP] awesome_owl: add counter component as sub component to playground #747

[IMP] awesome_owl: add counter component as sub component to playground #747

msho-odoo commented Apr 29, 2025

robodoo commented Apr 29, 2025

SergeBayet commented May 2, 2025

SergeBayet commented May 2, 2025

SergeBayet May 2, 2025

SergeBayet May 2, 2025

SergeBayet May 2, 2025

SergeBayet May 2, 2025

SergeBayet May 2, 2025

SergeBayet May 2, 2025

msho-odoo commented May 2, 2025

SergeBayet May 2, 2025

SergeBayet May 2, 2025

SergeBayet May 5, 2025

SergeBayet May 5, 2025

SergeBayet May 5, 2025

msho-odoo May 5, 2025

MohammedBasioni left a comment

MohammedBasioni May 5, 2025

MohammedBasioni May 5, 2025

MohammedBasioni May 5, 2025

MohammedBasioni May 5, 2025

	<input type="checkbox" t-on-change="()=> props.onToggleState(props.todo.id)"/>
	<input type="checkbox" t-on-change="() => props.onToggleState(props.todo.id)"/>

	let todo = this.state.todos.find(todo => todo.id === todoId);
	const todo = this.state.todos.find(todo => todo.id === todoId);

		@@ -7,7 +7,7 @@
		<t t-foreach="state.todos" t-as="i" t-key="i.id">

	<t t-foreach="state.todos" t-as="i" t-key="i.id">
	<t t-foreach="state.todos" t-as="todo" t-key="todo.id">

	<TodoItem todo= "i" onToggleState.bind="toggleState"/>
	<TodoItem todo="todo" onToggleState.bind="toggleState"/>

	<t t-out="props.todo.id+'. '+props.todo.description"/>
	<t t-out="props.todo.id + '. ' + props.todo.description"/>

	static components = { Layout }
	static components = { Layout };

	static components = { Layout, DashboardItem }
	static components = { Layout, DashboardItem };

	<p class="card-text" t-if="state.isOpen">
	<p t-if="state.isOpen" class="card-text">

		@@ -0,0 +1,12 @@
		<?xml version="1.0" encoding="UTF-8" ?>
		<templates xml:space="preserve">

	<?xml version="1.0" encoding="UTF-8" ?>
	<?xml version="1.0" ?>

[IMP] awesome_owl: add counter component as sub component to playground #747

Are you sure you want to change the base?

[IMP] awesome_owl: add counter component as sub component to playground #747

Conversation

msho-odoo commented Apr 29, 2025

robodoo commented Apr 29, 2025

SergeBayet commented May 2, 2025

SergeBayet commented May 2, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

msho-odoo commented May 2, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MohammedBasioni left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment