complete base implementation of todoapp

examples/todoapp/components/TodoApp.js

@@ -2,6 +2,8 @@ import { TodoItem } from "./TodoItem.js";
 
 const { StoreMixin, Component } = odoo.core;
 
+const ENTER_KEY = 13;
+
 export class TodoApp extends StoreMixin(Component) {
   template = "todoapp";
   widgets = { TodoItem };
@@ -11,12 +13,23 @@ export class TodoApp extends StoreMixin(Component) {
     return this.env.store.state.todos;
   }
 
+  get visibleTodos() {
+    let todos = this.todos;
+    if (this.state.filter === "active") {
+      todos = todos.filter(t => !t.completed);
+    }
+    if (this.state.filter === "completed") {
+      todos = todos.filter(t => t.completed);
+    }
+    return todos;
+  }
+
   get allChecked() {
-    return this.todos.every(todo => todo.done);
+    return this.todos.every(todo => todo.completed);
   }
 
   get remaining() {
-    return this.todos.filter(todo => !todo.done).length;
+    return this.todos.filter(todo => !todo.completed).length;
   }
 
   get remainingText() {
@@ -24,10 +37,10 @@ export class TodoApp extends StoreMixin(Component) {
   }
 
   addTodo(ev) {
-    if (ev.keyCode === 13) {
-      const text = ev.target.value;
-      if (text.trim()) {
-        this.env.store.dispatch("addTodo", text);
+    if (ev.keyCode === ENTER_KEY) {
+      const title = ev.target.value;
+      if (title.trim()) {
+        this.env.store.dispatch("addTodo", title);
       }
       ev.target.value = "";
     }