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 = "";
     }

examples/todoapp/components/TodoItem.js

@@ -1,6 +1,11 @@
+const ENTER_KEY = 13;
+const ESC_KEY = 27;
+
 export class TodoItem extends odoo.core.Component {
   template = "todoitem";
 
+  state = { isEditing: false };
+
   removeTodo() {
     this.env.store.dispatch("removeTodo", this.props.id);
   }
@@ -8,4 +13,37 @@ export class TodoItem extends odoo.core.Component {
   toggleTodo() {
     this.env.store.dispatch("toggleTodo", this.props.id);
   }
+
+  async editTodo() {
+    await this.updateState({ isEditing: true });
+    this.refs.input.value = "";
+    this.refs.input.focus();
+    this.refs.input.value = this.props.title;
+  }
+
+  handleKeyup(ev) {
+    if (ev.keyCode === ENTER_KEY) {
+      this.updateTitle(ev.target.value);
+    }
+    if (ev.keyCode === ESC_KEY) {
+      ev.target.value = this.props.title;
+      this.updateState({ isEditing: false });
+    }
+  }
+
+  handleBlur(ev) {
+    this.updateTitle(ev.target.value);
+  }
+  updateTitle(title) {
+    const value = title.trim();
+    if (!value) {
+      this.removeTodo(this.props.id);
+    } else {
+      this.env.store.dispatch("editTodo", {
+        id: this.props.id,
+        title: value
+      });
+      this.updateState({ isEditing: false });
+    }
+  }
 }