Services

src/app/app.module.ts

@@ -23,7 +23,7 @@ import { StatsComponent } from './stats/stats.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule    
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/local-storage.service.ts

@@ -1,12 +1,57 @@
 import { Injectable } from '@angular/core';
+import { TodoItem } from './model/todo-item';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LocalStorageService {
   // https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
+
+  myStorage = localStorage;
   constructor() { }
   getName() {
-    return 'LocalStorageService'
+    return 'LocalStorageService';
   }
+  cargarLocalStorage(){
+    const list = [];
+    Object.values(this.myStorage).forEach(p => {
+      list.push(JSON.parse(p)); 
+
+    });
+    return list; 
+
+  }
+
+  grabarLocalStorage(item: TodoItem){    
+    item.id = this.myStorage.length;
+    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));
+
+  }
+
+  deleteItem(key){    
+    const value = this.myStorage.getItem(key);
+    console.dir(value);
+    if(value !== undefined && value){
+      this.myStorage.removeItem(key);
+    }
+  }
+
+  Save(list: any[]){
+    this.Clean();
+    list.forEach(x => {
+      this.myStorage.setItem(x.id.toString(), JSON.stringify(x));
+
+    });
+  }
+
+  Clean(){
+    this.myStorage.clear();
+  }
+
 }

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,13 +8,21 @@ import { TodoService } from '../todo.service';
 })
 export class StatsComponent implements OnInit {
 
+  @Input() list: any[];
   constructor(
     private service: TodoService
   ) { }
 
   ngOnInit(): void {
   }
-  completedPercentage() {
-    return Math.round(this.service.completedSize() /  this.service.list.length * 100) || 0
+  completedPercentage() {    
+    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;
+
   }
 }

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

@@ -1,12 +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></app-stats>
+<app-stats [list]="getList()">
+</app-stats>

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

@@ -0,0 +1,3 @@
+.buttons {
+    justify-content: space-between;
+}

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

@@ -1,29 +1,56 @@
 import { Component, OnInit } from '@angular/core';
-import {TodoItem} from '../model/todo-item';
-import { element } from 'protractor';
+import { TodoItem } from '../model/todo-item';
 import { TodoService } from '../todo.service';
 /** */
 @Component({
   selector: 'app-todo',
   templateUrl: './todo-app.component.html',
   styleUrls: ['./todo-app.component.scss'],
 })
-export class TodoAppComponent  {
+export class TodoAppComponent implements OnInit {
 
+  cant: number = 0;
+  list: any[];
   constructor(
     private service: TodoService
-  ) {}
+  ) { }
+
+  ngOnInit() {
+    this.service.getList();
+
+  }
+
+  getList() {    
+    this.list = this.service.list;
+    return this.list;
 
-  getList() {
-    return this.service.list;
   }
+
   onTodoItemRemoved(id) {
-    this.service.remove(id);
+    var items = this.list.find(x => x.id === id);
+    this.list.splice(items.id);    
+
   }
-  onItemStateChanged(item: TodoItem) {
-    item.toggleCompleted();
+  onItemStateChanged(item: TodoItem) {    
+    if (item.isCompleted) {
+      item.isCompleted = false;
+    } else {
+      item.isCompleted = true;
+    }    
+
+  }
+  onTodoItemCreated(task: TodoItem) {    
+    let lastId = this.list.length;
+    task.id = lastId;
+    this.list.push(task);    
+  }
+
+  save() {    
+    this.service.save(this.list);
+
   }
-  onTodoItemCreated(task) {
-    this.service.add(task)
+
+  clear() {
+    this.service.clear();    
   }
 }

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;
+    }    
   }
 
 }

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

@@ -10,7 +10,7 @@ export class TodoFormComponent {
 
   @Output() add = new EventEmitter();
 
-  save(description){
+  save(description){    
     if(!description.value || description.value === '') {
       return;
     }

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

@@ -10,17 +10,18 @@ export class TodoListComponent implements OnInit {
   @Input() list: any[];
   @Output() itemRemoved = new EventEmitter();
   @Output() itemStateChanged = new EventEmitter();
-  constructor() { }
+  constructor() {    
+  }
 
-  ngOnInit() {
+  ngOnInit() {    
   }
-  removeItem(id) {
+
+  removeItem(id) {    
     this.itemRemoved.emit(id);
   }
 
-  completeTask(item:TodoItem) {
+  completeTask(item:TodoItem) {    
     this.itemStateChanged.emit(item);
 
   }
-
 }

src/app/todo.service.ts

@@ -1,34 +1,57 @@
 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;
+
+  list: any = [];
 
   constructor(private storage: LocalStorageService) { }
-
-  add(task) {
-    const id = this.lastItemId;
-    task.id = id;
-    this.list.push(task);
-    this.lastItemId += 10;
+
+   getList(){     
+    this.list = this.storage.cargarLocalStorage();
+
+   }
+
+  add(task: TodoItem) {    
+    this.storage.grabarLocalStorage(task);
+
   }
 
   remove(id) {
-    const index = this.list.findIndex((element) => element.id === id);
-    this.list.splice(index, 1);
+    this.storage.deleteItem(id);
   }
 
-  incompletedSize() {
-    return this.list.filter(item => !item.isCompleted).length;
+  save(lstItems: any[]){
+    this.storage.Save(lstItems);
+  }
 
+  clear(){    
+    this.storage.Clean();
+    this.list = [];
   }
-  completedSize() {
-    return  this.list.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;
+
+  // }
+
+  update(item: TodoItem){
+    this.storage.updateLocalStorage(item);
+
   }
 
   getName() {