- hello world
+
+
-
-
+
\ No newline at end of file
diff --git a/owl_playground/static/src/todo/todo.js b/owl_playground/static/src/todo/todo.js
new file mode 100644
index 00000000000..1b8cf89c677
--- /dev/null
+++ b/owl_playground/static/src/todo/todo.js
@@ -0,0 +1,15 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class Todo extends Component {
+ static template = "owl_playground.todo";
+}
+Todo.props = {
+ id: {type:Number},
+ description: {type:String},
+ done: {type:Boolean},
+ toggleState: { type:Function },
+ removeTodo: { type:Function },
+};
+
diff --git a/owl_playground/static/src/todo/todo.xml b/owl_playground/static/src/todo/todo.xml
new file mode 100644
index 00000000000..cc6b45ab308
--- /dev/null
+++ b/owl_playground/static/src/todo/todo.xml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ .
+
+
+
+
+
\ No newline at end of file
diff --git a/owl_playground/static/src/todolist/todolist.js b/owl_playground/static/src/todolist/todolist.js
new file mode 100644
index 00000000000..40c6f089dd6
--- /dev/null
+++ b/owl_playground/static/src/todolist/todolist.js
@@ -0,0 +1,45 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+import { Todo } from "../todo/todo";
+import { useAutofocus } from "../utils";
+
+
+export class Todolist extends Component {
+ static components = { Todo };
+ static template = "owl_playground.todolist";
+
+ setup() {
+ this.todoList = [];
+ this.todoList = useState([{ id: 1, description: "Task 1", done: false },{ id: 2, description: "Task 2", done: false },{ id: 3, description: "Task 3", done: false }]);
+ this.nextId = this.todoList.length+1;
+ this.inputred = useAutofocus("inputElement");
+ }
+
+ addTodo(ev) {
+ if(ev.keyCode === 13){
+ if (ev.target.value.trim() != "") {
+ this.todoList.push({ id: this.nextId++, description: ev.target.value, done: false });
+ }
+ ev.target.value = "";
+ }
+ }
+
+ toggleState(todoId) {
+
+ const todo = this.todoList.find((todo) => todo.id === todoId);
+ if (todo) {
+ todo.done = !todo.done;
+ }
+ }
+ removeTodo(todoId) {
+ const index = this.todoList.findIndex((todo) => todo.id === todoId);
+ if (index >= 0) {
+ this.todoList.splice(index, 1);
+ }
+ }
+
+ resetList(){
+ this.todoList.splice(0);
+ }
+}
diff --git a/owl_playground/static/src/todolist/todolist.xml b/owl_playground/static/src/todolist/todolist.xml
new file mode 100644
index 00000000000..6d9b7124363
--- /dev/null
+++ b/owl_playground/static/src/todolist/todolist.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/owl_playground/static/src/utils.js b/owl_playground/static/src/utils.js
new file mode 100644
index 00000000000..5dd3e515126
--- /dev/null
+++ b/owl_playground/static/src/utils.js
@@ -0,0 +1,9 @@
+/** @odoo-module **/
+
+
+import { onMounted, useRef } from "@odoo/owl";
+
+export function useAutofocus(Input) {
+ const inputRef = useRef(Input);
+ onMounted(() => inputRef.el.focus());
+}
\ No newline at end of file
diff --git a/owl_playground/views/templates.xml b/owl_playground/views/templates.xml
index e3ccdda4b99..31b1f7b9318 100644
--- a/owl_playground/views/templates.xml
+++ b/owl_playground/views/templates.xml
@@ -1,6 +1,6 @@
-
+
@@ -9,6 +9,6 @@
-
+