diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts index 204c7fc..4c40389 100644 --- a/src/app/local-storage.service.ts +++ b/src/app/local-storage.service.ts @@ -1,3 +1,4 @@ +import { TodoItem } from './model/todo-item'; import { Injectable } from '@angular/core'; @Injectable({ @@ -5,8 +6,25 @@ import { Injectable } from '@angular/core'; }) 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(); } } diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts index cc42271..475a862 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 { Component } from '@angular/core'; import {TodoItem} from '../model/todo-item'; -import { element } from 'protractor'; import { TodoService } from '../todo.service'; /** */ @Component({ @@ -14,6 +13,10 @@ export class TodoAppComponent { private service: TodoService ) {} + ngOnInit() { + this.service.loadListFromLocalStorage(); + } + getList() { return this.service.list; } @@ -21,9 +24,9 @@ export class TodoAppComponent { this.service.remove(id); } onItemStateChanged(item: TodoItem) { - item.toggleCompleted(); + this.service.updateItemState(item); } onTodoItemCreated(task) { - this.service.add(task) + this.service.add(task); } } diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html index 127ec76..1aaae8f 100644 --- a/src/app/todo-list/todo-list.component.html +++ b/src/app/todo-list/todo-list.component.html @@ -8,4 +8,4 @@ - + diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts index fc5d8f0..1dba42e 100644 --- a/src/app/todo-list/todo-list.component.ts +++ b/src/app/todo-list/todo-list.component.ts @@ -20,7 +20,8 @@ export class TodoListComponent implements OnInit { completeTask(item:TodoItem) { 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..e2fb81f 100644 --- a/src/app/todo.service.ts +++ b/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; } }