Update

.gitignore

@@ -24,6 +24,7 @@
 npm-debug.log
 testem.log
 /typings
+/src_wpis_1
 
 # e2e
 /e2e/*.js

src/app/add-todo/add-todo.component.css

@@ -0,0 +1,16 @@
+.card {
+  padding: 15px 25px;
+}
+
+.form-control {
+  padding: 10px;
+}
+
+select {
+  display: block;
+}
+
+input[type=text]:focus {
+  border-bottom: 1px solid #E53935;
+  box-shadow: 0 1px 0 0 #E53935;
+}

src/app/add-todo/add-todo.component.html

@@ -0,0 +1,19 @@
+<div class="card">
+  <div class="row">
+    <div class="form-control col s8">
+      <input placeholder="Name" #ref [(ngModel)]="todo.name" type="text" class="validate">
+    </div>
+    <div class="form-control col s8">
+      <select [(ngModel)]="todo.status">
+        <option value="0">TODO</option>
+        <option value="1">IN PROGRESS</option>
+        <option value="2">IN REVIEW</option>
+        <option value="3">BUG</option>
+        <option value="4">DONE</option>
+      </select>
+    </div>
+    <div class="form-control col s8">
+      <button type="button" class="btn red darken-1" (click)="add()">Add item</button>
+    </div>
+  </div>
+</div>

src/app/add-todo/add-todo.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { AddTodoComponent } from './add-todo.component';
+
+describe('AddTodoComponent', () => {
+  let component: AddTodoComponent;
+  let fixture: ComponentFixture<AddTodoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddTodoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddTodoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/add-todo/add-todo.component.ts

@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Output, ViewChild, ContentChild } from '@angular/core';
+import { Todo } from "../todo";
+import { TodoStatus } from "../todo-status.enum";
+
+@Component({
+  selector: 'add-todo',
+  templateUrl: './add-todo.component.html',
+  styleUrls: ['./add-todo.component.css']
+})
+export class AddTodoComponent {
+  @Output() addTodo = new EventEmitter<Todo>();
+  todo: Todo;
+  @ViewChild('ref') public ref: any;
+
+  constructor() {
+    this.setInitial();
+  }
+
+  public add(): void {
+    console.log(this.ref);
+    const { name, status } = this.todo;
+
+    if(name.length > 0) {
+      this.todo.status = +status;
+      this.addTodo.emit(this.todo);
+      this.setInitial();
+    }
+  }
+
+  private setInitial(): void {
+    this.todo = {
+      name: "",
+      status: TodoStatus.TODO
+    }
+  }
+}

src/app/app.component.html

@@ -1,14 +1,11 @@
-<app-header>
-  <a href="#">
-    <img src="assets/images/logo.svg" alt="Logo" />
-  </a>
-</app-header>
-<app-main>
-  <h5>Dashboard</h5>
-  <app-activities-list sidebar></app-activities-list>
-</app-main>
-<app-footer>
-  <p class="grey-text text-lighten-4">
-    © 2016 Copyright Text
-  </p>
-</app-footer>
+<div class="container">
+  <h2 #ref>Todo App</h2>
+  <add-todo (addTodo)="addTodo($event)" #addTodoRef></add-todo>
+  <div class="todo-list">
+    <ul class="collection">
+      <li *ngFor="let todo of todos" class="collection-item">
+        <todo-item [item]="todo" (removeTodo)="removeTodo($event)"></todo-item>
+      </li>
+    </ul>
+  </div>
+</div>

src/app/app.component.ts

@@ -1,8 +1,29 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild, ElementRef, ViewChildren, QueryList } from '@angular/core';
+import { Todo } from "./todo";
+import { AddTodoComponent } from "./add-todo/add-todo.component";
+import { TodoItemComponent } from "./todo-item/todo-item.component";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {}
+export class AppComponent {
+  public todos: Todo[];
+  @ViewChild('ref') ref: ElementRef;
+  @ViewChildren(TodoItemComponent) todosRefsList: QueryList<TodoItemComponent>;
+
+  constructor() {
+    this.todos = [];
+  }
+
+  public addTodo(todo: Todo) {
+    console.log(this.todosRefsList);
+    console.log(this.ref);
+    this.todos.unshift(todo);
+  }
+
+  public removeTodo(todo: Todo) {
+    this.todos = this.todos.filter(item => item !== todo);
+  }
+}

src/app/app.module.ts

@@ -4,20 +4,14 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
-import { HeaderComponent } from './header/header.component';
-import { FooterComponent } from './footer/footer.component';
-import { MainComponent } from './main/main.component';
-import { ActivitiesListComponent } from './activities-list/activities-list.component';
-import { CardComponent } from './card/card.component';
+import { AddTodoComponent } from './add-todo/add-todo.component';
+import { TodoItemComponent } from './todo-item/todo-item.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HeaderComponent,
-    FooterComponent,
-    MainComponent,
-    ActivitiesListComponent,
-    CardComponent
+    AddTodoComponent,
+    TodoItemComponent
   ],
   imports: [
     BrowserModule,

src/app/todo-item/todo-item.component.css

@@ -0,0 +1,14 @@
+* {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.material-icons {
+  float: right;
+  margin-top: 14px;
+  cursor: pointer;
+}
+
+.status {
+  margin-left: 10px;
+}

src/app/todo-item/todo-item.component.html

@@ -0,0 +1,3 @@
+<h5>{{ item.name }}</h5>
+<span [ngClass]="classNames">{{ statusName }}</span>
+<i class="material-icons" (click)="remove()">close</i>

src/app/todo-item/todo-item.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TodoItemComponent } from './todo-item.component';
+
+describe('TodoItemComponent', () => {
+  let component: TodoItemComponent;
+  let fixture: ComponentFixture<TodoItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/todo-item/todo-item.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Todo } from "../todo";
+import { TodoStatus } from "../todo-status.enum";
+
+@Component({
+  selector: 'todo-item',
+  templateUrl: './todo-item.component.html',
+  styleUrls: ['./todo-item.component.css']
+})
+export class TodoItemComponent {
+  @Output() removeTodo = new EventEmitter<Todo>();
+  @Input() item: Todo;
+
+  get statusName(): string {
+    const { status } = this.item;
+
+    switch(status) {
+      case TodoStatus.DONE: return "DONE";
+      case TodoStatus.BUG: return "BUG";
+      case TodoStatus.IN_PROGRESS: return "IN PROGRESS";
+      case TodoStatus.IN_REVIEW: return "IN REVIEW";
+      default: return "TODO";
+    }
+  }
+
+  get classNames() {
+    const statusName = this.statusName.split(" ").pop().toLowerCase();
+
+    return {
+      'status': true,
+      [`status-${statusName}`]: true
+    }
+  }
+
+  public remove(): void {
+    this.removeTodo.emit(this.item);
+  }
+}

src/app/todo-status.enum.ts

@@ -0,0 +1,7 @@
+export enum TodoStatus {
+  TODO,
+  IN_PROGRESS,
+  IN_REVIEW,
+  BUG,
+  DONE
+}

src/app/todo.ts

@@ -0,0 +1,6 @@
+import { TodoStatus } from "./todo-status.enum";
+
+export interface Todo {
+  name: string,
+  status: TodoStatus
+}