diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js new file mode 100644 index 0000000000..0960ea9d07 --- /dev/null +++ b/awesome_owl/static/src/card/card.js @@ -0,0 +1,16 @@ +import { Component, useState } from "@odoo/owl"; + +export class Card extends Component { + static template = "awesome_owl.card"; +// static props = { +// title : {type: String }, +// content : {type: String }, +// } + setup() { + this.state= useState({ 'open': false }); + } + + flip_state(){ + this.state.open = !this.state.open + } +} diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml new file mode 100644 index 0000000000..f9fbf812ab --- /dev/null +++ b/awesome_owl/static/src/card/card.xml @@ -0,0 +1,17 @@ + + + + +
+
+

+ I'm a card + +

+ + + +
+
+ + \ No newline at end of file diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js new file mode 100644 index 0000000000..b5fd533aa5 --- /dev/null +++ b/awesome_owl/static/src/counter/counter.js @@ -0,0 +1,17 @@ +import { Component,useState } from "@odoo/owl"; + +export class Counter extends Component { + static template = "awesome_owl.counter"; + static props = { + onChange : {type: Function, optional: true}, + } + + setup() { + this.state = useState({value: 0 }); + } + + increment() { + this.state.value++; + this.props.onChange() + } +} diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml new file mode 100644 index 0000000000..90afda65c7 --- /dev/null +++ b/awesome_owl/static/src/counter/counter.xml @@ -0,0 +1,16 @@ + + + + +
+ I count your clickies +
+

+ Counter: + +

+ + + diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js index 657fb8b07b..9825df4429 100644 --- a/awesome_owl/static/src/playground.js +++ b/awesome_owl/static/src/playground.js @@ -1,7 +1,23 @@ /** @odoo-module **/ -import { Component } from "@odoo/owl"; +import { Component, useState } from "@odoo/owl"; +import { Counter } from "./counter/counter"; +import { Card } from "./card/card"; +import { ToDoList } from "./todolist/todolist"; export class Playground extends Component { static template = "awesome_owl.playground"; + static components = { Counter, Card, ToDoList } + // title = markup("
I am a title
") + // content = markup("
some content
") + + setup() { + this.sum = useState({value: 2 }); + + } + + incrementSum() { + this.sum.value++; + } + } diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml index 4fb905d59f..0f0dd612f1 100644 --- a/awesome_owl/static/src/playground.xml +++ b/awesome_owl/static/src/playground.xml @@ -2,9 +2,20 @@ -
- hello world +
+

+ Hello World \(0o0)/ +

+ + + I'm a sum of all the clickies: +
+ + + +
+ diff --git a/awesome_owl/static/src/todoitem/todoitem.js b/awesome_owl/static/src/todoitem/todoitem.js new file mode 100644 index 0000000000..c78fc7b51e --- /dev/null +++ b/awesome_owl/static/src/todoitem/todoitem.js @@ -0,0 +1,15 @@ +import { Component,useState } from "@odoo/owl"; + +export class ToDoItem extends Component { + static template = "awesome_owl.todoitem"; + + static props = { + todo : {type: Object, optional: true}, + todo_index : {type: Number, optional: true}, + } + + removeTodo() { + this.props.todo.splice("props.todo_index", 1); + } + +} diff --git a/awesome_owl/static/src/todoitem/todoitem.xml b/awesome_owl/static/src/todoitem/todoitem.xml new file mode 100644 index 0000000000..cbe19912bd --- /dev/null +++ b/awesome_owl/static/src/todoitem/todoitem.xml @@ -0,0 +1,14 @@ + + + + +
+ +

+ +

+ + + diff --git a/awesome_owl/static/src/todolist/todolist.js b/awesome_owl/static/src/todolist/todolist.js new file mode 100644 index 0000000000..5416e85fc3 --- /dev/null +++ b/awesome_owl/static/src/todolist/todolist.js @@ -0,0 +1,27 @@ +import { Component,useState, useRef, onMounted } from "@odoo/owl"; +import { ToDoItem } from "../todoitem/todoitem"; +import { useAutofocus } from '../utils.js'; + + +export class ToDoList extends Component { + static template = "awesome_owl.todolist"; + static components = { ToDoItem }; + + setup (){ + this.todos = useState({todos_list:[], current_input: ""}); + useAutofocus('focus') + // alternative way + // this.focusRef = useRef('focus'); + // onMounted(() => { + // this.focus.el.focus() + // }) + } + + addTodo (ev){ + if (ev.keyCode === 13 && this.todos.current_input){ + this.todos.todos_list.push({ description: this.todos.current_input , isCompleted: false}) + this.todos.current_input = '' + } + } + +} diff --git a/awesome_owl/static/src/todolist/todolist.xml b/awesome_owl/static/src/todolist/todolist.xml new file mode 100644 index 0000000000..a640ebc284 --- /dev/null +++ b/awesome_owl/static/src/todolist/todolist.xml @@ -0,0 +1,12 @@ + + + + +

To Do List

+ +

+ +

+ + + diff --git a/awesome_owl/static/src/utils.js b/awesome_owl/static/src/utils.js new file mode 100644 index 0000000000..6e2d86e2e3 --- /dev/null +++ b/awesome_owl/static/src/utils.js @@ -0,0 +1,16 @@ +import { useRef, useEffect } from "@odoo/owl"; + +function useAutofocus(refname) { + + let ref = useRef(refname); + useEffect( + (el) => el && el.focus(), + () => [ref.el] + ); + + + } + +export { + useAutofocus +};