61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import {NgFor, Component, View, formDirectives} from 'angular2/angular2';
|
|
import {Store, Todo, TodoFactory} from './services/TodoStore';
|
|
|
|
@Component({selector: 'todo-app', viewBindings: [Store, TodoFactory]})
|
|
@View({templateUrl: 'todo.html', directives: [NgFor, formDirectives]})
|
|
export class TodoApp {
|
|
todoEdit: Todo = null;
|
|
inputValue: string;
|
|
hideActive: boolean = false;
|
|
hideCompleted: boolean = false;
|
|
isComplete: boolean = false;
|
|
|
|
constructor(public todoStore: Store, public factory: TodoFactory) {}
|
|
|
|
enterTodo(): void {
|
|
this.addTodo(this.inputValue);
|
|
this.inputValue = "";
|
|
}
|
|
|
|
doneEditing($event, todo: Todo): void {
|
|
var which = $event.keyCode;
|
|
if (which === 13) {
|
|
todo.title = todo.editTitle;
|
|
this.todoEdit = null;
|
|
} else if (which === 27) {
|
|
this.todoEdit = null;
|
|
todo.editTitle = todo.title;
|
|
}
|
|
}
|
|
|
|
editTodo(todo: Todo): void { this.todoEdit = todo; }
|
|
|
|
addTodo(newTitle: string): void { this.todoStore.add(this.factory.create(newTitle, false)); }
|
|
|
|
completeMe(todo: Todo): void { todo.completed = !todo.completed; }
|
|
|
|
toggleCompleted(): void {
|
|
this.hideActive = !this.hideActive;
|
|
this.hideCompleted = false;
|
|
}
|
|
|
|
toggleActive(): void {
|
|
this.hideCompleted = !this.hideCompleted;
|
|
this.hideActive = false;
|
|
}
|
|
|
|
showAll(): void {
|
|
this.hideCompleted = false;
|
|
this.hideActive = false;
|
|
}
|
|
|
|
deleteMe(todo: Todo): void { this.todoStore.remove(todo); }
|
|
|
|
toggleAll($event): void {
|
|
this.isComplete = !this.isComplete;
|
|
this.todoStore.list.forEach((todo: Todo) => { todo.completed = this.isComplete; });
|
|
}
|
|
|
|
clearCompleted(): void { this.todoStore.removeBy((todo) => todo.completed); }
|
|
}
|