Permalink
Browse files

UPDATE: on double click

  • Loading branch information...
1 parent 049b52b commit 2664150bdad13f2c5666b0a5031703383446a041 @amejiarosario committed Oct 17, 2016
Showing with 28 additions and 8 deletions.
  1. +7 −3 src/app/todo/todo.component.html
  2. +9 −1 src/app/todo/todo.component.ts
  3. +12 −4 src/app/todo/todo.service.ts
@@ -18,14 +18,18 @@
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
- <li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone}" >
+ <li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone, editing: todo.editing}" >
<div class="view">
<input class="toggle" type="checkbox" [checked]="todo.isDone">
- <label>{{todo.title}}</label>
+ <label (dblclick)="todo.editing = true">{{todo.title}}</label>
<button class="destroy"></button>
</div>
<input class="edit"
- value="{{todo.title}}">
+ #updatedTodo
+ [value]="todo.title"
+ (blur)="updateTodo(todo, updatedTodo.value)"
+ (keyup.escape)="todo.editing = false"
+ (keyup.enter)="updateTodo(todo, updatedTodo.value)">
</li>
</ul>
</section>
@@ -32,5 +32,13 @@ export class TodoComponent implements OnInit {
}).then(() => {
this.newTodo = ''; // clear input form value
});
- }
+ }
+
+ updateTodo(todo, newValue) {
+ todo.title = newValue;
+ return this.todoService.put(todo).then(() => {
+ todo.editing = false;
+ return this.getTodos();
+ });
+ }
}
@@ -1,10 +1,10 @@
import { Injectable } from '@angular/core';
let todos = [
- { title: 'Install Angular CLI', isDone: true },
- { title: 'Style app', isDone: true },
- { title: 'Finish service functionality', isDone: false },
- { title: 'Setup API', isDone: false },
+ { _id: 1, title: 'Install Angular CLI', isDone: true },
+ { _id: 2, title: 'Style app', isDone: true },
+ { _id: 3, title: 'Finish service functionality', isDone: false },
+ { _id: 4, title: 'Setup API', isDone: false },
];
@Injectable()
@@ -23,4 +23,12 @@ export class TodoService {
});
}
+ put(data) {
+ return new Promise(resolve => {
+ let index = todos.findIndex(todo => todo._id === data._id);
+ todos[index].title = data.title;
+ resolve(data);
+ });
+ }
+
}

0 comments on commit 2664150

Please sign in to comment.