mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
51 lines
2.1 KiB
XML
51 lines
2.1 KiB
XML
|
<templates>
|
||
|
|
<section t-name="TodoList" class="todoapp">
|
||
|
|
<header class="header">
|
||
|
|
<h1>todos</h1>
|
||
|
|
<input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
|
||
|
|
</header>
|
||
|
|
<section class="main" t-if="store.tasks.length">
|
||
|
|
<input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="() => store.toggleAll(!allChecked)"/>
|
||
|
|
<label for="toggle-all"></label>
|
||
|
|
<ul class="todo-list">
|
||
|
|
<t t-foreach="displayedTasks" t-as="todo" t-key="todo.id">
|
||
|
|
<Todo id="todo.id" isCompleted="todo.isCompleted" text="todo.text"/>
|
||
|
|
</t>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
<footer class="footer" t-if="store.tasks.length">
|
||
|
|
<span class="todo-count">
|
||
|
|
<strong>
|
||
|
|
<t t-esc="remaining"/>
|
||
|
|
</strong>
|
||
|
|
<t t-esc="remainingText"/>
|
||
|
|
</span>
|
||
|
|
<ul class="filters">
|
||
|
|
<li>
|
||
|
|
<a t-on-click="() => this.setFilter('all')" t-att-class="{selected: state.filter === 'all'}">All</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a t-on-click="() => this.setFilter('active')" t-att-class="{selected: state.filter === 'active'}">Active</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a t-on-click="() => this.setFilter('completed')" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<button class="clear-completed" t-if="store.tasks.length gt remaining" t-on-click="() => store.clearCompleted()">
|
||
|
|
Clear completed
|
||
|
|
</button>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<li t-name="Todo" class="todo" t-att-class="{completed: props.isCompleted, editing: state.isEditing}">
|
||
|
|
<div class="view">
|
||
|
|
<input class="toggle" type="checkbox" t-on-change="() => store.toggleTask(props.id)" t-att-checked="props.completed"/>
|
||
|
|
<label t-on-dblclick="() => state.isEditing = true">
|
||
|
|
<t t-esc="props.text"/>
|
||
|
|
</label>
|
||
|
|
<button class="destroy" t-on-click="() => store.deleteTask(props.id)"></button>
|
||
|
|
</div>
|
||
|
|
<input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.text" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
|
||
|
|
</li>
|
||
|
|
</templates>
|