import { Component , ApplicationRef } from "@angular/core" ; import { TodoItem } from "./Todoitem" ; import { Observable } from "rxjs/Observable" ; import { AppStore } from "angular2-redux-util" ; import { TodoService } from "./TodoService" ; import { TodoModel } from "./TodoModel" ; import { List } from "Immutable" ; type channelTodoObservable = Observable < TodoItem > ; type channelTodosObservable = Observable < Array < channelTodoObservable > > ; @ Component ( { selector : 'todo-list' , template : `
                <section class="todoapp" style="height: 500px">
                  <header class="header">
                    <h1>your to-do's</h1>
                    <input class="new-todo" placeholder="What needs to be done?"
                    autofocus [(ngModel)]="newItem" (keyup.enter)="addItem(newItem)">
                    <button class="btn btn-default btn-lg" (click)="addItem(newItem)">Add todo</button>
                  </header>
                  <section class="main" (toggle-edited)="toggleExitedDomEvent($event)">
                    <ul class="todo-list">
                      <li *ngFor="let item of m_dataStore | sortBy;  let i=index;trackBy:identify" nodeLogger="{{item}}"> 
                        <todo-item [item]="item" (done)="removeItem($event)"
                             [makeDraggable]="item" makeDroppable (dropped)="onDrop($event, item)"
                            (edit)="editItem($event)">
                        </todo-item>
                      </li>
                    </ul>
                  </section>
                </section>
    ` , styleUrls : [ './Todolist.css' ] } ) export class TodoList { newItem = '' ; private m_dataStore : any = [ ] ; private addItem : Function ; private editItem : Function ; private removeItem : Function ; constructor ( private todoService , private appStore , private appRef ) { this . todoService . loadTodosRemote ( ( status ) => { if ( status == - 1 ) { return ; } } ) ; appStore . subscribe ( ( path , prev , store ) => { this . m_dataStore = store ; this . newItem = '' ; } , 'todos' , true ) ; this . addItem = todoService . createDispatcher ( todoService . addTodo , appStore ) ; this . removeItem = todoService . createDispatcher ( todoService . removeTodo , appStore ) ; this . editItem = todoService . createDispatcher ( todoService . editTodo , appStore ) ; } toggleExitedDomEvent ( event ) { console . log ( event ) ; } onDrop ( src , trg ) { var todos = this . appStore . getState ( ) . todos ; var trgOrder = trg . getKey ( 'order' ) ; var srcOrder ; todos . forEach ( ( todo ) => { if ( todo . getModelId ( ) == src ) srcOrder = parseInt ( todo . getKey ( 'order' ) ) ; } ) ; this . moveRow ( srcOrder , trgOrder ) ; } private moveRow ( src , trg ) { src = parseInt ( src ) ; trg = parseInt ( trg ) ; var todos = this . appStore . getState ( ) . todos ; function getTodoModelByOrder ( order ) { var index = todos . findIndex ( ( i ) => i . getKey ( 'order' ) == order ) ; return todos . get ( index ) ; } if ( src > trg ) { todos . forEach ( ( todo ) => { var curr = parseInt ( todo . getKey ( 'order' ) ) ; if ( curr >= trg ) { todo = todo . setKey < TodoModel > ( TodoModel , 'order' , curr + 1 ) ; todo [ 'task' ] = todo . getKey ( 'task' ) ; this . editItem ( todo ) ; } } ) ; var todoSrc = getTodoModelByOrder ( src ) ; todoSrc = todoSrc . setKey < TodoModel > ( TodoModel , 'order' , trg ) ; todoSrc [ 'task' ] = todoSrc . getKey ( 'task' ) ; this . editItem ( todoSrc ) ; } else { todos . forEach ( ( todo ) => { var curr = parseInt ( todo . getKey ( 'order' ) ) ; if ( curr <= trg ) { todo = todo . setKey < TodoModel > ( TodoModel , 'order' , curr - 1 ) ; todo [ 'task' ] = todo . getKey ( 'task' ) ; this . editItem ( todo ) ; } } ) ; var todoSrc = getTodoModelByOrder ( src ) ; todoSrc = todoSrc . setKey < TodoModel > ( TodoModel , 'order' , trg ) ; todoSrc [ 'task' ] = todoSrc . getKey ( 'task' ) ; this . editItem ( todoSrc ) ; } } identify ( index , item ) { return item . getModelId ( ) ; } }