File tree Expand file tree Collapse file tree 12 files changed +150
-59
lines changed Expand file tree Collapse file tree 12 files changed +150
-59
lines changed Original file line number Diff line number Diff line change 1
1
/** @odoo -module **/
2
2
3
- import { Component } from "@odoo/owl" ;
3
+ import { Component , useState } from "@odoo/owl"
4
4
5
5
export class Card extends Component {
6
- static template = "awesome_owl.Card" ;
6
+ static template = "awesome_owl.Card"
7
7
static props = {
8
- title : { type : String } ,
9
- content : String ,
8
+ title : String ,
9
+ slots : {
10
+ type : Object ,
11
+ shape : { default : true } ,
12
+ } ,
13
+ } ;
14
+ setup ( ) {
15
+ this . state = useState ( { isToggled : true } ) ;
10
16
}
11
- }
17
+ toggle ( ) {
18
+ this . state . isToggled = ! this . state . isToggled ;
19
+ }
20
+ }
Original file line number Diff line number Diff line change 3
3
<t t-name =" awesome_owl.Card" >
4
4
<div class =" card d-inline-block m-2" style =" width: 18rem;" >
5
5
<div class =" card-body" >
6
- <h5 class =" card-title" ><t t-out =" props.title" /></h5 >
7
- <p class =" card-text" ><t t-out =" props.content" /></p >
6
+ <h5 class =" card-title" >
7
+ <t t-out =" props.title" />
8
+ <!-- <t t-out="props.content" /> -->
9
+ <button class =" btn" t-on-click =" toggle" >Toggle Button</button >
10
+ </h5 >
11
+ <p class =" card-text" t-if =" state.isToggled" >
12
+ <t t-slot =" default" />
13
+ </p >
8
14
</div >
9
15
</div >
10
16
</t >
11
- </templates >
17
+ </templates >
Original file line number Diff line number Diff line change @@ -18,4 +18,4 @@ export class Counter extends Component {
18
18
this . props . onChange ( this . state . value ) ;
19
19
}
20
20
}
21
- }
21
+ }
Original file line number Diff line number Diff line change 6
6
<button class =" btn btn-primary" t-on-click =" increment" style =" background-color: blue; color: white;" >Increment</button >
7
7
</div >
8
8
</t >
9
- </templates >
9
+ </templates >
Original file line number Diff line number Diff line change 1
1
/** @odoo -module **/
2
2
3
- import { Component , useState } from "@odoo/owl" ;
3
+ import { Component , markup , useState } from "@odoo/owl" ;
4
4
import { Counter } from "./counter/counter" ;
5
5
import { Card } from "./card/card" ;
6
- import { TodoList } from "./todolist/todo_list "
6
+ import { TodoList } from "./todolist/todolist "
7
7
8
8
export class Playground extends Component {
9
9
static template = "awesome_owl.playground" ;
@@ -15,4 +15,6 @@ export class Playground extends Component {
15
15
incrementSum ( value ) {
16
16
this . state . sum += 1 ;
17
17
}
18
+ content1 = "<div class='text-primary'>some content</div>"
19
+ content2 = markup ( "<div class='text-primary'>some content</div>" )
18
20
}
Original file line number Diff line number Diff line change 1
- <?xml version =" 1.0" encoding =" UTF-8" ?>
1
+ <?xml version =" 1.0" encoding =" UTF-8" ?>
2
2
<templates xml : space =" preserve" >
3
-
4
3
<t t-name =" awesome_owl.playground" >
5
- <div >
6
- <span >hello</span >
7
- <br />< br />
4
+ <div class = " p-3 " >
5
+ <span >hello world </span >
6
+ <Counter onChange.bind= " incrementSum " />
8
7
<Counter onChange.bind=" incrementSum" />
9
- <Counter onChange.bind=" incrementSum" />
10
8
</div >
11
9
<div >
12
- <p >the sum is : <t t-esc =" state.sum" /></p >
13
- </div ><br /><br />
14
- <Card title =" '1st card'" content =" 'first content'" />
15
- <Card title =" '2st card'" content =" 'this is real content'" />
16
- <Card title =" '3st card'" content =" 'last content'" />
17
-
18
- <TodoList />
10
+ <p >The Sum is: <t t-esc =" state.sum" /></p >
11
+ </div >
12
+ <div class =" p-5" >
13
+ <Card title =" 'card 1'" >
14
+ <p >This is the content of Card 1.</p >
15
+ </Card >
16
+ <Card title =" 'Card 2'" >
17
+ <Counter onChange.bind=" incrementSum" />
18
+ </Card >
19
+ </div >
20
+ <div class =" d-inline-flex border m-5 p-5" >
21
+ <TodoList />
22
+ </div >
19
23
</t >
20
-
21
24
</templates >
Load Diff This file was deleted.
Original file line number Diff line number Diff line change 1
1
/** @odoo -module **/
2
2
3
- import { Component , xml } from "@odoo/owl" ;
3
+ import { Component } from "@odoo/owl" ;
4
4
5
5
export class TodoItem extends Component {
6
- static template = xml /* xml */ `
7
- <div>
8
- <t t-esc="props.todo.id"/> .
9
- <t t-esc="props.todo.description" />
10
- </div>
11
- ` ;
12
-
6
+ static template = "awesome_owl.TodoItem" ;
13
7
static props = {
14
8
todo : {
15
9
type : Object ,
@@ -20,5 +14,7 @@ export class TodoItem extends Component {
20
14
} ,
21
15
optional : false ,
22
16
} ,
17
+ toggleState : Function ,
18
+ todoDelete : Function ,
23
19
} ;
24
- }
20
+ }
Original file line number Diff line number Diff line change
1
+ <?xml version =" 1.0" encoding =" UTF-8" ?>
2
+ <templates xml : space =" preserve" >
3
+ <t t-name =" awesome_owl.TodoItem" >
4
+ <div t-attf-class =" mb-2 p-2 border rounded {{ props.todo.isCompleted ? 'text-muted text-decoration-line-through' : '' }}" >
5
+ <input type =" checkbox"
6
+ t-att-checked =" props.todo.isCompleted"
7
+ t-on-change =" () => props.toggleState(props.todo.id)" />
8
+ <t t-esc =" props.todo.id" /> .
9
+ <t t-esc =" props.todo.description" />
10
+ <span class =" fa fa-remove text-danger ms-2"
11
+ style =" cursor: pointer"
12
+ t-on-click =" () => props.todoDelete(props.todo.id)" />
13
+ </div >
14
+ </t >
15
+ </templates >
Original file line number Diff line number Diff line change
1
+ /** @odoo -module **/
2
+
3
+ import { Component , useState } from "@odoo/owl" ;
4
+ import { TodoItem } from "./todoitem" ;
5
+ import { useAutofocus } from "../utils/utils" ;
6
+
7
+ export class TodoList extends Component {
8
+ static template = "awesome_owl.TodoList" ;
9
+ static components = { TodoItem } ;
10
+
11
+ setup ( ) {
12
+ this . state = useState ( {
13
+ text : "" ,
14
+ todos : [ ] ,
15
+ nextId : 1 ,
16
+ } ) ;
17
+ this . inputRef = useAutofocus ( "input" ) ;
18
+ this . toggleState = this . toggleState . bind ( this ) ;
19
+ this . todoDelete = this . todoDelete . bind ( this ) ;
20
+ }
21
+
22
+ addTodo ( ev ) {
23
+ if ( ev . key === "Enter" ) {
24
+ const description = this . state . text . trim ( ) ;
25
+ if ( ! description ) return ;
26
+
27
+ this . state . todos . push ( {
28
+ id : this . state . nextId ++ ,
29
+ description : description ,
30
+ isCompleted : false ,
31
+ } ) ;
32
+ this . state . text = "" ;
33
+ }
34
+ }
35
+
36
+ toggleState ( todoId ) {
37
+ const todo = this . state . todos . find ( ( t ) => t . id === todoId ) ;
38
+ if ( todo ) {
39
+ todo . isCompleted = ! todo . isCompleted ;
40
+ }
41
+ }
42
+ todoDelete ( todoId ) {
43
+ const index = this . state . todos . findIndex ( ( t ) => t . id === todoId ) ;
44
+ if ( index >= 0 ) {
45
+ this . state . todos . splice ( index , 1 ) ;
46
+ for ( let i = index ; i < this . state . todos . length ; i ++ ) {
47
+ this . state . todos [ i ] . id = i + 1 ;
48
+ }
49
+ }
50
+ this . state . nextId = this . state . todos . length + 1 ;
51
+ }
52
+ }
You can’t perform that action at this time.
0 commit comments