- hello world
+
Hello World
+
+
+
+
+
+
The sum is:
+
+
+
+
+ Goedemorgen!
+
diff --git a/awesome_owl/static/src/todo/todoitem.js b/awesome_owl/static/src/todo/todoitem.js
new file mode 100644
index 00000000000..06f4d36c078
--- /dev/null
+++ b/awesome_owl/static/src/todo/todoitem.js
@@ -0,0 +1,30 @@
+import { Component, useState } from "@odoo/owl";
+
+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,
+ },
+ };
+
+ change(event) {
+ let isCompleted = event.target.checked;
+ this.props.toggleState(this.props.todo.id, isCompleted);
+ }
+
+ remove() {
+ this.props.removeTodo(this.props.todo.id);
+ }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo/todoitem.xml b/awesome_owl/static/src/todo/todoitem.xml
new file mode 100644
index 00000000000..c88a1385a4c
--- /dev/null
+++ b/awesome_owl/static/src/todo/todoitem.xml
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo/todolist.js b/awesome_owl/static/src/todo/todolist.js
new file mode 100644
index 00000000000..86f90070d42
--- /dev/null
+++ b/awesome_owl/static/src/todo/todolist.js
@@ -0,0 +1,52 @@
+import { Component, useState } from "@odoo/owl";
+import { TodoItem } from "./todoitem";
+import { useAutoFocus } from "../utils";
+
+export class TodoList extends Component {
+ static template = "awesome_owl.todolist";
+ static components = { TodoItem };
+
+ setup() {
+ // this.todos = useState([
+ // { id: 3, description: "buy milk", isCompleted: false },
+ // { id: 4, description: "FIX MACHINE PLX", isCompleted: false },
+ // { id: 5, description: "WAKE UP", isCompleted: true },
+ // ]);
+ this.todos = useState([]);
+ useAutoFocus("list_input");
+ }
+
+ addTodo(event) {
+ // console.warn("addTodo");
+ // console.log(event);
+ if (event.keyCode === 13) {
+ let description = event.target.value;
+ if (description.length == 0) {
+ return;
+ }
+ let next_id = 1 + Math.max(...this.todos.map(item => item.id), 0);
+ this.todos.push({ id: next_id, description: description, isCompleted: false });
+ // Reset input
+ event.target.value = '';
+ }
+ }
+
+ toggleState(id, newState) {
+ let todo = this.todos.find((el) => el.id == id);
+ if(todo === undefined) {
+ return;
+ }
+
+ todo.isCompleted = newState;
+ }
+
+ removeTodo(id) {
+ const index = this.todos.findIndex((el) => el.id ===id);
+ if(index < 0) {
+ return;
+ }
+
+ // Inplace manipulation
+ this.todos.splice(index, 1);
+ }
+}
\ No newline at end of file
diff --git a/awesome_owl/static/src/todo/todolist.xml b/awesome_owl/static/src/todo/todolist.xml
new file mode 100644
index 00000000000..e12735cbb03
--- /dev/null
+++ b/awesome_owl/static/src/todo/todolist.xml
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/awesome_owl/static/src/utils.js b/awesome_owl/static/src/utils.js
new file mode 100644
index 00000000000..06a33c4cbb8
--- /dev/null
+++ b/awesome_owl/static/src/utils.js
@@ -0,0 +1,13 @@
+import { useRef } from "@odoo/owl";
+import { onMounted } from "@odoo/owl";
+
+export function useAutoFocus(name) {
+ // NOTE; Object remains alive due to (weak)ref stored inside the closure
+ // of 'onMounted'.
+ let theElement = useRef(name);
+
+ onMounted(() => {
+ theElement.el.focus();
+ console.log("Executed autofocus");
+ });
+}
\ No newline at end of file