Skip to content

Commit 4a394e3

Browse files
danal-odoodanal-odoo
committed
[IMP] awesome_owl: added todo component and made card component dynamic.
created todo component and in that component created todoitem and todolist. added todoitem in todolist to get all created todoitem with todolist using props. added todolist in playground.js to render all todolist. made card component dynamic by using slots prop by seting type to object. added card toogle button to show card content or not. made offer action button invisible if one offer is accepted.
1 parent 35610bc commit 4a394e3

File tree

12 files changed

+137
-63
lines changed

12 files changed

+137
-63
lines changed

‎awesome_owl/static/src/card/card.js‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
1-
import { Component } from "@odoo/owl";
1+
import { Component, useState } from "@odoo/owl";
2+
23

34
export class Card extends Component {
45
static template = "awesome_owl.card";
56
static props = {
67
title: String,
7-
content: {
8-
type: String,
9-
validate: c => c == "World"
10-
},
8+
slots : {
9+
type: Object,
10+
shape: {
11+
default: {}
12+
}
13+
}
1114
};
15+
16+
setup(){
17+
this.state = useState([{
18+
isOpen: false
19+
}])
20+
}
21+
22+
toggleCard(){
23+
this.state.isOpen = !this.state.isOpen
24+
}
1225
}

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

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@
55
style="width: 18rem;
66
border: 2px solid #444;
77
border-radius: 16px;
8-
margin-top: 10px;
9-
text-align:center;">
10-
11-
<div class="card-body" style="padding: 16px;">
8+
margin-top: 10px;">
9+
<button
10+
t-on-click="toggleCard"
11+
style="background:#6a5acd; color:white; cursor: pointer; border:none; padding:8px 18px; border-radius:8px; margin:5px;">
12+
Toggle
13+
</button>
14+
<div class="card-body" style="padding: 16px; text-align:center;">
1215
<h4 class="card-title"
1316
style="background-color: #4c6ef5;
1417
margin: 0;
@@ -17,18 +20,13 @@
1720
font-size: 1.2rem;">
1821
<t t-out="props.title"/>
1922
</h4>
20-
<p class="card-text"
21-
style="background-color: #69db7c;
22-
color: black;
23-
margin: 12px 0 0 0;
24-
padding: 10px;
25-
border-radius: 12px;
26-
font-size: 1rem;">
27-
<t t-out="props.content"/>
28-
</p>
29-
23+
<div class="card-body"
24+
style="margin: 12px 0 0 0;
25+
padding: 10px;"
26+
t-if="this.state.isOpen">
27+
<t t-slot="default"/>
28+
</div>
3029
</div>
3130
</div>
32-
3331
</t>
3432
</templates>

‎awesome_owl/static/src/counter/counter.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { Component, useState } from "@odoo/owl";
22

3+
34
export class Counter extends Component {
45
static template = "awesome_owl.counter";
56
static props = {
67
onChange: { type: Function, optional: true }
78
}
9+
810
setup() {
911
this.state = useState({ value: 0 });
1012
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@
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:0px 5px 0px 0px">
8+
style="background:#6a5acd; cursor: pointer; 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:5px 5px 0px 0px">
13+
style="background:#6a5acd; cursor: pointer; 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; margin:5px 0px 0px 0px">
19+
style="background:#6a5acd; cursor: pointer; 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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Counter } from "./counter/counter";
33
import { Card } from "./card/card";
44
import { TodoList } from "./todo/todolist";
55

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

‎awesome_owl/static/src/playground.xml‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,30 @@
1212
<button
1313
t-if="state.sum != 0"
1414
t-on-click="reset"
15-
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px;">
15+
style="background:#6a5acd; cursor: pointer; color:white; border:none; padding:8px 18px; border-radius:8px;">
1616
Reset Sum
1717
</button>
1818
</div>
19-
<Card title="'Hello'" content="'World'"/>
2019
<TodoList/>
20+
<div style="display:flex; align-items:center; gap:12px; margin-top:10px;">
21+
<Card title="'Hello'">
22+
<t t-slot="default">
23+
<Counter onChange.bind="calculateSum"/>
24+
</t>
25+
</Card>
26+
<Card title="'Hello'">
27+
<t t-slot="default">
28+
<p class="card-text"
29+
style="background-color: #69db7c;
30+
color: black;
31+
padding: 10px;
32+
margin: 0px;
33+
border-radius: 12px;
34+
font-size: 1rem;">
35+
Hello World
36+
</p>
37+
</t>
38+
</Card>
39+
</div>
2140
</t>
2241
</templates>

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,17 @@ import { Component } from "@odoo/owl";
33

44
export class TodoItem extends Component {
55
static template = "awesome_owl.todoitem";
6-
76
static props = {
87
todo: Object,
8+
toggleState: Function,
9+
removeTodo: Function
910
};
11+
12+
toggleIsCompleted(){
13+
this.props.toggleState(this.props.todo.id)
14+
}
15+
16+
onClickRremove(){
17+
this.props.removeTodo(this.props.todo.id)
18+
}
1019
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<templates xml:space="preserve">
33
<t t-name="awesome_owl.todoitem">
4-
<div class="p-1" t-att-class="props.todo.isCompleted ? 'text-muted text-decoration-line-through' : ''">
4+
<div class="p-1" t-att-class="props.todo.isCompleted ? 'text-muted text-decoration-line-through' : ''" style="font-weight: bold;">
5+
<input type="checkbox" t-att-checked="props.todo.isCompleted" t-on-change="toggleIsCompleted"/>
56
<span t-esc="props.todo.id"/>.
67
<span t-esc="props.todo.description"/>
8+
<span style="margin-left: 10px; cursor: pointer;" t-on-click="onClickRremove">❌</span>
79
</div>
810
</t>
911
</templates>

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import { Component, useState } from "@odoo/owl";
22
import { TodoItem } from "./todoitem";
3+
import { useAutofocus } from "../utils";
4+
35

46
export class TodoList extends Component {
57
static template = "awesome_owl.todolist";
6-
78
static components = { TodoItem };
89

910
setup() {
1011
this.todos = useState([])
12+
useAutofocus("todo_input")
1113
}
1214

1315
addTodo(ev) {
14-
if (ev.keyCode == '13') {
15-
console.log(ev.target.value)
16+
if (ev.keyCode == '13') {
1617
if (ev.target.value != ""){
1718
this.todos.push({
1819
id: this.todos.length + 1,
@@ -23,4 +24,16 @@ export class TodoList extends Component {
2324
}
2425
}
2526
}
27+
28+
toggleState(id) {
29+
const todo = this.todos.find(todo => todo.id == id)
30+
todo.isCompleted = !todo.isCompleted;
31+
}
32+
33+
removeTodo(id){
34+
const index = this.todos.findIndex((elem) => elem.id === id);
35+
if (index >= 0){
36+
this.todos.splice(index,1)
37+
}
38+
}
2639
}

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

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,44 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<templates xml:space="preserve">
33
<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;
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
18+
</h3>
19+
<input type="text"
20+
t-ref="todo_input"
21+
placeholder="Add a task..."
22+
style="width: 100%;
23+
padding: 10px 12px;
24+
margin-top: 12px;
25+
border: 2px solid #4c6ef5;
26+
border-radius: 10px;
27+
font-size: 1rem;
28+
outline: none;"
29+
t-on-keyup="addTodo"
30+
/>
31+
<div t-foreach="todos" t-as="todo" t-key="todo.id" style="background-color: #69db7c;
32+
color: black;
33+
margin: 12px 0 0 0;
34+
padding: 10px;
1535
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" />
36+
font-size: 1rem;" >
37+
<div t-att-class="{'text-muted': todo.isCompleted, 'text-decoration-line-through': todo.isCompleted}">
38+
<TodoItem todo="todo" toggleState.bind="toggleState" removeTodo.bind="removeTodo"/>
39+
</div>
3740
</div>
3841
</div>
3942
</div>
40-
</div>
4143
</t>
4244
</templates>

0 commit comments

Comments
 (0)