Skip to content

Commit 081eea5

Browse files
committed
[IMP] awesome_owl: added markup(),props validation, sum counter
added markup() to render html element from component. added props validation in content in Card component. added calculateSum function to calculate sum of counter.
1 parent 0c18fc2 commit 081eea5

File tree

7 files changed

+87
-35
lines changed

7 files changed

+87
-35
lines changed

awesome_owl/static/src/card/card.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ export class Card extends Component {
44
static template = "awesome_owl.card";
55
static props = {
66
title: String,
7-
content: String
7+
content: {
8+
type: String,
9+
validate: c => c == "World"
10+
},
811
};
912
}
Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,37 @@
11
<?xml version="1.0" encoding="UTF-8" ?>
22
<templates xml:space="preserve">
33
<t t-name="awesome_owl.card">
4-
<div class="card d-inline-block m-2" style="width: 18rem; border: 2px solid black; border-radius: 12px; margin-top: 10px; text-align:center;">
5-
<div class="card-body">
6-
<h4 class="card-title" style="background-color: blue; margin:0; border-radius:14px;">
7-
<t t-esc="props.title"/>
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+
11+
<div class="card-body" style="padding: 16px;">
12+
13+
<h4 class="card-title"
14+
style="background-color: #4c6ef5;
15+
color: white;
16+
margin: 0;
17+
padding: 10px 0;
18+
border-radius: 12px;
19+
font-size: 1.2rem;">
20+
<t t-out="props.title"/>
821
</h4>
9-
<p class="card-text" style="background-color: green; margin:10px; border-radius:14px;">
10-
<t t-esc="props.content"/>
22+
23+
<p class="card-text"
24+
style="background-color: #69db7c;
25+
color: black;
26+
margin: 12px 0 0 0;
27+
padding: 10px;
28+
border-radius: 12px;
29+
font-size: 1rem;">
30+
<t t-out="props.content"/>
1131
</p>
32+
1233
</div>
1334
</div>
35+
1436
</t>
1537
</templates>

awesome_owl/static/src/counter/counter.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,25 @@ import { Component, useState } from "@odoo/owl";
22

33
export class Counter extends Component {
44
static template = "awesome_owl.counter";
5-
5+
static props = {
6+
onChange: { type: Function, optional: true }
7+
}
68
setup() {
79
this.state = useState({ value: 0 });
810
}
911

1012
increment() {
1113
this.state.value++;
14+
if (this.props.onChange){
15+
this.props.onChange(1);
16+
}
1217
}
1318

1419
decrement() {
1520
this.state.value--;
21+
if (this.props.onChange) {
22+
this.props.onChange(-1);
23+
}
1624
}
1725

1826
reset() {

awesome_owl/static/src/counter/counter.xml

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,23 @@
22
<templates xml:space="preserve">
33
<t t-name="awesome_owl.counter">
44
<div style="border: 2px solid black; border-radius: 12px; width: fit-content; padding: 10px; margin-top:10px;">
5-
<p>Counter: <t t-esc="state.value"/></p>
6-
<button class="btn btn-primary" t-on-click="increment">Increment</button>
7-
<button class="btn btn-primary" t-on-click="decrement">Decrement</button>
8-
<button t-if="state.value != 0" class="btn btn-primary" t-on-click="reset">Reset</button>
5+
<p style="font-weight: bold;">Counter: <t t-esc="state.value"/></p>
6+
<button
7+
t-on-click="increment"
8+
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px; margin-right: 5px">
9+
Increment
10+
</button>
11+
<button
12+
t-on-click="decrement"
13+
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px; margin-right: 5px">
14+
Decrement
15+
</button>
16+
<button
17+
t-if="state.value != 0"
18+
t-on-click="reset"
19+
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px;">
20+
Reset
21+
</button>
922
</div>
1023
</t>
1124
</templates>
Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
1-
import { Component, useState } from "@odoo/owl";
1+
import { markup, Component, useState } from "@odoo/owl";
22
import { Counter } from "./counter/counter";
33
import { Card } from "./card/card";
44

55
export class Playground extends Component {
66
static template = "awesome_owl.playground";
7-
static components = {Counter,Card};
7+
static components = { Counter, Card };
88

99
setup() {
10-
this.state = useState({ value: 0 });
10+
this.state = useState({
11+
content: markup('<h1>Welcome to your Counter!</h1>'),
12+
sum: 0
13+
});
1114
}
1215

13-
increment() {
14-
this.state.value++;
15-
}
16-
17-
decrement() {
18-
this.state.value--;
16+
calculateSum(newValue) {
17+
if (newValue > 0){
18+
this.state.sum++;
19+
}
20+
if (newValue < 0){
21+
this.state.sum--;
22+
}
1923
}
2024

2125
reset(){
22-
this.state.value = 0;
26+
this.state.sum = 0
2327
}
2428
}
Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<?xml version="1.0" encoding="UTF-8" ?>
22
<templates xml:space="preserve">
33
<t t-name="awesome_owl.playground">
4-
<div style="border: 2px solid black; border-radius: 12px; width: fit-content; padding: 10px; margin-top:5px;">
5-
<p>Counter: <t t-esc="state.value"/></p>
6-
<button class="btn btn-primary" t-on-click="increment">Increment</button>
7-
<button class="btn btn-primary" t-on-click="decrement">Decrement</button>
8-
<button t-if="state.value != 0" class="btn btn-primary" t-on-click="reset">Reset</button>
9-
</div>
10-
<Counter/>
11-
<Card title="'Hello'" content="'word'"/>
12-
<Card title="'New'" content="'Card'"/>
4+
<Counter onChange.bind="calculateSum"/>
5+
<Counter onChange.bind="calculateSum"/>
6+
<Card title="'Hello'" content="'World'"/>
7+
<t t-out="this.state.content"/>
8+
<p style="font-weight: bold;">Sum: <t t-esc="state.sum"/></p>
9+
<button
10+
t-if="state.sum != 0"
11+
t-on-click="reset"
12+
style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px;">
13+
Reset Sum
14+
</button>
1315
</t>
1416
</templates>
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
"id","name","model_id:id","group_id:id","perm_read","perm_write","perm_create","perm_unlink"
2-
estate.access_estate_property,"access_estate_property",estate.model_estate_property,base.group_user,1,1,1,1
3-
estate.access_estate_property_type,"access_estate_property_type",estate.model_estate_property_type,base.group_user,1,1,1,1
4-
estate.access_estate_property_tag,"access_estate_property_tag",estate.model_estate_property_tag,base.group_user,1,1,1,1
5-
estate.access_estate_property_offer,"access_estate_property_offer",estate.model_estate_property_offer,base.group_user,1,1,1,1
2+
estate.access_estate_property,"access_estate_property","model_estate_property",base.group_user,1,1,1,1
3+
estate.access_estate_property_type,"access_estate_property_type","model_estate_property_type",base.group_user,1,1,1,1
4+
estate.access_estate_property_tag,"access_estate_property_tag","model_estate_property_tag",base.group_user,1,1,1,1
5+
estate.access_estate_property_offer,"access_estate_property_offer","model_estate_property_offer",base.group_user,1,1,1,1

0 commit comments

Comments
 (0)