diff --git a/.gitignore b/.gitignore
index 7c910e7..2f800b6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,6 +24,7 @@
npm-debug.log
testem.log
/typings
+/src_wpis_1
# e2e
/e2e/*.js
diff --git a/src/app/add-todo/add-todo.component.css b/src/app/add-todo/add-todo.component.css
new file mode 100644
index 0000000..5825052
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/add-todo/add-todo.component.html b/src/app/add-todo/add-todo.component.html
new file mode 100644
index 0000000..469b499
--- /dev/null
+++ b/src/app/add-todo/add-todo.component.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/add-todo/add-todo.component.spec.ts b/src/app/add-todo/add-todo.component.spec.ts
new file mode 100644
index 0000000..c4ad96e
--- /dev/null
+++ b/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;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ AddTodoComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AddTodoComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/add-todo/add-todo.component.ts b/src/app/add-todo/add-todo.component.ts
new file mode 100644
index 0000000..99294d6
--- /dev/null
+++ b/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;
+ @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
+ }
+ }
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 42256c4..12c23a9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,14 +1,11 @@
-
-
-
-
-
-
- Dashboard
-
-
-
-
- © 2016 Copyright Text
-
-
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e9f6ffa..42d7eed 100644
--- a/src/app/app.component.ts
+++ b/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;
+
+ 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);
+ }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 49eb4fe..cf5500b 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/todo-item/todo-item.component.css b/src/app/todo-item/todo-item.component.css
new file mode 100644
index 0000000..0af1e57
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/todo-item/todo-item.component.html b/src/app/todo-item/todo-item.component.html
new file mode 100644
index 0000000..89f77f0
--- /dev/null
+++ b/src/app/todo-item/todo-item.component.html
@@ -0,0 +1,3 @@
+{{ item.name }}
+{{ statusName }}
+close
diff --git a/src/app/todo-item/todo-item.component.spec.ts b/src/app/todo-item/todo-item.component.spec.ts
new file mode 100644
index 0000000..9156749
--- /dev/null
+++ b/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;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ TodoItemComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TodoItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/todo-item/todo-item.component.ts b/src/app/todo-item/todo-item.component.ts
new file mode 100644
index 0000000..09d212b
--- /dev/null
+++ b/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();
+ @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);
+ }
+}
diff --git a/src/app/todo-status.enum.ts b/src/app/todo-status.enum.ts
new file mode 100644
index 0000000..c609d42
--- /dev/null
+++ b/src/app/todo-status.enum.ts
@@ -0,0 +1,7 @@
+export enum TodoStatus {
+ TODO,
+ IN_PROGRESS,
+ IN_REVIEW,
+ BUG,
+ DONE
+}
diff --git a/src/app/todo.ts b/src/app/todo.ts
new file mode 100644
index 0000000..b56bc16
--- /dev/null
+++ b/src/app/todo.ts
@@ -0,0 +1,6 @@
+import { TodoStatus } from "./todo-status.enum";
+
+export interface Todo {
+ name: string,
+ status: TodoStatus
+}