Ejercicio "To-Do List" (Nivel 1) completo

package.json

@@ -30,9 +30,9 @@
     "@angular/cli": "~9.1.1",
     "@angular/compiler-cli": "~9.1.1",
     "@angular/language-service": "~9.1.1",
-    "@types/node": "^12.11.1",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app.component.html

@@ -1,5 +1 @@
 <app-todo></app-todo>
-
-<app-todo></app-todo>
-
-<app-todo></app-todo>

src/app/app.component.ts

@@ -7,4 +7,5 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'ng-peti';
+
 }

src/app/app.module.ts

@@ -6,17 +6,23 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TodoAppComponent } from './todo-app/todo-app.component';
 import { TodoFormComponent } from './todo-form/todo-form.component';
+import { TodoListComponent } from './todo-list/todo-list.component';
+import { TodoFooterComponent } from './todo-footer/todo-footer.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
     AppComponent,
     TodoAppComponent,
-    TodoFormComponent
+    TodoFormComponent,
+    TodoListComponent,
+    TodoFooterComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,8 +1,10 @@
 <app-todo-form (add)="onTodoItemCreated($event)"></app-todo-form>
+
 <app-todo-list
   [list]="list"
   (itemRemoved)="onTodoItemRemoved($event)"
   (itemStateChanged)="onItemStateChanged($event)"
   >
 </app-todo-list>
+
 <app-todo-footer [list]="list"></app-todo-footer>

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

@@ -1,20 +1,27 @@
-import { Component, OnInit } from '@angular/core';
-import {TodoItem} from '../model/todo-item';
+import { TodoItem } from './../model/todo-item';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-todo',
   templateUrl: './todo-app.component.html',
   styleUrls: ['./todo-app.component.scss']
 })
-export class TodoAppComponent implements OnInit {
+export class TodoAppComponent{
+
   list = [];
   lastItemId = 0;
-  constructor() { }
 
-  ngOnInit(): void {
-  }
-
-  onItemStateChanged(item: TodoItem) {
+  onItemStateChanged( item: TodoItem ) {
     item.toggleCompleted();
-  }
+  };
+
+  onTodoItemRemoved( index: number ) {
+    this.list.splice( index, 1 );
+  };
+
+  onTodoItemCreated( item: TodoItem ) {
+    this.lastItemId += 1;
+    item.id = this.lastItemId;
+    this.list.push( item );
+  };
 }

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

@@ -0,0 +1,4 @@
+<footer>
+    <p>Tareas completadas: {{ counterCompletedTasks() }}</p>
+    <p>Tareas pendientes: {{ counterPendingTasks() }}</p>
+</footer>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoFooterComponent } from './todo-footer.component';
+
+describe('TodoFooterComponent', () => {
+  let component: TodoFooterComponent;
+  let fixture: ComponentFixture<TodoFooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoFooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'app-todo-footer',
+  templateUrl: './todo-footer.component.html',
+  styleUrls: ['./todo-footer.component.scss']
+})
+export class TodoFooterComponent{
+
+  @Input() list;
+
+  counterCompletedTasks() {
+    return this.list.filter( item => item.isCompleted === true ).length;
+  };
+
+  counterPendingTasks() {
+    return this.list.filter( item => item.isCompleted === false ).length;
+  };
+
+}

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

@@ -1 +1,5 @@
-<p>todo-form works!</p>
+<div>
+    <label>Ingrese una tarea:</label>
+    <input type="text" [(ngModel)]="item.description">
+    <input type="button" value="Agregar +" (click)="addTask()">
+</div>

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

@@ -1,16 +1,28 @@
-import { Component, OnInit, Output, EventEmitter} from '@angular/core';
+import { TodoItem } from './../model/todo-item';
+import { Component, Output, EventEmitter} from '@angular/core';
 
 @Component({
   selector: 'app-todo-form',
   templateUrl: './todo-form.component.html',
   styleUrls: ['./todo-form.component.scss']
 })
-export class TodoFormComponent implements OnInit {
+export class TodoFormComponent{
 
   @Output() add = new EventEmitter();
-  constructor() { }
 
-  ngOnInit(): void {
-  }
+  item: TodoItem;
+
+
+  constructor() { 
+    this.item = new TodoItem();
+  };
+
+  addTask() {
+    if ( !this.item.description ) {
+      return;
+    };
+    this.add.emit( this.item );
+    this.item = new TodoItem();
+  };
 
 }

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

@@ -0,0 +1,12 @@
+<div>
+    <ul>
+        <li *ngFor="let item of list; let i = index"
+            [style.text-decoration]="item.isCompleted ? 'line-through red' : ''">
+
+            ID: {{ item.id }} - Tarea: {{ item.description }} - Completada: {{ item.isCompleted }}
+
+            <input type="button" value="Eliminar" (click)="deleteTask( i )">
+            <input type="button" value="Completada" (click)="completedTask( item )">
+        </li>
+    </ul>
+</div>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoListComponent } from './todo-list.component';
+
+describe('TodoListComponent', () => {
+  let component: TodoListComponent;
+  let fixture: ComponentFixture<TodoListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,24 @@
+import { TodoItem } from './../model/todo-item';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-todo-list',
+  templateUrl: './todo-list.component.html',
+  styleUrls: ['./todo-list.component.scss']
+})
+export class TodoListComponent{
+
+  @Input() list;
+
+  @Output() itemRemoved = new EventEmitter();
+  @Output() itemStateChanged = new EventEmitter();
+
+  deleteTask( index: number ) {
+    this.itemRemoved.emit( index );
+  };
+
+  completedTask( item: TodoItem ) {
+    this.itemStateChanged.emit( item );
+  };
+
+}