Ejercicio de servicios con localStorage terminado

src/app/local-storage.service.ts

@@ -1,12 +1,30 @@
+import { TodoItem } from './model/todo-item';
 import { Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LocalStorageService {
   // https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
+
   constructor() { }
-  getName() {
-    return 'LocalStorageService'
+
+  saveListInLocalStorage( list: TodoItem[], lastItemId: number ) {
+    localStorage.setItem( "list", JSON.stringify( list ) );
+    localStorage.setItem( "lastItemId", JSON.stringify( lastItemId ) );
+  }
+
+  loadListFromLocalStorage() {
+    let tasks: TodoItem[] = JSON.parse( localStorage.getItem( "list" ) );
+    let lastItemId: number = JSON.parse( localStorage.getItem( "lastItemId" ) );
+    if ( tasks === null ) {
+      tasks = [];
+      lastItemId = 0;
+    }
+    return { "list": tasks, "lastItemId": lastItemId };
+  }
+
+  clearLocalStorage() {
+    localStorage.clear();
   }
 }

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

@@ -1,6 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import {TodoItem} from '../model/todo-item';
-import { element } from 'protractor';
 import { TodoService } from '../todo.service';
 /** */
 @Component({
@@ -14,16 +13,20 @@ export class TodoAppComponent  {
     private service: TodoService
   ) {}
 
+  ngOnInit() {
+    this.service.loadListFromLocalStorage();
+  }
+
   getList() {
     return this.service.list;
   }
   onTodoItemRemoved(id) {
     this.service.remove(id);
   }
   onItemStateChanged(item: TodoItem) {
-    item.toggleCompleted();
+    this.service.updateItemState(item);
   }
   onTodoItemCreated(task) {
-    this.service.add(task)
+    this.service.add(task);
   }
 }

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

@@ -8,4 +8,4 @@
         <button class="btn btn-success" (click)="completeTask(task)">V</button>
       </span>
     </li>
-  </ul>
+</ul>

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

@@ -20,7 +20,8 @@ export class TodoListComponent implements OnInit {
 
   completeTask(item:TodoItem) {
     this.itemStateChanged.emit(item);
-
   }
 
+
+
 }

src/app/todo.service.ts

@@ -1,3 +1,4 @@
+import { TodoItem } from './model/todo-item';
 import { Injectable } from '@angular/core';
 import { LocalStorageService } from './local-storage.service';
 
@@ -6,32 +7,47 @@ import { LocalStorageService } from './local-storage.service';
 })
 export class TodoService {
 
-  list = [];
+  list: TodoItem[] = [];
   lastItemId = 0;
 
   constructor(private storage: LocalStorageService) { }
 
-  add(task) {
+  add(task: TodoItem) {
     const id = this.lastItemId;
     task.id = id;
     this.list.push(task);
-    this.lastItemId += 10;
+    this.lastItemId += 1;
+    this.storage.saveListInLocalStorage( this.list, this.lastItemId );
   }
 
-  remove(id) {
+  remove(id: number) {
     const index = this.list.findIndex((element) => element.id === id);
     this.list.splice(index, 1);
+    if ( this.list.length === 0 ) {
+      this.storage.clearLocalStorage();
+    } else {
+      this.storage.saveListInLocalStorage( this.list, this.lastItemId );
+    }
+  }
+
+  loadListFromLocalStorage() {
+    let { list, lastItemId } = this.storage.loadListFromLocalStorage();
+    this.list = list;
+    this.lastItemId = lastItemId;
+  }
+
+  updateItemState(task: TodoItem) {
+    task.isCompleted = !task.isCompleted;
+    const index = this.list.findIndex( item => item.id === task.id );
+    this.list[index] = task;
+    this.storage.saveListInLocalStorage( this.list, this.lastItemId );
   }
 
   incompletedSize() {
     return this.list.filter(item => !item.isCompleted).length;
-
-  }
-  completedSize() {
-    return  this.list.filter(item => item.isCompleted).length ;
   }
 
-  getName() {
-    return 'TodoService 123' + this.storage.getName();
+  completedSize() {
+    return this.list.filter(item => item.isCompleted).length;
   }
 }