diff --git a/.gitignore b/.gitignore index b6e47617de1..b97131ebb08 100644 --- a/.gitignore +++ b/.gitignore @@ -127,3 +127,5 @@ dmypy.json # Pyre type checker .pyre/ + +.idea/ diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js new file mode 100644 index 00000000000..c3746093e83 --- /dev/null +++ b/awesome_owl/static/src/card/card.js @@ -0,0 +1,16 @@ +import {Component, markup, useState} from "@odoo/owl"; + + +export class Card extends Component { + static template = "awesome_owl.card"; + static props = {title: {type: String}, slots: {type: Object}}; + + html_jojo_joke = "

Jojo be like muda muda muda muda (less funny when you write it)

"; + html_markup_jojo_joke = markup("

Jojo be like muda muda muda muda (less funny when you write it)

"); + + state = useState({isOpened: true}); + + toggleVisibility() { + this.state.isOpened = !this.state.isOpened; + } +} diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml new file mode 100644 index 00000000000..67cf77d4117 --- /dev/null +++ b/awesome_owl/static/src/card/card.xml @@ -0,0 +1,16 @@ + + + +
+
+
+ +

+ + + +

+
+
+ + diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js new file mode 100644 index 00000000000..518209710e8 --- /dev/null +++ b/awesome_owl/static/src/counter/counter.js @@ -0,0 +1,13 @@ +import { Component, useState } from "@odoo/owl"; + + +export class Counter extends Component { + static template = "awesome_owl.counter"; + + state = useState({ value: 0 }); + + increment() { + this.state.value++; + this.props.onClick(); + } +} diff --git a/awesome_owl/static/src/counter/counter.xml b/awesome_owl/static/src/counter/counter.xml new file mode 100644 index 00000000000..1f9e9418098 --- /dev/null +++ b/awesome_owl/static/src/counter/counter.xml @@ -0,0 +1,15 @@ + + + + +
+
+ Counter: +
+
+ +
+
+ + + diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js index 657fb8b07bb..3ae9281abd0 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 "./todo/todo_list"; + export class Playground extends Component { static template = "awesome_owl.playground"; + + static components = {Counter, Card, TodoList}; + + state = useState({globalCount: 0}) + + setup() { + this.incrementBind = this.increment.bind(this); + } + + increment() { + this.state.globalCount++; + } } diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml index 4fb905d59f9..3754a53284a 100644 --- a/awesome_owl/static/src/playground.xml +++ b/awesome_owl/static/src/playground.xml @@ -2,8 +2,49 @@ -
- hello world +
+
+ hello world +
+
+ +
+
+ +
+
+
+
+ Global count: +
+
+
+
+ + Star Platinum + + +
+
+ + Hierophant green + Global count: + +
+
+ + Silver Chariot + + Silver Chariot again + Global count: + + +
+
+
+
+ +
diff --git a/awesome_owl/static/src/todo/todo_item.js b/awesome_owl/static/src/todo/todo_item.js new file mode 100644 index 00000000000..4bb47c7a0bd --- /dev/null +++ b/awesome_owl/static/src/todo/todo_item.js @@ -0,0 +1,12 @@ +import {Component} from "@odoo/owl"; +import {Todo} from "./todo_model"; + + +export class TodoItem extends Component { + static template = "awesome_owl.todo_item"; + static props = { + model: { type: Todo }, + toggle: { type: Function }, + removeTodo: { type: Function }, + }; +} diff --git a/awesome_owl/static/src/todo/todo_item.xml b/awesome_owl/static/src/todo/todo_item.xml new file mode 100644 index 00000000000..bc7bda55cf0 --- /dev/null +++ b/awesome_owl/static/src/todo/todo_item.xml @@ -0,0 +1,12 @@ + + + +

+ + . + + +

+ + diff --git a/awesome_owl/static/src/todo/todo_list.js b/awesome_owl/static/src/todo/todo_list.js new file mode 100644 index 00000000000..685361f8b06 --- /dev/null +++ b/awesome_owl/static/src/todo/todo_list.js @@ -0,0 +1,42 @@ +import {Component, useState} from "@odoo/owl"; +import {TodoItem} from "./todo_item"; +import {Todo} from "./todo_model"; +import {useAutoFocus} from "../utils"; + + +export class TodoList extends Component { + static template = "awesome_owl.todo_list"; + static components = {TodoItem}; + + index = 0; + state = useState({todos: []}); + + setup() { + useAutoFocus('addTaskInput') + this.toggleStateBind = this.toggleState.bind(this); + this.removeTodoBind = this.removeTodo.bind(this); + } + + keyUpAddTodo(ev) { + if (ev.keyCode === 13 && ev.target.value !== "") { + this.state.todos.push(new Todo(this.index + 1, ev.target.value, false)); + this.index++; + ev.target.value = ""; + } + } + + toggleState(id) { + this.state.todos.forEach((value, index, arr) => { + if (value.id === id) { + value.toggle(); + } + }) + } + + removeTodo(id) { + const index = this.state.todos.findIndex((todo) => todo.id === id); + if (index >= 0) { + this.state.todos.splice(index, 1); + } + } +} diff --git a/awesome_owl/static/src/todo/todo_list.xml b/awesome_owl/static/src/todo/todo_list.xml new file mode 100644 index 00000000000..cd4ee9ed0fe --- /dev/null +++ b/awesome_owl/static/src/todo/todo_list.xml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/awesome_owl/static/src/todo/todo_model.js b/awesome_owl/static/src/todo/todo_model.js new file mode 100644 index 00000000000..4ced2b48328 --- /dev/null +++ b/awesome_owl/static/src/todo/todo_model.js @@ -0,0 +1,11 @@ +export class Todo { + constructor(id, description, isCompleted) { + this.id = id; + this.description = description; + this.isCompleted = isCompleted; + } + + toggle() { + this.isCompleted = !this.isCompleted; + } +} diff --git a/awesome_owl/static/src/utils.js b/awesome_owl/static/src/utils.js new file mode 100644 index 00000000000..d64f94484c2 --- /dev/null +++ b/awesome_owl/static/src/utils.js @@ -0,0 +1,9 @@ +import {useRef, onMounted} from "@odoo/owl"; + + +export function useAutoFocus(name) { + const ref = useRef(name); + onMounted(() => { + ref.el.focus(); + }); +}