Skip to content

18.0 tutorial js clom #799

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 11 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
34 changes: 34 additions & 0 deletions awesome_owl/static/src/card/card.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@

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

export class Card extends Component {
static template = xml`
<div class="card d-inline-block m-2">
<div class="card-header">
<button class="btn btn-primary" t-on-click="() => state.state=!state.state">Toggle</button>
</div>
<div t-if="state.state">
<h5 class="card-title"><t t-esc="state.title"/></h5>
<p class="card-text">
<t t-slot="default"/>
</p>
</div>
</div>`;
static props = {
title: String,
slots: {
type: Object,
shape: {
default: true
},
}
}

setup() {
this.state = useState({ title: this.props.title, state: true})
}

toggle() {

}
}
21 changes: 21 additions & 0 deletions awesome_owl/static/src/counter/counter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@

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++;
if (this.props.onChange) {
this.props.onChange();
}
}

}
9 changes: 9 additions & 0 deletions awesome_owl/static/src/counter/counter.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="awesome_owl.counter">
<div class="m-2 p-2 border d-inline-block">
<p>Counter: <t t-esc="state.value"/></p>
<button class="btn btn-primary" t-on-click="increment">Increment</button>
</div>
</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 "./todolist/todolist";

export class Playground extends Component {
static template = "awesome_owl.playground";
static components = { Counter, Card, TodoList };


setup() {
this.someHTML = markup("<div class='text-primary'>some content</div>");
this.someText = "<div class='text-primary'>some content</div>";
this.sum = useState({ value: 0 });
}

incrementSum() {
this.sum.value++;
}
}
14 changes: 13 additions & 1 deletion awesome_owl/static/src/playground.xml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,19 @@

<t t-name="awesome_owl.playground">
<div class="p-3">
hello world
<div>
hello world
<Counter onChange.bind="incrementSum"/>
<Counter onChange.bind="incrementSum"/>
<Card title="'My Card'">
<Counter onChange.bind="incrementSum"/>
</Card>
<Card title="'Card 2'">
My little Card
</Card>
<t t-esc="this.sum.value.toString()"/>
</div>
<TodoList />
</div>
</t>

Expand Down
32 changes: 32 additions & 0 deletions awesome_owl/static/src/todolist/todoitem.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@

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

export class TodoItem extends Component {
static template = xml`
<div t-att-id="'todo-' + this.todo.value.id" t-att-class="{'text-muted': this.todo.value.isCompleted, 'text-decoration-line-through': this.todo.value.isCompleted}">
<input type="checkbox" t-att-checked="isCompleted" t-on-change="onChange"/>
<t t-esc="todo.value.id"/>. <t t-esc="todo.value.description"/>
<span class="fa fa-remove" t-on-click="onDelete"/>
</div>`;
static props = {
todo : {
id: { type: Number },
description: { type: String },
isCompleted: { type: Boolean }
},
toggleState: { type: Function },
removeTodo: Function
}

setup() {
this.todo = useState({ value: this.props.todo })
}

onChange() {
this.props.toggleState(this.props.todo.id)
}

onDelete() {
this.props.removeTodo(this.props.todo.id);
}
}
47 changes: 47 additions & 0 deletions awesome_owl/static/src/todolist/todolist.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@

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([]);

useAutofocus("myInput");
}

addTodo(ev) {
if (ev.keyCode === 13) {
var todoId;
if (this.todos.length == 0) {
todoId = 1;
} else {
todoId = this.todos[this.todos.length -1].id + 1;
}
var content = document.querySelector(".todo_content");
if (content.value != "") {
this.todos.push({ id: todoId, description: content.value, isCompleted: false });
content.value = "";
}
}
}

toggleState(todoId) {
const todo = this.todos.find((todo) => todo.id == todoId)
if (todo) {
todo.isCompleted = !todo.isCompleted;
}
}

removeTodo(todoId) {
// find the index of the todo to delete
const indexTodo = this.todos.findIndex((elem) => elem.id === todoId);
if (indexTodo >= 0) {
// remove the todo at index from todos
this.todos.splice(indexTodo, 1);
}
}
}
13 changes: 13 additions & 0 deletions awesome_owl/static/src/todolist/todolist.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">

<t t-name="awesome_owl.todolist">
<div class="card d-inline-block m-2">
<input t-ref="myInput" class="todo_content" placeholder="Enter a new task" t-on-keyup="ev => this.addTodo(ev)"/>
<t t-foreach="todos" t-as="i" t-key="i.id">
<TodoItem todo="i" toggleState.bind="toggleState" removeTodo.bind="removeTodo"/>
</t>
</div>
</t>

</templates>
10 changes: 10 additions & 0 deletions awesome_owl/static/src/todolist/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@

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

export function useAutofocus(name) {
let ref = useRef(name);
useEffect(
(el) => el && el.focus(),
() => [ref.el]
);
}