<repo_name>AshCoolman/tutorial-angular2-egghead<file_sep>/src/app/todo-service.ts
class TodoModel {
	static STARTED:string = 'started';
	static COMPLETED:string = 'completed';
	
public status : string = TodoModel.STARTED;
	
	constructor (
		public title : string = '',
		public action : string = ''
	) {
	}
	
	notStatus() {
		return (this.status !== TodoModel.STARTED) ? TodoModel.STARTED : TodoModel.COMPLETED;
	}
	
	toggle() {
		this.status = this.notStatus(); 
	}
	
}

class TodoService {
	public todos: TodoModel[] = [
		new TodoModel('11', 'eleven'),
		new TodoModel('12', 'twelve'),
		new TodoModel('13', 'thirteen')
	];
	addTodo (value: TodoModel) {
		this.todos.push(value);
	}
}

export {TodoModel, TodoService}<file_sep>/src/app/has-filter.ts
import {Pipe} from "angular2/angular2"

@Pipe({
	name: 'has',
	pure: false
})

export class HasFilter {
	transform(list, [fields, obj]) {
		// let [title, action] = fields;
		if (obj) {
			let result = list.filter(function (item) {
				return fields.some(function (field) {
					return item[field].includes(obj[field]);	
				});
			});
			if (result.length !== 0) {
				return result;
			}
		}
		return list

	}
}<file_sep>/src/app/filter-by.ts
import {Component, FORM_DIRECTIVES} from 'angular2/angular2';

@Component({
    selector: 'filter-by',
    directives: [ FORM_DIRECTIVES],
    template: `
    <form>
        <input [(ng-model)]="title" placeholder="Filter title">
        <input [(ng-model)]="action" placeholder="Filter action">
    </form>
    `
})

export class FilterBy {
    public title :string;
    public action : string;
    constructor() {
    }
}<file_sep>/src/app/todo-item-renderer.ts
import {Component, Input, NgClass} from 'angular2/angular2';
import {TodoModel} from './todo-service';

@Component({
	selector: 'todo-item-render',
	directives: [NgClass],
	styles: [`
	.${TodoModel.STARTED} { color: green }
	.${TodoModel.COMPLETED} { text-decoration: line-through }
	`	
	],
	template: `
		<div>
			<span 
				[ng-class]="todo.status"
				[(text-content)]="todo.title"
				>
			</span>
			<span 
				[ng-class]="todo.status"
				[(text-content)]="todo.action"
				>
			</span>
			<button (click)="todo.toggle()">
				{{'Set '+todo.notStatus()}}
			</button>
		</div>
	`
})



export class TodoItemRenderer {
	@Input('todo') todo:TodoModel;
}<file_sep>/src/app/todo-list.ts
import {Component, NgFor} from 'angular2/angular2';
import {TodoService} from './todo-service';
import {TodoItemRenderer} from './todo-item-renderer';
import {HasFilter} from './has-filter';
import {FilterBy} from './filter-by';

@Component({
	selector: 'todo-list',
	pipes: [HasFilter],
	directives: [NgFor, FilterBy, TodoItemRenderer],
	template: `	
<div>
	<filter-by #filter-by></filter-by> {{filterBy.title}}
	<todo-item-render
		*ng-for="
		#todo of todoService.todos
		| has:['title', 'action']:filterBy
		"
		[todo]="todo">
	</todo-item-render>
</div>
`
})
// How would I bind to the text node? [(text-content)]="todo.title"
export class TodoList {
	constructor(
		public todoService:TodoService
	) {
		
	}
}<file_sep>/src/app/todo-input.ts
import {Component, FORM_DIRECTIVES} from 'angular2/angular2';
import {TodoService, TodoModel} from './todo-service';

@Component({
	selector: 'todo-input',
	directives: [FORM_DIRECTIVES],
	template: `
<div>
	<form (ng-submit)="title.focus() && doSubmit()">
		<input
			#title
			type="text"
			[(ng-model)]="todoModel.title"
			placeholder="(title)"
			>
		<input
			type="text"
			[(ng-model)]="todoModel.action"
			placeholder="(action)"
			(keyup)="log($event)"
			>
		<button hidden type="submit">
			Save
		</button>
	</form>
</div>
`
})

export class TodoInput {

	public todoModel : TodoModel = new TodoModel();
	
	constructor (
		public todoService:TodoService 
	) {}
	
	doSubmit () {
		let {title, action} = this.todoModel;
		if (title && action) {
			this.todoService.addTodo(this.todoModel);
			this.todoModel = new TodoModel();
		} else {
			console.log()
		}
	}
	log (e) {
		
		console.log.apply(console, Array.prototype.splice.apply(this, arguments))
	}
}<file_sep>/src/app/app.ts
import {bootstrap, Component, View} from 'angular2/angular2';
import {TodoInput} from './todo-input';
import {TodoService, TodoModel} from './todo-service';
import {TodoList} from './todo-list';

@Component({
	selector: '	app'
})

@View({
	directives: [TodoInput, TodoList],
	template: `
		<div> 
			<h1>App</h1>
			<todo-input></todo-input>
			<todo-list></todo-list>
		</div>
	`
}) 

// decorators way to add behavior
class App {
	
} 

bootstrap(App, [TodoService]);