[REF] awesome_owl: comply with feedback received.

Author: ziriraha

awesome_owl/static/src/card/card.js

@@ -3,15 +3,15 @@ import { Component, useState } from "@odoo/owl";
 export class Card extends Component {
     static template = "awesome_owl.card";
     static props = {
-        title: {type: String},
-        slots: { type: Object, shape: { default: true } },
+        title: String,
+        slots: Object,
     }
 
     setup() {
-        this.isOpen = useState({ value: true });
+        this.state = useState({ isOpen: true });
     }
 
     toggle() {
-        this.isOpen.value = !this.isOpen.value;
+        this.state.isOpen = !this.state.isOpen;
     }
 }

awesome_owl/static/src/card/card.xml

@@ -8,7 +8,7 @@
                     <t t-esc="props.title"/>
                     <button class="btn" t-on-click="toggle">Toggle</button>
                 </h5>
-                <p class="card-text" t-if="this.isOpen.value">
+                <p class="card-text" t-if="this.state.isOpen">
                     <t t-slot="default"/>
                 </p>
             </div>

awesome_owl/static/src/counter/counter.js

@@ -1,9 +1,15 @@
 import { Component, useState } from "@odoo/owl";
 
 export class Counter extends Component {
-    static template = "awesome_owl.counter";
+    static template = "awesome_owl.Counter";
     static props = {
-        callback: {type: Function},
+        callback: {
+            type: Function,
+            optional: true,
+        },
+    };
+    static defaultProps = {
+        callback: () => {},
     };
 
     setup() {

awesome_owl/static/src/counter/counter.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_owl.counter">
+    <t t-name="awesome_owl.Counter">
         <div class="card text-center">
             <div class="card-body">
                 <h5 class="card-title">Counter</h5>

awesome_owl/static/src/playground.xml

@@ -6,7 +6,7 @@
             <TodoList/>
         </Card>
         <Card title="'My Counter'">
-            <Counter callback="() => {}"/>
+            <Counter/>
         </Card>
     </t>
 

awesome_owl/static/src/todolist/todo.js

@@ -0,0 +1,11 @@
+export class Todo {
+    constructor(id, description) {
+        this.id = id;
+        this.description = description;
+        this.isCompleted = false;
+    }
+
+    setCompletion(isCompleted) {
+        this.isCompleted = isCompleted;
+    }
+}

awesome_owl/static/src/todolist/todoitem.js

@@ -1,13 +1,12 @@
-/** @odoo-module **/
-
 import { Component } from "@odoo/owl";
+import { Todo } from "./todo";
 
 export class TodoItem extends Component {
     static template = "awesome_owl.todoitem";
     static props = {
-        todo: {type: Object, shape: {id: Number, description: String, isCompleted: Boolean }},
-        toggleState: {type: Function},
-        removeTodo: {type: Function},
+        todo: Todo,
+        toggleState: Function,
+        removeTodo: Function,
     };
 
     onChange() {

awesome_owl/static/src/todolist/todolist.js

@@ -2,33 +2,34 @@
 
 import { Component, useState } from "@odoo/owl";
 import { TodoItem } from "./todoitem";
+import { Todo } from "./todo";
 import { useAutofocus } from "../utils";
 
 export class TodoList extends Component {
     static template = "awesome_owl.todolist";
     static components = { TodoItem };
 
+    setup() {
+        this.todos = useState([]);
+        this.sequence = 0;
+        useAutofocus("new-todo");
+    }
+
     addTodo(event) {
         if (event.keyCode === 13 && event.target.value.trim() !== "") {
             this.sequence++;
-            this.todos.push({id: this.sequence, description: event.target.value, isCompleted: false});
+            this.todos.push(new Todo(this.sequence, event.target.value));
             event.target.value = "";
         }
     }
 
     toggleState(id) {
         const todo = this.todos.find(t => t.id === id);
-        if (todo) todo.isCompleted = !todo.isCompleted;
+        if (todo) todo.setCompletion(!todo.isCompleted);
     }
 
     removeTodo(id) {
         const index = this.todos.findIndex((elem) => elem.id === id);
-        if (index >= 0) this.todos.splice(index, 1);
-    }
-
-    setup() {
-        this.todos = useState([]);
-        this.sequence = 0;
-        useAutofocus("new-todo");
+        if (index !== -1) this.todos.splice(index, 1);
     }
 }

awesome_owl/static/src/utils.js

@@ -5,4 +5,4 @@ export function useAutofocus(refName) {
     onMounted(() => {
         ref.el.focus();
     });
-}
+}