import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2';

import {TodoService} from './todoService';

import {TodoItemRender} from './todoItemRender';

import {StartsWith} from './startsWith';

import {SimpleSearch} from './simpleSearch';

import {LetterSelect} from './letterSelect';

import {TodoSearch} from './todoSearch';

@Component({

    selector: 'todo-list'

})

@View({

    pipes: [StartsWith, SimpleSearch],

    directives: [NgFor, TodoItemRender, FORM_DIRECTIVES, LetterSelect, TodoSearch],

    template: `

          <div>

                <todo-search #todo-search></todo-search>

                {{todoSearch.term}}

                <todo-item-render

                    *ng-for="#todo of todoService.todos

                    | simpleSearch: ['title','action'] : todoSearch.term"

                    [todoinput]="todo"

                >

                </todo-item-render>

          </div>

    `

})

export class TodoList{

    constructor(

        public todoService:TodoService

    ){

    }

}

import {Pipe} from 'angular2/angular2';

@Pipe({

    name: 'simpleSearch',

    pure: false

})

export class SimpleSearch{

    transform(value, [fields, letter]:[string[], string]){

        return value.filter((item)=>

            fields.some((field)=>

                item[field].includes(letter)

            ));

    }

}