Skip to content

[IMP] Tutorial on Owl Components 🦉 #802

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: 18.0
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion awesome_owl/controllers/__init__.py
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# -*- coding: utf-8 -*-

from . import controllers
from . import controllers
21 changes: 21 additions & 0 deletions awesome_owl/static/src/card/card.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/** @odoo-module **/

import { Component, useState} from "@odoo/owl";

export class Card extends Component {
static template = "awesome_owl.card";
static props = {
title: String,
slots: Object,
// content: String
};

setup() {
this.isOpen = useState({value:true});
}

toggleCardVisibility() {
this.isOpen.value = !this.isOpen.value;
}

}
19 changes: 19 additions & 0 deletions awesome_owl/static/src/card/card.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="awesome_owl.card">
<div class="card d-inline-block m-2" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">
<t t-esc="props.title"/> |
<button t-on-click="toggleCardVisibility">Toggle</button>
</h5>

<t t-if="isOpen.value" t-slot="body">
<p class="card-text">
Default Content
</p>
</t>
</div>
</div>
</t>
</templates>
23 changes: 23 additions & 0 deletions awesome_owl/static/src/counter/counter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/** @odoo-module **/

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.state.value + 1;

if(this.props.onChange){
this.props.onChange()
}
}
}
7 changes: 7 additions & 0 deletions awesome_owl/static/src/counter/counter.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="awesome_owl.counter">
<span class="me-2">Counter: <t t-esc="state.value"/></span>
<button class="btn btn-primary" t-on-click="increment">Increment</button>
</t>
</templates>
17 changes: 16 additions & 1 deletion awesome_owl/static/src/playground.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,22 @@
/** @odoo-module **/

import { Component } from "@odoo/owl";
import { Component, useState, markup} from "@odoo/owl";
import { Counter } from "./counter/counter"
import { Card } from "./card/card";
import { TodoList } from "./todo_list/todo_list";


export class Playground extends Component {
static template = "awesome_owl.playground";
static components = { Counter, Card, TodoList}
html_stuff = markup("<h2>hello</h2>")

setup() {
this.incrementSum = this.incrementSum.bind(this)
this.state = useState({ sum:0 });
}

incrementSum() {
this.state.sum++;
}
}
20 changes: 15 additions & 5 deletions awesome_owl/static/src/playground.xml
Original file line number Diff line number Diff line change
@@ -1,10 +1,20 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">

<t t-name="awesome_owl.playground">
<div class="p-3">
hello world
</div>
</t>
<Counter onChange="incrementSum"/>
<Counter onChange="incrementSum"/>
<p>Sum: <t t-esc="state.sum"/></p>
<br/>

<Card title="'Card 1'" >
</Card>
<Card title="'Card 2'">
<t t-set-slot="body">
<Counter/>
</t>
</Card>
<br/>

<TodoList/>
</t>
</templates>
23 changes: 23 additions & 0 deletions awesome_owl/static/src/todo_list/todo_item/todo_item.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/** @odoo-module **/

import { Component, useState, markup} from "@odoo/owl";


export class TodoItem extends Component {
static template = "awesome_owl.todo_item";

static props = {
todo: {type: Object, shape: {id: Number, description: String, isCompleted: Boolean}},
index: Number,
checkboxAction: Function,
removeAction: Function
}

checkboxChanged() {
this.props.checkboxAction(this.props.index)
}

removed() {
this.props.removeAction(this.props.index)
}
}
10 changes: 10 additions & 0 deletions awesome_owl/static/src/todo_list/todo_item/todo_item.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="awesome_owl.todo_item">
<div t-att-class="{'text-muted': props.todo.isCompleted,'text-decoration-line-through': props.todo.isCompleted}">
<input type="checkbox" t-att-checked="props.todo.isCompleted" t-on-change='checkboxChanged'/>
<t t-esc="props.index"/>&#41; <t t-esc="props.todo.description"/>
<span class="fa fa-remove" t-on-click="removed"/>
</div>
</t>
</templates>
36 changes: 36 additions & 0 deletions awesome_owl/static/src/todo_list/todo_list.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/** @odoo-module **/

import { Component, useState, useRef, onMounted} from "@odoo/owl";
import { TodoItem } from "./todo_item/todo_item"
import { useAutoFocus } from "./../utils"


export class TodoList extends Component {
static template = "awesome_owl.todo_list";
static components = { TodoItem }

setup() {
this.todos = useState([]);
useAutoFocus('todo_input');
this.toggleTodoState = this.toggleTodoState.bind(this);
this.removeTodoState = this.removeTodoState.bind(this);
}

addTodo(ev) {
console.log("creating a Todo")
if(ev.keyCode === 13 && ev.target.value){
this.todos.push({ id: this.todos.length, description: ev.target.value, isCompleted: false });
}
}

toggleTodoState(index) {
const target = this.todos[index];
target.isCompleted = !target.isCompleted
}

removeTodoState(index) {
if (index !== -1) {
this.todos.splice(index, 1);
}
}
}
10 changes: 10 additions & 0 deletions awesome_owl/static/src/todo_list/todo_list.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="awesome_owl.todo_list">
<input t-ref="todo_input" t-on-keyup="addTodo" placeholder="'Enter a new task'"></input>
<h4>Todo List:</h4>
<t t-foreach="todos" t-as="item" t-key="item_index">
<TodoItem todo="item" index="item_index" checkboxAction="toggleTodoState" removeAction="removeTodoState"/>
</t>
</t>
</templates>
12 changes: 12 additions & 0 deletions awesome_owl/static/src/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/** @odoo-module **/

import { useRef, onMounted } from "@odoo/owl";

export function useAutoFocus(ref_name) {
const refProxy = useRef(ref_name)
onMounted(() => {
if (refProxy.el) {
refProxy.el.focus()
}
})
}