Skip to content

Commit bea9059

Browse files
utpat-odooutpat-odoo
committed
[IMP] awesome_owl: added deletetodo function and made card component dynamic.
added function to remove todo from todo list. added function to toggle isCompleted in todo made card component dynamic by using slots prop by setting type to object added auto refuse cron job in estate_property_offer model. added property_id in account.move.form before partner_shipping_id
1 parent b633817 commit bea9059

File tree

18 files changed

+204
-46
lines changed

18 files changed

+204
-46
lines changed

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

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

33

44
export class Card extends Component {
5-
static template = "awesome_owl.Card";
5+
static template = "awesome_owl.card";
66
static props = {
77
title: String,
8-
content: String,
8+
slots: {
9+
type: Object,
10+
shape: {
11+
default: {}
12+
}
13+
}
914
};
15+
16+
setup() {
17+
this.state = useState({visible: true})
18+
}
19+
20+
toggleContent() {
21+
this.state.visible = !this.state.visible;
22+
}
1023
}

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
<?xml version="1.0" encoding="UTF-8" ?>
22
<templates xml:space="preserve">
3-
<t t-name="awesome_owl.Card">
4-
<div class="card d-inline-block m-2" style="border: 3px solid #ccc; margin: 20px; padding: 20px">
5-
<div class="card-body">
6-
<h5 class="card-title" style="font-size: 20px">
7-
<t t-esc="props.title"/>
8-
</h5>
9-
<p class="card-text">
10-
<t t-esc="props.content"/>
11-
</p>
12-
</div>
3+
<t t-name="awesome_owl.card">
4+
<style>
5+
.card-main{
6+
display: block;
7+
border: 1px solid #ccc;
8+
padding: 20px;
9+
}
10+
</style>
11+
<button t-on-click="toggleContent">toggle visibility</button>
12+
<div class="card-main">
13+
<h2 class="card-title" t-esc="props.title"></h2>
14+
<t t-if="this.state.visible">
15+
<div class="card-body">
16+
<t t-slot="default"/>
17+
</div>
18+
</t>
1319
</div>
1420
</t>
1521
</templates>

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

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

44
export class Counter extends Component {
55
static template = "awesome_owl.Counter";
6-
76
static props = {
87
onChange: {
98
type: Function,

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

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,37 @@
11
<?xml version="1.0" encoding="UTF-8" ?>
22
<templates xml:space="preserve">
33
<t t-name="awesome_owl.Counter">
4-
<div style="background-color: #FFFFE0; border: 3px solid #ccc; display: inline-block; min-width: 300px; padding: 20px; margin: 20px">
5-
<p>Counter: <t t-esc="state.value"/></p>
6-
<button style="background: purple; color: white; padding: 8px; border-radius: 5px; border: 0;" class="btn btn-primary" t-on-click="increment">
7-
Increment
8-
</button>
9-
<button style="background: purple; color: white; padding: 8px; border-radius: 5px; border: 0; margin:5px" class="btn btn-primary" t-on-click="decrement">
10-
Decrement
11-
</button>
12-
</div>
4+
<style>
5+
.primary-counter{
6+
background-color: #FFFFE0;
7+
border: 3px solid #ccc;
8+
display: inline-block;
9+
min-width: 300px;
10+
padding: 20px;
11+
margin: 20px;
12+
}
13+
.increment-button{
14+
background: purple;
15+
color: white;
16+
padding: 8px;
17+
border-radius: 5px;
18+
}
19+
.decrement-button{
20+
background: purple;
21+
color: white;
22+
padding: 8px;
23+
border-radius: 5px;
24+
margin:5px
25+
}
26+
</style>
27+
<div class="primary-counter">
28+
<p>Counter: <t t-esc="state.value"/></p>
29+
<button class="increment-button" t-on-click="increment">
30+
Increment
31+
</button>
32+
<button class="decrement-button" t-on-click="decrement">
33+
Decrement
34+
</button>
35+
</div>
1336
</t>
1437
</templates>

‎awesome_owl/static/src/playground.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1-
import { Component, useState } from "@odoo/owl";
1+
import { Component, useState, markup } from "@odoo/owl";
22
import { Counter } from "./counter/counter";
33
import { Card } from "./card/card";
44
import { TodoList } from "./todo/todo_list";
55

66

77
export class Playground extends Component {
88
static template = "awesome_owl.playground";
9+
static props = {};
910
static components = { Counter, Card, TodoList };
1011

1112
setup() {
1213
this.state = useState({
14+
content: markup('<h1>Welcome to dashboard</h1>'),
1315
sum: 0,
1416
});
17+
1518
}
1619

17-
incrementSum(newVal,Checker){
20+
totalSum(newVal,Checker){
1821
if(Checker)
1922
this.state.sum++;
2023
else

‎awesome_owl/static/src/playground.xml‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
11
<?xml version="1.0" encoding="UTF-8" ?>
22
<templates xml:space="preserve">
33
<t t-name="awesome_owl.playground">
4-
<Counter onChange.bind="incrementSum"/>
5-
<Counter onChange.bind="incrementSum"/>
6-
<Counter onChange.bind="incrementSum"/>
7-
<h3 style="background-color: #90EE90; border: 3px solid #ccc; margin: 20px; padding: 20px">Sum of Counters: <t t-esc="state.sum"/></h3>
4+
<t t-out="this.state.content"/>
5+
<Counter onChange.bind="totalSum"/>
6+
<Counter onChange.bind="totalSum"/>
7+
<Counter onChange.bind="totalSum"/>
8+
<div style="background-color: #90EE90; border: 3px solid #ccc; margin: 20px; padding: 20px">
9+
<h3>Sum of Counters: <t t-esc="state.sum"/></h3>
10+
</div>
811
<TodoList/>
12+
<div>
13+
<Card title="'Card with text'">
14+
<p>This is arbitrary card content!</p>
15+
</Card>
16+
</div>
17+
<div>
18+
<Card title="'Card with a counter'">
19+
<Counter onChange.bind="totalSum"/>
20+
</Card>
21+
</div>
922
</t>
1023
</templates>

‎awesome_owl/static/src/todo/todo_item.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+
deleteTodo: Function,
910
};
11+
12+
onChangeToggle() {
13+
this.props.toggleState(this.props.todo.id);
14+
}
15+
16+
onChangeDelete() {
17+
this.props.deleteTodo(this.props.todo.id);
18+
}
1019
}

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

Lines changed: 6 additions & 4 deletions
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' : ''">
5-
<span t-esc="props.todo.id"/> -
6-
<span t-esc="props.todo.description"/>
7-
</div>
4+
<div class="p-1" t-att-class="props.todo.isCompleted ? 'text-decoration-line-through text-muted' : ''">
5+
<input class="form-check-input" type="checkbox" t-on-click="onChangeToggle"/>
6+
<span t-esc="props.todo.id"/> -
7+
<span t-esc="props.todo.description"/>
8+
<span style="margin-left:10px; cursor:pointer;" t-on-click="onChangeDelete">❌</span>
9+
</div>
810
</t>
911
</templates>

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

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,40 @@
11
import { Component, useState } from "@odoo/owl";
22
import { TodoItem } from "./todo_item";
3+
import { useAutofocus } from './../utils'
34

45

56
export class TodoList extends Component {
67
static template = "awesome_owl.TodoList";
7-
8+
static props = {};
89
static components = { TodoItem };
910

1011
setup() {
1112
this.todos = useState([])
13+
useAutofocus('todoInputRef')
1214
}
1315

1416
addTodo(ev) {
1517
if(ev.keyCode == '13') {
16-
this.todos.push({
17-
id: this.todos.length + 1,
18-
description: ev.target.value,
19-
isCompleted: false
20-
})
21-
ev.target.value = ''
18+
if(ev.target.value != ""){
19+
this.todos.push({
20+
id: this.todos.length + 1,
21+
description: ev.target.value,
22+
isCompleted: false
23+
})
24+
ev.target.value = ''
25+
}
26+
}
27+
}
28+
29+
toggleState(id) {
30+
const todo = this.todos.find(todo => todo.id == id)
31+
todo.isCompleted = !todo.isCompleted
32+
}
33+
34+
deleteTodo(id) {
35+
const index = this.todos.findIndex(todo => todo.id === id)
36+
if (index >= 0){
37+
this.todos.splice(index, 1)
2238
}
2339
}
2440
}

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<templates xml:space="preserve">
33
<t t-name="awesome_owl.TodoList">
4-
<div style="background-color: #ADD8E6; border: 3px solid #ccc; display: inline-block; min-width: 300px; padding: 20px; margin: 20px">
4+
<style>
5+
.todo-list-primary{
6+
background-color: #ADD8E6;
7+
border: 3px solid #ccc;
8+
display: inline-block;
9+
min-width: 300px;
10+
padding: 20px;
11+
margin: 20px;
12+
}
13+
.todo-item-arrangement{
14+
padding: 20px;
15+
margin: 20px;
16+
}
17+
</style>
18+
<div class="todo-list-primary">
519
<h3>Todo List</h3>
6-
<input type="text" placeholder="Enter a new task" t-on-keyup="addTodo" class="form-control mb-2"/>
7-
<div t-foreach="todos" t-as="todo" t-key="todo.id">
8-
<TodoItem todo="todo"/>
20+
<input type="text" t-ref="todoInputRef" placeholder="Enter a new task" t-on-keyup="addTodo" class="form-control mb-2"/>
21+
<div t-foreach="todos" t-as="todo" t-key="todo.id" class="todo-item-arrangement">
22+
<TodoItem todo="todo" toggleState.bind="toggleState" deleteTodo.bind="deleteTodo"/>
923
</div>
1024
</div>
1125
</t>

0 commit comments

Comments
 (0)