Permalink
Browse files

UPDATE: on double click

  • Loading branch information...
amejiarosario committed Oct 17, 2016
1 parent 049b52b commit 2664150bdad13f2c5666b0a5031703383446a041
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 @@ <h1>Todo</h1>
<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);

This comment has been minimized.

Show comment
Hide comment
@Rajan11

Rajan11 May 13, 2017

I got this error !!! property '_id' does not exist on type '{title:string; isDone: boolean;} when i put
let index = todos.findIndex(todo => todo._id === data._id);

@Rajan11

Rajan11 May 13, 2017

I got this error !!! property '_id' does not exist on type '{title:string; isDone: boolean;} when i put
let index = todos.findIndex(todo => todo._id === data._id);

This comment has been minimized.

Show comment
Hide comment
@albertjimenez

albertjimenez Jul 23, 2017

Hi! Don't worry, you need to modify the todos variable which contains default tasks on todo.service.ts with this new attribute:
{ _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 },

@albertjimenez

albertjimenez Jul 23, 2017

Hi! Don't worry, you need to modify the todos variable which contains default tasks on todo.service.ts with this new attribute:
{ _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 },

todos[index].title = data.title;
resolve(data);
});
}
}

0 comments on commit 2664150

Please sign in to comment.