Change of appearance when clicking on the done button, and small chan…

…ges when updating a ToDO
arswaw · Dec 19, 2018 · 638b58d · 638b58d
1 parent d7bbf2d
commit 638b58d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/frontend/components/todo-list.js b/frontend/components/todo-list.js
@@ -45,14 +45,18 @@ const TodoList = {
 
       this.currentTodo = item;
       this.showEditor = true;
+      this.newName = this.currentTodo.name;
     },
 
     updateTodo () {
       console.info("Update", this.currentTodo, this.newName);
       this.currentTodo.name = this.newName;
       this.display[this.editIndex] = this.currentTodo;
+
       localStorage.setItem("todos", JSON.stringify(this.display));
       this.newName = "";
+
+      this.showEditor = false;
     },
 
     refreshList () {

diff --git a/frontend/index.html b/frontend/index.html
@@ -39,12 +39,10 @@ <h1>Add a Todo</h1>
                       <h1>Your To-Do's</h1>
                   </div>
 
-
-
                   <div class="col">
                       <div class="row" v-if="showEditor">
                           <div class="col-6">
-                              <input v-model="newName" class="form-control form-control-lg" type="text" placeholder="Enter new todo name">
+                              <input v-model="newName" @keyup.enter='updateTodo()' class="form-control form-control-lg" type="text" placeholder="Enter new todo name">
                           </div>
 
                           <div class="col-6">
@@ -67,8 +65,8 @@ <h1>Your To-Do's</h1>
                                   </select>
 
                                   <div class="d-none d-md-block">
-                                      <button class="btn btn-success mr-2 rounded" @click="changeState(index)">Done</button>
-
+                                      <button v-if="todo.state == 'pending'" class="btn btn-success mr-2 rounded" @click="changeState(index)">Done</button>
+                                      <button v-if="todo.state == 'finished'" class="btn btn-danger mr-2 rounded" @click="changeState(index)">Undone</button>
                                       <button type="button" @click="showTodoEditor(todo, index)" class="btn btn-primary mr-2 rounded">Edit</button>
                                       <button type="button" @click="deleteTodo(index, todo)" class="btn btn-danger rounded">Delete</button>
                                   </div>