From b05cbd30c4da3ee6e869adcc0964d1cf00a06fef Mon Sep 17 00:00:00 2001
From: giulitruant_26 <giulitruant_26@hotmail.com>
Date: Sat, 27 Jun 2020 22:00:24 -0300
Subject: [PATCH 1/5] -LocalStorage

---
 src/app/local-storage.service.ts         | 30 ++++++++++++++++++++++--
 src/app/todo-app/todo-app.component.ts   |  4 ++--
 src/app/todo-form/todo-form.component.ts |  2 +-
 src/app/todo-list/todo-list.component.ts |  1 -
 src/app/todo.service.ts                  | 21 +++++++++++------
 5 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts
index 204c7fc..fa87588 100644
--- a/src/app/local-storage.service.ts
+++ b/src/app/local-storage.service.ts
@@ -1,12 +1,38 @@
 import { Injectable } from '@angular/core';
+import { stringify } from 'querystring';
+import { JsonPipe } from '@angular/common';
+import { TodoItem } from './model/todo-item';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LocalStorageService {
   // https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
-  constructor() { }
+  constructor() {
+    this.cargarLocalStorage();
+   }
   getName() {
-    return 'LocalStorageService'
+    return 'LocalStorageService';
   }
+  cargarLocalStorage(){
+    const items = JSON.parse(localStorage.getItem('todo-item'));
+    return items;
+  }
+
+  grabarLocalStorage(item: TodoItem){
+    localStorage.setItem(item.id.toString(), JSON.stringify(item));
+  }
+
+  eliminarLocalStorage(key){
+    const value = localStorage.getItem(key);
+    console.dir(value);
+    if(value !== undefined && value){
+      localStorage.removeItem(key);
+    }
+  }
+
+  // editarLocalStorage(key, item){
+  //   let value = localStorage.getItem(key);
+  //   console.dir(value);
+  // }
 }
diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts
index cc42271..55713fd 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/src/app/todo-app/todo-app.component.ts
@@ -23,7 +23,7 @@ export class TodoAppComponent  {
   onItemStateChanged(item: TodoItem) {
     item.toggleCompleted();
   }
-  onTodoItemCreated(task) {
-    this.service.add(task)
+  onTodoItemCreated(task: TodoItem) {
+    this.service.add(task);
   }
 }
diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts
index 3366020..b3f9c3e 100644
--- a/src/app/todo-form/todo-form.component.ts
+++ b/src/app/todo-form/todo-form.component.ts
@@ -11,7 +11,7 @@ export class TodoFormComponent {
   @Output() add = new EventEmitter();
 
   save(description){
-    if(!description.value || description.value === '') {
+    if(description.value || description.value === '') {
       return;
     }
     let task = new TodoItem();
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts
index fc5d8f0..9d34243 100644
--- a/src/app/todo-list/todo-list.component.ts
+++ b/src/app/todo-list/todo-list.component.ts
@@ -22,5 +22,4 @@ export class TodoListComponent implements OnInit {
     this.itemStateChanged.emit(item);
 
   }
-
 }
\ No newline at end of file
diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
index 9bba8cc..36ae1ec 100644
--- a/src/app/todo.service.ts
+++ b/src/app/todo.service.ts
@@ -1,26 +1,33 @@
 import { Injectable } from '@angular/core';
 import { LocalStorageService } from './local-storage.service';
+import { TodoItem } from './model/todo-item';
 
 @Injectable({
   providedIn: 'root'
 })
 export class TodoService {
-  
+
   list = [];
   lastItemId = 0;
 
-  constructor(private storage: LocalStorageService) { }
-  
-  add(task) {
+  constructor(private storage: LocalStorageService) {
+
+  this.list = storage.cargarLocalStorage();
+   }
+
+  add(task: TodoItem) {
     const id = this.lastItemId;
     task.id = id;
-    this.list.push(task);
+    this.storage.grabarLocalStorage(task);
+    // this.list.push(task);
     this.lastItemId += 10;
   }
 
   remove(id) {
-    const index = this.list.findIndex((element) => element.id === id);
-    this.list.splice(index, 1);
+    this.storage.eliminarLocalStorage(id);
+
+    // const index = this.list.findIndex((element) => element.id === id);
+    // this.list.splice(index, 1);
   }
 
   incompletedSize() {

From 38f6921015c9bd8b15946ae9f70ddfc79b0308e3 Mon Sep 17 00:00:00 2001
From: "giuliano.truant" <giulitruant_26@hotmail.com>
Date: Sun, 28 Jun 2020 21:06:36 -0300
Subject: [PATCH 2/5] - LocalStorage sin finalizar

---
 src/app/local-storage.service.ts         | 29 +++++++++++--------
 src/app/stats/stats.component.ts         |  8 +++++-
 src/app/todo-app/todo-app.component.ts   | 29 ++++++++++++++-----
 src/app/todo-form/todo-form.component.ts |  4 +--
 src/app/todo-list/todo-list.component.ts |  7 ++++-
 src/app/todo.service.ts                  | 36 ++++++++++++++++--------
 6 files changed, 79 insertions(+), 34 deletions(-)

diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts
index fa87588..fbc50d0 100644
--- a/src/app/local-storage.service.ts
+++ b/src/app/local-storage.service.ts
@@ -8,21 +8,33 @@ import { TodoItem } from './model/todo-item';
 })
 export class LocalStorageService {
   // https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
-  constructor() {
-    this.cargarLocalStorage();
-   }
+  list: any = [];
+  constructor() {    
+  }
   getName() {
     return 'LocalStorageService';
   }
-  cargarLocalStorage(){
-    const items = JSON.parse(localStorage.getItem('todo-item'));
-    return items;
+  cargarLocalStorage(){    
+    this.list = [];
+    debugger;
+    Object.values(localStorage).forEach(p => {
+      this.list.push(JSON.parse(p));
+
+    });
+
+    return this.list;
   }
 
   grabarLocalStorage(item: TodoItem){
     localStorage.setItem(item.id.toString(), JSON.stringify(item));
   }
 
+  updateLocalStorage(item: TodoItem){    
+    localStorage.removeItem(item.id.toString());
+    localStorage.setItem(item.id.toString(), JSON.stringify(item));
+
+  }
+
   eliminarLocalStorage(key){
     const value = localStorage.getItem(key);
     console.dir(value);
@@ -30,9 +42,4 @@ export class LocalStorageService {
       localStorage.removeItem(key);
     }
   }
-
-  // editarLocalStorage(key, item){
-  //   let value = localStorage.getItem(key);
-  //   console.dir(value);
-  // }
 }
diff --git a/src/app/stats/stats.component.ts b/src/app/stats/stats.component.ts
index 1ec80aa..0fb5ea7 100644
--- a/src/app/stats/stats.component.ts
+++ b/src/app/stats/stats.component.ts
@@ -15,6 +15,12 @@ export class StatsComponent implements OnInit {
   ngOnInit(): void {
   }
   completedPercentage() {
-    return Math.round(this.service.completedSize() /  this.service.list.length * 100) || 0
+    const cant = this.service.list.length;
+    const completed = this.service.completedSize();
+    if(!cant && cant !== undefined){
+      return Math.round(completed /  cant * 100);
+    }    
+    return 0;
+
   }
 }
diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts
index 55713fd..0b22b1a 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/src/app/todo-app/todo-app.component.ts
@@ -10,20 +10,35 @@ import { TodoService } from '../todo.service';
 })
 export class TodoAppComponent  {
 
+  list: any = [];
   constructor(
     private service: TodoService
-  ) {}
+  ) {
+    this.list = this.service.getList();
+  }
 
-  getList() {
-    return this.service.list;
+  getList() {    
+    return this.list;
+    
   }
-  onTodoItemRemoved(id) {
+
+  onTodoItemRemoved(id) {    
     this.service.remove(id);
+
   }
-  onItemStateChanged(item: TodoItem) {
-    item.toggleCompleted();
+  onItemStateChanged(item: TodoItem) {    
+    debugger;
+    // item.toggleCompleted();
+    if(item.isCompleted){
+      item.isCompleted = false;
+    }else{
+      item.isCompleted = true;
+    }
+    this.service.update(item);
+
   }
-  onTodoItemCreated(task: TodoItem) {
+  onTodoItemCreated(task: TodoItem) {    
     this.service.add(task);
+
   }
 }
diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts
index b3f9c3e..daadaf0 100644
--- a/src/app/todo-form/todo-form.component.ts
+++ b/src/app/todo-form/todo-form.component.ts
@@ -10,8 +10,8 @@ export class TodoFormComponent {
 
   @Output() add = new EventEmitter();
 
-  save(description){
-    if(description.value || description.value === '') {
+  save(description){    
+    if(!description.value || description.value === '') {
       return;
     }
     let task = new TodoItem();
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts
index 9d34243..8ecf3fc 100644
--- a/src/app/todo-list/todo-list.component.ts
+++ b/src/app/todo-list/todo-list.component.ts
@@ -10,15 +10,20 @@ export class TodoListComponent implements OnInit {
   @Input() list: any[];
   @Output() itemRemoved = new EventEmitter();
   @Output() itemStateChanged = new EventEmitter();
-  constructor() { }
+  constructor() { 
+    debugger;
+    console.dir(this.list);
+  }
 
   ngOnInit() {
   }
+  
   removeItem(id) {
     this.itemRemoved.emit(id);
   }
 
   completeTask(item:TodoItem) {
+    debugger;
     this.itemStateChanged.emit(item);
 
   }
diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
index 36ae1ec..47b8bb5 100644
--- a/src/app/todo.service.ts
+++ b/src/app/todo.service.ts
@@ -1,41 +1,53 @@
 import { Injectable } from '@angular/core';
 import { LocalStorageService } from './local-storage.service';
 import { TodoItem } from './model/todo-item';
+import { isNgTemplate } from '@angular/compiler';
 
 @Injectable({
   providedIn: 'root'
 })
 export class TodoService {
 
-  list = [];
+  list: any = [];
+  items: Array<TodoItem>;
   lastItemId = 0;
 
   constructor(private storage: LocalStorageService) {
 
-  this.list = storage.cargarLocalStorage();
    }
 
-  add(task: TodoItem) {
+   getList(){
+     this.list = this.storage.cargarLocalStorage();
+    return this.list;
+   }
+
+  add(task: TodoItem) {    
     const id = this.lastItemId;
     task.id = id;
-    this.storage.grabarLocalStorage(task);
-    // this.list.push(task);
-    this.lastItemId += 10;
+    this.storage.grabarLocalStorage(task);    
+    this.lastItemId += 1;
   }
 
   remove(id) {
     this.storage.eliminarLocalStorage(id);
 
-    // const index = this.list.findIndex((element) => element.id === id);
-    // this.list.splice(index, 1);
   }
 
-  incompletedSize() {
-    return this.list.filter(item => !item.isCompleted).length;
+  incompletedSize() {    
+     this.items = this.storage.cargarLocalStorage();
+    return this.items.filter(item => !item.isCompleted).length;
 
   }
-  completedSize() {
-    return  this.list.filter(item => item.isCompleted).length ;
+  
+  completedSize() {    
+    this.items = this.storage.cargarLocalStorage();
+    return this.items.filter(item => item.isCompleted).length;
+
+  }
+
+  update(item: TodoItem){
+    this.storage.updateLocalStorage(item);
+    
   }
 
   getName() {

From 9c4c9e51f89e8199d266eb410dbffadc1266788e Mon Sep 17 00:00:00 2001
From: Giuliano <giulianot@knowtech.ws>
Date: Tue, 30 Jun 2020 12:41:01 -0300
Subject: [PATCH 3/5] re-carga localStorage ante alguna modificacion con error

---
 src/app/local-storage.service.ts         |  9 +++++----
 src/app/todo-app/todo-app.component.ts   |  7 ++++---
 src/app/todo-list/todo-list.component.ts | 13 +++++--------
 src/app/todo.service.ts                  | 16 ++++++++--------
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts
index fbc50d0..9c0aa8c 100644
--- a/src/app/local-storage.service.ts
+++ b/src/app/local-storage.service.ts
@@ -15,17 +15,18 @@ export class LocalStorageService {
     return 'LocalStorageService';
   }
   cargarLocalStorage(){    
-    this.list = [];
+    
     debugger;
     Object.values(localStorage).forEach(p => {
-      this.list.push(JSON.parse(p));
+      this.list.push(JSON.parse(p)); 
 
     });
-
     return this.list;
   }
 
   grabarLocalStorage(item: TodoItem){
+    debugger;
+    item.id = localStorage.length;
     localStorage.setItem(item.id.toString(), JSON.stringify(item));
   }
 
@@ -35,7 +36,7 @@ export class LocalStorageService {
 
   }
 
-  eliminarLocalStorage(key){
+  eliminarLocalStorage(key){    
     const value = localStorage.getItem(key);
     console.dir(value);
     if(value !== undefined && value){
diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts
index 0b22b1a..8ce1339 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/src/app/todo-app/todo-app.component.ts
@@ -8,12 +8,14 @@ import { TodoService } from '../todo.service';
   templateUrl: './todo-app.component.html',
   styleUrls: ['./todo-app.component.scss'],
 })
-export class TodoAppComponent  {
+export class TodoAppComponent implements OnInit  {
 
   list: any = [];
   constructor(
     private service: TodoService
-  ) {
+  ) { }
+
+  ngOnInit() {    
     this.list = this.service.getList();
   }
 
@@ -27,7 +29,6 @@ export class TodoAppComponent  {
 
   }
   onItemStateChanged(item: TodoItem) {    
-    debugger;
     // item.toggleCompleted();
     if(item.isCompleted){
       item.isCompleted = false;
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts
index 8ecf3fc..c42d2c5 100644
--- a/src/app/todo-list/todo-list.component.ts
+++ b/src/app/todo-list/todo-list.component.ts
@@ -7,23 +7,20 @@ import { TodoItem } from '../model/todo-item';
   styleUrls: ['./todo-list.component.scss']
 })
 export class TodoListComponent implements OnInit {
-  @Input() list: any[];
+  @Input() list: any = [];
   @Output() itemRemoved = new EventEmitter();
   @Output() itemStateChanged = new EventEmitter();
-  constructor() { 
-    debugger;
-    console.dir(this.list);
+  constructor() {    
   }
 
-  ngOnInit() {
+  ngOnInit() {    
   }
   
-  removeItem(id) {
+  removeItem(id) {    
     this.itemRemoved.emit(id);
   }
 
-  completeTask(item:TodoItem) {
-    debugger;
+  completeTask(item:TodoItem) {    
     this.itemStateChanged.emit(item);
 
   }
diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
index 47b8bb5..a1c9578 100644
--- a/src/app/todo.service.ts
+++ b/src/app/todo.service.ts
@@ -22,10 +22,8 @@ export class TodoService {
    }
 
   add(task: TodoItem) {    
-    const id = this.lastItemId;
-    task.id = id;
-    this.storage.grabarLocalStorage(task);    
-    this.lastItemId += 1;
+    this.storage.grabarLocalStorage(task);
+    
   }
 
   remove(id) {
@@ -34,14 +32,16 @@ export class TodoService {
   }
 
   incompletedSize() {    
-     this.items = this.storage.cargarLocalStorage();
-    return this.items.filter(item => !item.isCompleted).length;
+    return this.list.filter(item => !item.isCompleted).length;
+    //  this.items = this.storage.cargarLocalStorage();
+    // return this.items.filter(item => !item.isCompleted).length;
 
   }
   
   completedSize() {    
-    this.items = this.storage.cargarLocalStorage();
-    return this.items.filter(item => item.isCompleted).length;
+    return this.list.filter(item => item.isCompleted).length;
+    // this.items = this.storage.cargarLocalStorage();
+    // return this.items.filter(item => item.isCompleted).length;
 
   }
 

From d3c196b291e8c709855a85efb16b86857f308665 Mon Sep 17 00:00:00 2001
From: Giuliano <giulianot@knowtech.ws>
Date: Tue, 30 Jun 2020 17:10:28 -0300
Subject: [PATCH 4/5] - LocalStorage sin finalizar

---
 src/app/app.module.ts                        |  2 +-
 src/app/local-storage.service.ts             | 39 +++++++++++---------
 src/app/stats/stats.component.ts             | 13 ++++---
 src/app/todo-app/todo-app.component.html     |  5 ++-
 src/app/todo-app/todo-app.component.ts       | 16 ++++----
 src/app/todo-footer/todo-footer.component.ts | 31 +++++++++-------
 src/app/todo-list/todo-list.component.ts     |  2 +-
 src/app/todo.service.ts                      | 37 +++++++++----------
 8 files changed, 78 insertions(+), 67 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 737845f..2f8aca2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -23,7 +23,7 @@ import { StatsComponent } from './stats/stats.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule    
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts
index 9c0aa8c..58c04c9 100644
--- a/src/app/local-storage.service.ts
+++ b/src/app/local-storage.service.ts
@@ -1,6 +1,4 @@
 import { Injectable } from '@angular/core';
-import { stringify } from 'querystring';
-import { JsonPipe } from '@angular/common';
 import { TodoItem } from './model/todo-item';
 
 @Injectable({
@@ -8,39 +6,44 @@ import { TodoItem } from './model/todo-item';
 })
 export class LocalStorageService {
   // https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
-  list: any = [];
-  constructor() {    
-  }
+  
+  myStorage = localStorage;
+  constructor() { }
   getName() {
     return 'LocalStorageService';
   }
-  cargarLocalStorage(){    
-    
-    debugger;
-    Object.values(localStorage).forEach(p => {
-      this.list.push(JSON.parse(p)); 
+  cargarLocalStorage(){
+    const list = [];
+    Object.values(this.myStorage).forEach(p => {
+      list.push(JSON.parse(p)); 
 
     });
-    return this.list;
+    return list; 
+    
   }
 
   grabarLocalStorage(item: TodoItem){
     debugger;
-    item.id = localStorage.length;
+    item.id = this.myStorage.length;
     localStorage.setItem(item.id.toString(), JSON.stringify(item));
   }
 
-  updateLocalStorage(item: TodoItem){    
-    localStorage.removeItem(item.id.toString());
-    localStorage.setItem(item.id.toString(), JSON.stringify(item));
+  updateLocalStorage(item: TodoItem){
+    this.myStorage.removeItem(item.id.toString());
+    this.myStorage.setItem(item.id.toString(), JSON.stringify(item));
 
   }
 
-  eliminarLocalStorage(key){    
-    const value = localStorage.getItem(key);
+  deleteItem(key){    
+    const value = this.myStorage.getItem(key);
     console.dir(value);
     if(value !== undefined && value){
-      localStorage.removeItem(key);
+      this.myStorage.removeItem(key);
     }
   }
+
+  Clean(){
+    this.myStorage.clear();
+  }
+
 }
diff --git a/src/app/stats/stats.component.ts b/src/app/stats/stats.component.ts
index 0fb5ea7..66f9020 100644
--- a/src/app/stats/stats.component.ts
+++ b/src/app/stats/stats.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { TodoService } from '../todo.service';
 
 @Component({
@@ -8,6 +8,7 @@ import { TodoService } from '../todo.service';
 })
 export class StatsComponent implements OnInit {
 
+  @Input() list: any[];
   constructor(
     private service: TodoService
   ) { }
@@ -15,10 +16,12 @@ export class StatsComponent implements OnInit {
   ngOnInit(): void {
   }
   completedPercentage() {
-    const cant = this.service.list.length;
-    const completed = this.service.completedSize();
-    if(!cant && cant !== undefined){
-      return Math.round(completed /  cant * 100);
+    debugger;
+    this.list = this.service.list;
+    if(this.list && this.list !== undefined){ 
+      const completed = this.list.filter(item => item.isCompleted).length * 100;
+      const percenter = this.list.length;
+      return Math.round(completed / percenter);
     }    
     return 0;
 
diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html
index 786cc57..1452bab 100644
--- a/src/app/todo-app/todo-app.component.html
+++ b/src/app/todo-app/todo-app.component.html
@@ -9,4 +9,7 @@
   [list]="getList()"
 >
 </app-todo-footer>
-<app-stats></app-stats>
\ No newline at end of file
+<app-stats
+[list]="getList()"
+>
+</app-stats>
\ No newline at end of file
diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts
index 8ce1339..26adb62 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/src/app/todo-app/todo-app.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import {TodoItem} from '../model/todo-item';
-import { element } from 'protractor';
 import { TodoService } from '../todo.service';
 /** */
 @Component({
@@ -10,23 +9,26 @@ import { TodoService } from '../todo.service';
 })
 export class TodoAppComponent implements OnInit  {
 
+  cant: number = 0;
   list: any = [];
   constructor(
     private service: TodoService
   ) { }
 
-  ngOnInit() {    
-    this.list = this.service.getList();
+  ngOnInit() { 
+    this.service.getList(); 
+    
   }
 
-  getList() {    
-    return this.list;
+  getList() {
+    debugger;
+    return this.service.list;
     
   }
 
   onTodoItemRemoved(id) {    
     this.service.remove(id);
-
+    this.getList();
   }
   onItemStateChanged(item: TodoItem) {    
     // item.toggleCompleted();
@@ -40,6 +42,6 @@ export class TodoAppComponent implements OnInit  {
   }
   onTodoItemCreated(task: TodoItem) {    
     this.service.add(task);
-
+    this.getList();
   }
 }
diff --git a/src/app/todo-footer/todo-footer.component.ts b/src/app/todo-footer/todo-footer.component.ts
index 6e1af04..2065867 100644
--- a/src/app/todo-footer/todo-footer.component.ts
+++ b/src/app/todo-footer/todo-footer.component.ts
@@ -1,30 +1,33 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { TodoItem } from '../model/todo-item';
-import { TodoService } from '../todo.service';
+// import { TodoItem } from '../model/todo-item';
+// import { TodoService } from '../todo.service';
 
 @Component({
   selector: 'app-todo-footer',
   templateUrl: './todo-footer.component.html',
   styleUrls: ['./todo-footer.component.scss']
 })
-export class TodoFooterComponent implements OnInit {
-  countTodo = 0;
-  countCompleted = 0;
-  @Input() list;
-  constructor(
-    private service: TodoService
-  ) { }
+export class TodoFooterComponent implements OnInit {  
+  @Input() list: any = [];
+  constructor( ) { }
 
   ngOnInit() {
 
   }
   incompletedSize() {
-    this.countTodo = this.service.incompletedSize()
-    return this.countTodo;
+    if(this.list && this.list !== undefined){
+      return this.list.filter(item => !item.isCompleted).length;
+    } else {
+      return 0;
+    }
+    
   }
-  completedSize() {
-    this.countCompleted =this.service.completedSize()
-    return this.countCompleted;
+  completedSize() {    
+    if(this.list && this.list !== undefined){
+      return this.list.filter(item => item.isCompleted).length;;
+    }else {
+      return 0;
+    }    
   }
 
 }
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts
index c42d2c5..6e5f220 100644
--- a/src/app/todo-list/todo-list.component.ts
+++ b/src/app/todo-list/todo-list.component.ts
@@ -7,7 +7,7 @@ import { TodoItem } from '../model/todo-item';
   styleUrls: ['./todo-list.component.scss']
 })
 export class TodoListComponent implements OnInit {
-  @Input() list: any = [];
+  @Input() list: any[];
   @Output() itemRemoved = new EventEmitter();
   @Output() itemStateChanged = new EventEmitter();
   constructor() {    
diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
index a1c9578..9c8e5f1 100644
--- a/src/app/todo.service.ts
+++ b/src/app/todo.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { LocalStorageService } from './local-storage.service';
 import { TodoItem } from './model/todo-item';
-import { isNgTemplate } from '@angular/compiler';
+
 
 @Injectable({
   providedIn: 'root'
@@ -9,16 +9,13 @@ import { isNgTemplate } from '@angular/compiler';
 export class TodoService {
 
   list: any = [];
-  items: Array<TodoItem>;
-  lastItemId = 0;
-
-  constructor(private storage: LocalStorageService) {
 
-   }
+  constructor(private storage: LocalStorageService) { }
 
-   getList(){
-     this.list = this.storage.cargarLocalStorage();
-    return this.list;
+   getList(){     
+     debugger;
+    this.list = this.storage.cargarLocalStorage();
+     
    }
 
   add(task: TodoItem) {    
@@ -27,23 +24,23 @@ export class TodoService {
   }
 
   remove(id) {
-    this.storage.eliminarLocalStorage(id);
+    this.storage.deleteItem(id);
 
   }
 
-  incompletedSize() {    
-    return this.list.filter(item => !item.isCompleted).length;
-    //  this.items = this.storage.cargarLocalStorage();
-    // return this.items.filter(item => !item.isCompleted).length;
+  // incompletedSize() {    
+  //   return this.list.filter(item => !item.isCompleted).length;
+  //   //  this.items = this.storage.cargarLocalStorage();
+  //   // return this.items.filter(item => !item.isCompleted).length;
 
-  }
+  // }
   
-  completedSize() {    
-    return this.list.filter(item => item.isCompleted).length;
-    // this.items = this.storage.cargarLocalStorage();
-    // return this.items.filter(item => item.isCompleted).length;
+  // completedSize() {    
+  //   return this.list.filter(item => item.isCompleted).length;
+  //   // this.items = this.storage.cargarLocalStorage();
+  //   // return this.items.filter(item => item.isCompleted).length;
 
-  }
+  // }
 
   update(item: TodoItem){
     this.storage.updateLocalStorage(item);

From 84951cae8538fa09fc1e7d5197badd097dc7a001 Mon Sep 17 00:00:00 2001
From: Giuliano <giulianot@knowtech.ws>
Date: Thu, 2 Jul 2020 10:13:27 -0300
Subject: [PATCH 5/5] Terminado, en funcionamiento

---
 src/app/local-storage.service.ts         | 12 +++++-
 src/app/stats/stats.component.ts         |  3 +-
 src/app/todo-app/todo-app.component.html | 19 ++++-----
 src/app/todo-app/todo-app.component.scss |  3 ++
 src/app/todo-app/todo-app.component.ts   | 49 ++++++++++++++----------
 src/app/todo.service.ts                  |  9 ++++-
 6 files changed, 59 insertions(+), 36 deletions(-)

diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts
index 58c04c9..b954da2 100644
--- a/src/app/local-storage.service.ts
+++ b/src/app/local-storage.service.ts
@@ -22,10 +22,10 @@ export class LocalStorageService {
     
   }
 
-  grabarLocalStorage(item: TodoItem){
-    debugger;
+  grabarLocalStorage(item: TodoItem){    
     item.id = this.myStorage.length;
     localStorage.setItem(item.id.toString(), JSON.stringify(item));
+    
   }
 
   updateLocalStorage(item: TodoItem){
@@ -42,6 +42,14 @@ export class LocalStorageService {
     }
   }
 
+  Save(list: any[]){
+    this.Clean();
+    list.forEach(x => {
+      this.myStorage.setItem(x.id.toString(), JSON.stringify(x));
+
+    });
+  }
+
   Clean(){
     this.myStorage.clear();
   }
diff --git a/src/app/stats/stats.component.ts b/src/app/stats/stats.component.ts
index 66f9020..f4e0454 100644
--- a/src/app/stats/stats.component.ts
+++ b/src/app/stats/stats.component.ts
@@ -15,8 +15,7 @@ export class StatsComponent implements OnInit {
 
   ngOnInit(): void {
   }
-  completedPercentage() {
-    debugger;
+  completedPercentage() {    
     this.list = this.service.list;
     if(this.list && this.list !== undefined){ 
       const completed = this.list.filter(item => item.isCompleted).length * 100;
diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html
index 1452bab..64b4677 100644
--- a/src/app/todo-app/todo-app.component.html
+++ b/src/app/todo-app/todo-app.component.html
@@ -1,15 +1,12 @@
 <app-todo-form (add)="onTodoItemCreated($event)"></app-todo-form>
-<app-todo-list
-  [list]="getList()"
-  (itemRemoved)="onTodoItemRemoved($event)"
-  (itemStateChanged)="onItemStateChanged($event)"
->
+<app-todo-list [list]="getList()" (itemRemoved)="onTodoItemRemoved($event)"
+  (itemStateChanged)="onItemStateChanged($event)">
 </app-todo-list>
-<app-todo-footer
-  [list]="getList()"
->
+<div class="buttons">
+  <button class="btn btn-primary" type="button" (click)="save()" >Guardar</button>
+  <button class="btn btn-danger" type="button" (click)="clear()" >Limpiar</button>
+</div>
+<app-todo-footer [list]="getList()">
 </app-todo-footer>
-<app-stats
-[list]="getList()"
->
+<app-stats [list]="getList()">
 </app-stats>
\ No newline at end of file
diff --git a/src/app/todo-app/todo-app.component.scss b/src/app/todo-app/todo-app.component.scss
index e69de29..556e8c5 100644
--- a/src/app/todo-app/todo-app.component.scss
+++ b/src/app/todo-app/todo-app.component.scss
@@ -0,0 +1,3 @@
+.buttons {
+    justify-content: space-between;
+}
\ No newline at end of file
diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts
index 26adb62..8f6b977 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/src/app/todo-app/todo-app.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {TodoItem} from '../model/todo-item';
+import { TodoItem } from '../model/todo-item';
 import { TodoService } from '../todo.service';
 /** */
 @Component({
@@ -7,41 +7,50 @@ import { TodoService } from '../todo.service';
   templateUrl: './todo-app.component.html',
   styleUrls: ['./todo-app.component.scss'],
 })
-export class TodoAppComponent implements OnInit  {
+export class TodoAppComponent implements OnInit {
 
   cant: number = 0;
-  list: any = [];
+  list: any[];
   constructor(
     private service: TodoService
   ) { }
 
-  ngOnInit() { 
-    this.service.getList(); 
-    
+  ngOnInit() {
+    this.service.getList();
+
   }
 
-  getList() {
-    debugger;
-    return this.service.list;
-    
+  getList() {    
+    this.list = this.service.list;
+    return this.list;
+
   }
 
-  onTodoItemRemoved(id) {    
-    this.service.remove(id);
-    this.getList();
+  onTodoItemRemoved(id) {
+    var items = this.list.find(x => x.id === id);
+    this.list.splice(items.id);    
+
   }
   onItemStateChanged(item: TodoItem) {    
-    // item.toggleCompleted();
-    if(item.isCompleted){
+    if (item.isCompleted) {
       item.isCompleted = false;
-    }else{
+    } else {
       item.isCompleted = true;
-    }
-    this.service.update(item);
+    }    
 
   }
   onTodoItemCreated(task: TodoItem) {    
-    this.service.add(task);
-    this.getList();
+    let lastId = this.list.length;
+    task.id = lastId;
+    this.list.push(task);    
+  }
+
+  save() {    
+    this.service.save(this.list);
+
+  }
+
+  clear() {
+    this.service.clear();    
   }
 }
diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
index 9c8e5f1..1a41086 100644
--- a/src/app/todo.service.ts
+++ b/src/app/todo.service.ts
@@ -13,7 +13,6 @@ export class TodoService {
   constructor(private storage: LocalStorageService) { }
 
    getList(){     
-     debugger;
     this.list = this.storage.cargarLocalStorage();
      
    }
@@ -25,7 +24,15 @@ export class TodoService {
 
   remove(id) {
     this.storage.deleteItem(id);
+  }
+
+  save(lstItems: any[]){
+    this.storage.Save(lstItems);
+  }
 
+  clear(){    
+    this.storage.Clean();
+    this.list = [];
   }
 
   // incompletedSize() {