Skip to content

Commit 35610bc

Browse files
danal-odoodanal-odoo
committed
[IMP] awesome_owl: added todo component.
 added todo component and created todolist and todoitem. created function to add todo item by user. fixed layout to be look more organize.
1 parent ff459f4 commit 35610bc

File tree

8 files changed

+105
-14
lines changed

8 files changed

+105
-14
lines changed

‎awesome_owl/static/src/card/card.xml‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,14 @@
99
text-align:center;">
1010

1111
<div class="card-body" style="padding: 16px;">
12-
1312
<h4 class="card-title"
1413
style="background-color: #4c6ef5;
15-
color: white;
1614
margin: 0;
1715
padding: 10px 0;
1816
border-radius: 12px;
1917
font-size: 1.2rem;">
2018
<t t-out="props.title"/>
2119
</h4>
22-
2320
<p class="card-text"
2421
style="background-color: #69db7c;
2522
color: black;

‎awesome_owl/static/src/counter/counter.xml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<?xml version="1.0" encoding="UTF-8" ?>
22
<templates xml:space="preserve">
33
<t t-name="awesome_owl.counter">
4-
<div style="border: 2px solid black; border-radius: 12px; width: fit-content; padding: 10px; margin-top:10px;">
4+
<div style="border: 2px solid black; border-radius: 12px; width: fit-content; padding: 10px;">
55
<p style="font-weight: bold;">Counter: <t t-esc="state.value"/></p>
66
<button
77
t-on-click="increment"
8-
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px; margin-right: 5px">
8+
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px; margin:0px 5px 0px 0px">
99
Increment
1010
</button>
1111
<button
1212
t-on-click="decrement"
13-
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px; margin-right: 5px">
13+
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px; margin:5px 5px 0px 0px">
1414
Decrement
1515
</button>
1616
<button
1717
t-if="state.value != 0"
1818
t-on-click="reset"
19-
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px;">
19+
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px; margin:5px 0px 0px 0px">
2020
Reset
2121
</button>
2222
</div>

‎awesome_owl/static/src/playground.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { markup, Component, useState } from "@odoo/owl";
22
import { Counter } from "./counter/counter";
33
import { Card } from "./card/card";
4+
import { TodoList } from "./todo/todolist";
45

56
export class Playground extends Component {
67
static template = "awesome_owl.playground";
7-
static components = { Counter, Card };
8+
static components = { Counter, Card, TodoList };
89

910
setup() {
1011
this.state = useState({

‎awesome_owl/static/src/playground.xml‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
<?xml version="1.0" encoding="UTF-8" ?>
22
<templates xml:space="preserve">
33
<t t-name="awesome_owl.playground">
4-
<Counter onChange.bind="calculateSum"/>
5-
<Counter onChange.bind="calculateSum"/>
6-
<Card title="'Hello'" content="'World'"/>
74
<t t-out="this.state.content"/>
8-
<p style="font-weight: bold;">Sum: <t t-esc="state.sum"/></p>
9-
<button
5+
<div style="display:flex; align-items:center; gap:12px;">
6+
<Counter onChange.bind="calculateSum"/>
7+
<Counter onChange.bind="calculateSum"/>
8+
<Counter onChange.bind="calculateSum"/>
9+
</div>
10+
<div style="display:flex; align-items:center; gap:12px; margin-top:10px;">
11+
<p style="font-weight:bold; margin:0;">Sum: <t t-esc="state.sum"/></p>
12+
<button
1013
t-if="state.sum != 0"
1114
t-on-click="reset"
1215
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px;">
1316
Reset Sum
14-
</button>
17+
</button>
18+
</div>
19+
<Card title="'Hello'" content="'World'"/>
20+
<TodoList/>
1521
</t>
1622
</templates>

‎awesome_owl/static/src/todo/todoitem.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from "@odoo/owl";
2+
3+
4+
export class TodoItem extends Component {
5+
static template = "awesome_owl.todoitem";
6+
7+
static props = {
8+
todo: Object,
9+
};
10+
}

‎awesome_owl/static/src/todo/todoitem.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<templates xml:space="preserve">
3+
<t t-name="awesome_owl.todoitem">
4+
<div class="p-1" t-att-class="props.todo.isCompleted ? 'text-muted text-decoration-line-through' : ''">
5+
<span t-esc="props.todo.id"/>.
6+
<span t-esc="props.todo.description"/>
7+
</div>
8+
</t>
9+
</templates>

‎awesome_owl/static/src/todo/todolist.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Component, useState } from "@odoo/owl";
2+
import { TodoItem } from "./todoitem";
3+
4+
export class TodoList extends Component {
5+
static template = "awesome_owl.todolist";
6+
7+
static components = { TodoItem };
8+
9+
setup() {
10+
this.todos = useState([])
11+
}
12+
13+
addTodo(ev) {
14+
if (ev.keyCode == '13') {
15+
console.log(ev.target.value)
16+
if (ev.target.value != ""){
17+
this.todos.push({
18+
id: this.todos.length + 1,
19+
description: ev.target.value,
20+
isCompleted: false
21+
})
22+
ev.target.value = ''
23+
}
24+
}
25+
}
26+
}

‎awesome_owl/static/src/todo/todolist.xml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<templates xml:space="preserve">
3+
<t t-name="awesome_owl.todolist">
4+
<div class="card d-inline-block m-2"
5+
style="width: 18rem;
6+
border: 2px solid #444;
7+
border-radius: 16px;
8+
margin-top: 10px;
9+
text-align:center;">
10+
<div class="card-body" style="padding: 16px;">
11+
<h3 class="card-title"
12+
style="background-color: #4c6ef5;
13+
margin: 0;
14+
padding: 10px 0;
15+
border-radius: 12px;
16+
font-size: 1.2rem;">
17+
Todo List </h3>
18+
<input type="text"
19+
placeholder="Add a task..."
20+
style="width: 100%;
21+
padding: 10px 12px;
22+
margin-top: 12px;
23+
border: 2px solid #4c6ef5;
24+
border-radius: 10px;
25+
font-size: 1rem;
26+
outline: none;"
27+
t-on-keyup="addTodo"
28+
/>
29+
<div t-foreach="todos" t-as="todo" t-key="todo.id" style="background-color: #69db7c;
30+
color: black;
31+
margin: 12px 0 0 0;
32+
padding: 10px;
33+
border-radius: 12px;
34+
font-size: 1rem;" >
35+
<div t-att-class="{'text-muted': todo.isCompleted, 'text-decoration-line-through': todo.isCompleted}">
36+
<TodoItem todo="todo" />
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</t>
42+
</templates>

0 commit comments

Comments
 (0)