Matt/odoo-tutorials
1
0
Fork 0
mirror of https://github.com/SARL-PACIFIC-ERP/odoo-sh-test.git synced 2025-06-25 01:32:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Section 12

Browse source
This commit is contained in:
Matt Marcha 2024-08-21 16:15:54 -10:00
parent cae25a4fa2
commit 6396160269
4 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
awesome_owl/static/src/todo_list/todo_item.js
View file

@ -10,9 +10,14 @@ export class TodoItem extends Component {
shape: { id: Number, description: String, isCompleted: Boolean }
},
onToggle: Function,
removeTodo: Function,
};
toggle() {
this.props.onToggle(this.props.todo.id);
}
}
remove() {
this.props.removeTodo(this.props.todo.id);
}
}

1
awesome_owl/static/src/todo_list/todo_item.xml
View file

@ -7,6 +7,7 @@
<t t-esc="props.todo.id"/>.
<t t-esc="props.todo.description"/>
</label>
<span class="fa fa-remove" t-on-click="remove"/>
</div>
</t>
</templates>

10
awesome_owl/static/src/todo_list/todo_list.js
View file

@ -10,6 +10,7 @@ export class TodoList extends Component {
static components = { TodoItem };
setup() {
this.todoCounter = 1;
this.todos = useState([]);
useAutofocus('todo_input');
}
@ -19,7 +20,7 @@ export class TodoList extends Component {
if(ev.keyCode === 13) {
if(ev.target.value !== '') {
// Let's create a todo
this.todos.push({ id: this.todos.length+1, description: ev.target.value, isCompleted: false });
this.todos.push({ id: this.todoCounter++, description: ev.target.value, isCompleted: false });
ev.target.value = '';
}
}
@ -31,4 +32,11 @@ export class TodoList extends Component {
todo.isCompleted = !todo.isCompleted;
}
}
removeItem(id) {
const todoIndex = this.todos.findIndex((obj) => obj.id === id);
if (todoIndex >= 0) {
this.todos.splice(todoIndex, 1);
}
}
}

2
awesome_owl/static/src/todo_list/todo_list.xml
View file

@ -4,7 +4,7 @@
<p><input t-ref="todo_input" type="text" name="new-todo" placeholder="Add new todo" t-on-keyup="addTodo" /></p>
<div class="d-inline-block border p-2 m-2">
<t t-foreach="todos" t-as="todo" t-key="todo.id">
<TodoItem todo="todo" onToggle.bind="toggleState"/>
<TodoItem todo="todo" onToggle.bind="toggleState" removeTodo.bind="removeItem"/>
</t>
</div>
</t>