Exercise 1

src/app/app.component.html

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

src/app/app.component.scss

@@ -0,0 +1 @@
+

src/app/app.module.ts

@@ -6,12 +6,16 @@ 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';
 
 @NgModule({
   declarations: [
     AppComponent,
     TodoAppComponent,
-    TodoFormComponent
+    TodoFormComponent,
+    TodoListComponent,
+    TodoFooterComponent
   ],
   imports: [
     BrowserModule,

src/app/model/todo-item.ts

@@ -1,9 +1,28 @@
 export class TodoItem {
-  id: number;
+  static idCounter: number = 0;
+
+  id: number = 0;
   description: string;
   isCompleted: boolean = false;
 
+  constructor(description){
+    this.id = TodoItem.getIdCount();
+    this.description = description;
+
+    TodoItem.increaseIdCount()
+  }
+
+  static increaseIdCount() {
+    this.idCounter += 1;
+  }
+
+  static getIdCount() {
+    return this.idCounter;
+  }
+
   toggleCompleted() {
     this.isCompleted = !this.isCompleted;
   }
+
 }
+

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

@@ -1,8 +1,23 @@
-<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>
+<div class="content">
+  <div class="padding">
+      <div class="row container d-flex justify-content-center">
+          <div class="col-lg-12">
+              <div class="card px-3">
+                  <div class="card-body">
+                      <h4 class="card-title">¡Mi lista de tareas!</h4>                  
+                      <app-todo-form (add)="onTodoItemCreated($event)"></app-todo-form>
+                      <br>
+                      <app-todo-list
+                        [list]="list"
+                        (itemRemoved)="onTodoItemRemoved($event)"
+                        (itemStateChanged)="onItemStateChanged($event)"
+                        >
+                      </app-todo-list>
+                  </div>
+                  <app-todo-footer [list]="list"></app-todo-footer>
+              </div>
+          </div>
+      </div>
+  </div>
+</div>
+

src/app/todo-app/todo-app.component.scss

@@ -0,0 +1,6 @@
+.content{
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 60%;
+}

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

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

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

@@ -0,0 +1,4 @@
+<div class ="breadcrumb">
+    Tareas completadas:&nbsp; <b> {{ Completeditems() }} </b> &nbsp;
+    Tareas pendientes: &nbsp; <b> {{ UnCompleteditems() }} </b>
+</div>

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,24 @@
+import { Component, Input } from '@angular/core';
+
+import { TodoItem } from '../model/todo-item';
+
+@Component({
+  selector: 'app-todo-footer',
+  templateUrl: './todo-footer.component.html',
+  styleUrls: ['./todo-footer.component.scss']
+})
+export class TodoFooterComponent {
+
+  @Input() list : TodoItem[] = [];
+
+  Completeditems(){
+    return this.list.filter(each => each.isCompleted === true).length;
+  }
+
+  UnCompleteditems(){
+    // return this.list.filter(each => each.isCompleted === true).length;
+    // Other form:
+    return this.list.length - this.Completeditems() 
+  }
+
+}

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

@@ -1 +1,5 @@
-<p>todo-form works!</p>
+<div class="add-items d-flex"> 
+    <input type="text" class="form-control todo-list-input" placeholder="ingresa una nueva tarea" #item> 
+    <button class="add btn btn-primary font-weight-bold todo-list-add-btn" (click)="addItem(item)">+</button> 
+</div>
+

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

@@ -0,0 +1,7 @@
+body {
+    background-color: #f9f9fa
+}
+
+ul{
+    list-style-type: none;
+}

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

@@ -1,16 +1,22 @@
-import { Component, OnInit, Output, EventEmitter} from '@angular/core';
+import { Component, Output, EventEmitter} from '@angular/core';
+
+import { TodoItem } from 'src/app/model/todo-item';
 
 @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() { }
+  @Output() add = new EventEmitter<TodoItem>();
 
-  ngOnInit(): void {
-  }
+  addItem(item){
+    if (item.value === '') return;
 
+    const newItem = new TodoItem(item.value);
+    item.value = '';
+    item.focus();
+    this.add.emit(newItem);
+  }
 }

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

@@ -0,0 +1,49 @@
+<div class="list-wrapper">
+    <ul class="d-flex flex-column-reverse todo-list">
+        <li *ngFor="let item of list">    
+            <div [ngClass]="{completed: item.isCompleted === true, uncompleted: item.isCompleted === false}">
+                <button type="button" class="remove btn btn-danger" (click)="itemRemovedClick(item)">X</button>
+                <!-- <button type="button" class="edit btn btn-info" (click)="itemEditClick(item)">Edit</button> -->
+                <button type="button" class="done btn btn-success" (click)="itemStateChangedClick(item)">Done</button>
+                {{ item.description }} <span class="atenuar">(ID {{ item.id }}: {{ getEstado(item) }})</span>
+            </div>           
+        </li>
+    </ul>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- 
+<div class="card uncompleted" style="width: 18rem;" *ngFor="let item of list">
+    <div class="card-body">
+      <h6 class="card-subtitle mb-2 text-muted">ID {{ item.id }} </h6>
+      <h5 class="card-title"> {{ item.description }} </h5>
+      <a href="#" class="card-link" (click)="itemStateChangedClick(item)">Completed</a>
+      <a href="#" class="card-link" (click)="itemRemovedClick(item)">Remove</a>
+    </div>
+</div> -->
+
+
+
+
+
+    <!-- <ul class="list-group list-group-flush" *ngFor="let item of list">
+        <li class="list-group-item">
+            <h6 class="card-subtitle mb-2 text-muted ">ID {{ item.id }} </h6>
+            <h5 class="card-title">{{ item.description }}</h5>
+            <a href="#" class="card-link card-body" (click)="itemStateChangedClick(item)">Completed</a>
+            <a href="#" class="card-link card-body" (click)="itemRemovedClick(item)">Remove</a>
+        </li>
+    </ul> -->
+
+
+<!-- <input type="checkbox"> -->

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

@@ -0,0 +1,44 @@
+.completed {
+    background-color: #cbff7b;
+    text-decoration: line-through;
+}
+
+.uncompleted {
+    background-color: lemonchiffon;
+}
+
+li {
+    border-radius: 2em;
+    margin-bottom: 0.5em;
+}
+
+ul{
+    list-style-type: none;
+}
+
+.btn {
+    margin-right: 10px;
+    font-weight: bold;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size: small;
+    border-radius: 6em;
+}
+
+.done{
+    background-color: #77dd77;
+    border-color: #77dd77;
+}
+
+.remove{
+    background-color: #c23b22;
+    border-color:  #c23b22;
+}
+
+.edit{
+    background-color: #a2cadf;
+    border-color:  #a2cadf;
+}
+
+.atenuar{
+    color: gray;
+}

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,40 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+import { TodoItem } from '../model/todo-item';
+
+@Component({
+  selector: 'app-todo-list',
+  templateUrl: './todo-list.component.html',
+  styleUrls: ['./todo-list.component.scss']
+})
+
+
+export class TodoListComponent {
+
+  @Input() list = [];
+  @Output() itemRemoved = new EventEmitter<TodoItem>();
+  @Output() itemStateChanged = new EventEmitter<TodoItem>();
+  @Output() itemEdited = new EventEmitter<TodoItem>();
+
+  constructor() { }
+
+  itemRemovedClick(item : TodoItem){
+    this.itemRemoved.emit(item);
+  }
+
+  itemStateChangedClick(item : TodoItem){
+    this.itemStateChanged.emit(item);
+  }
+
+  // itemEditClick(item : TodoItem){
+  //   this.itemEdited.emit(item);
+  // }
+
+  getEstado(item : TodoItem){
+    if (item.isCompleted) 
+      return 'Completada';
+    else
+      return 'Incompleta';
+
+  }
+}