From 222834628d39906c20fab2c3165f6c03907a2251 Mon Sep 17 00:00:00 2001 From: Sebastian Moreyra Date: Thu, 2 Jul 2020 15:39:28 -0300 Subject: [PATCH] Exercise solved --- package-lock.json | 60 +++++++++++++----------- src/app/local-storage.service.ts | 25 ++++++++++ src/app/model/todo-item.ts | 5 ++ src/app/todo-app/todo-app.component.ts | 1 + src/app/todo-form/todo-form.component.ts | 5 +- src/app/todo.service.ts | 34 ++++++++++++-- 6 files changed, 96 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index 90e9696..969c3b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -118,6 +118,12 @@ "webpack-sources": "1.4.3" }, "dependencies": { + "tslib": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz", + "integrity": "sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==", + "dev": true + }, "typescript": { "version": "3.6.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.5.tgz", @@ -195,9 +201,9 @@ } }, "@angular/animations": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.1.tgz", - "integrity": "sha512-IvKv8sV0ymbzDEX2ZLW+F6nOTQqDYallHexuzRVT9txvNE8TNHyySvLcyC5dTmX9fj9LA72NZ6nFyhxq0LFvtQ==" + "version": "9.1.11", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.11.tgz", + "integrity": "sha512-VKAExUnEJfo1PDQKagpx2pn+QMZCsPLRiADzTdl4U0VPylK3ALbn4ZNY9UbdwyE2plitz++LkH7sEGGfh+PNrQ==" }, "@angular/cli": { "version": "9.1.1", @@ -242,14 +248,14 @@ } }, "@angular/common": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-9.1.1.tgz", - "integrity": "sha512-bS13veMs7//YqYjYJ+JI78ylaCyVcdFKZKikd5SZa6+r6fajcyvLnSKqrKypG3O1BeJ8vOG/Pq54P5gWhbR6eA==" + "version": "9.1.11", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-9.1.11.tgz", + "integrity": "sha512-Vh5lF7zWwDK9RedmYXUc8vUXyrecR3j1mAWlTlnmcHYxxFThPzN/dr0slQcPi6nyJn0EmyRKUGvAoZx4rIb7wg==" }, "@angular/compiler": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.1.1.tgz", - "integrity": "sha512-u1IP6IzUgK6lIzrG1cxp96umXgtThyhuFn/KPoyVt7wPxZ6vVR0ZxjM7zycEcrMGzk0nf0nyOKaksJk9sTXTbg==" + "version": "9.1.11", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.1.11.tgz", + "integrity": "sha512-MbVheCG0U8gt6xtiipau20N26mD2sXjLChVmRKgO6rbDruxboNMZfEd94q9NP9JRaUsVnjXvY7GMDldoymdXig==" }, "@angular/compiler-cli": { "version": "9.1.1", @@ -455,14 +461,14 @@ } }, "@angular/core": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.1.1.tgz", - "integrity": "sha512-6lDlUlePafr/392hOvvTZZl6xPHT50U6658sHUAVIr0Un4mJ2MHNHKZtO45bpn3hM4gjFcYRQ7Rpd0umW74iTA==" + "version": "9.1.11", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.1.11.tgz", + "integrity": "sha512-KAlEedBo761O1aeoTJVziOSHi8Fttk9ipvbDZXYT/o0W/KdVwubxP34g9t5aD8LCcF8+L0z4VLw++HjdJAUpwg==" }, "@angular/forms": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.1.tgz", - "integrity": "sha512-NX+LuK8JFisiq3uHCOK6YoN/yIb2R9Ye5mwiOPkuZA3lZLKCnUXqCHZbM8VHy/WdjIxxeUaFMJc38yV8RVoabg==" + "version": "9.1.11", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.11.tgz", + "integrity": "sha512-t4WHrh6ot1r8zdV+3fJz7g9rCok77c9CiIevhH2dR/idxD+HtFR0wqmcBQzsn+rNVB0f0TiSHDrj+TeELIFyWw==" }, "@angular/language-service": { "version": "9.1.1", @@ -471,19 +477,19 @@ "dev": true }, "@angular/platform-browser": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.1.tgz", - "integrity": "sha512-tjALKhdAWPErj0euIIdvx/31AHEZ7is7ADsMu+nYn2NY2gcPUuiqq3RCUJVxBYJ2Cclq1nlF0i2rEDKh7TrBKg==" + "version": "9.1.11", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.11.tgz", + "integrity": "sha512-KDxoiFhW4UD+EqchcKpQVSLwg9Rd3JbWytZLchFV6nH8BFnshfJtw2tyPT8bMhFVG9n9zSR4QSGaozWgoDs9mw==" }, "@angular/platform-browser-dynamic": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-9.1.1.tgz", - "integrity": "sha512-kEox5UOwkRLjGKXLh5o5SYopoAylpKgrXtRrKRKTCMmZTpYSe1bLlXMjpwMAMZ9ZFSTvWp9iX94aT5bJDpLrRQ==" + "version": "9.1.11", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-9.1.11.tgz", + "integrity": "sha512-Qw3rfVFF0Wtu+UwraqKPCgTA3uoNPGf4vKSfuCuXTrG0p7j+3mCP59aUv5gGH7GV1UQ++jZRx5pbWF43zrC8Hw==" }, "@angular/router": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-9.1.1.tgz", - "integrity": "sha512-OQ5Ctd+swF7ZNlgUxrkGKk2B4yBFqJm0QCxkM86kFDCKQV/4OButZ+4HPy1HxeozBIAmm2pbQA+YjsAUs0VZcQ==" + "version": "9.1.11", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-9.1.11.tgz", + "integrity": "sha512-D6CCDeSK/F6dWSB/a1g/zB072xG5LadLSV8afQ57oX1KHePx21LcoRG4tUtFMMHh/jZXRc9pMQIR1/9FrrXF3Q==" }, "@babel/code-frame": { "version": "7.8.3", @@ -11511,9 +11517,9 @@ } }, "tslib": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz", - "integrity": "sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==" + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==" }, "tslint": { "version": "6.1.1", diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts index 204c7fc..735da96 100644 --- a/src/app/local-storage.service.ts +++ b/src/app/local-storage.service.ts @@ -1,12 +1,37 @@ import { Injectable } from '@angular/core'; +import { listLazyRoutes } from '@angular/compiler/src/aot/lazy_routes'; +import { TodoItem } from './model/todo-item'; @Injectable({ providedIn: 'root' }) export class LocalStorageService { + // https://developer.mozilla.org/es/docs/Web/API/Window/localStorage constructor() { } getName() { return 'LocalStorageService' } + getTasks() { + let storedList = localStorage.getItem("taskList"); + if (storedList === null) { + let tasks = []; + return tasks; + } + else { + let tasks = JSON.parse(localStorage.getItem('taskList')).map(each => new TodoItem(each)); + return tasks; + } + } + + removeTask(list) { + localStorage.removeItem("tasklist"); + this.setTasks(list); + } + + setTasks(list) { + localStorage.setItem("taskList",JSON.stringify(list)); + } + + } diff --git a/src/app/model/todo-item.ts b/src/app/model/todo-item.ts index bdb4f8b..5283176 100644 --- a/src/app/model/todo-item.ts +++ b/src/app/model/todo-item.ts @@ -2,6 +2,11 @@ export class TodoItem { id: number; description: string; isCompleted: boolean = false; + constructor(item) { + this.id = item.id; + this.description = item.description; + this.isCompleted = item.isCompleted; + } toggleCompleted() { this.isCompleted = !this.isCompleted; diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts index cc42271..39804fb 100644 --- a/src/app/todo-app/todo-app.component.ts +++ b/src/app/todo-app/todo-app.component.ts @@ -22,6 +22,7 @@ export class TodoAppComponent { } onItemStateChanged(item: TodoItem) { item.toggleCompleted(); + this.service.changeState(item); } onTodoItemCreated(task) { 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..cbdbb3e 100644 --- a/src/app/todo-form/todo-form.component.ts +++ b/src/app/todo-form/todo-form.component.ts @@ -14,9 +14,8 @@ export class TodoFormComponent { if(!description.value || description.value === '') { return; } - let task = new TodoItem(); - task.description = description.value; - task.isCompleted = false; + let task = {description:description.value, isCompleted:false, id:0 }; + this.add.emit(task); description.value = ''; } diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts index 9bba8cc..035a13a 100644 --- a/src/app/todo.service.ts +++ b/src/app/todo.service.ts @@ -1,26 +1,46 @@ import { Injectable } from '@angular/core'; import { LocalStorageService } from './local-storage.service'; +import { TodoItem } from './model/todo-item'; @Injectable({ providedIn: 'root' }) -export class TodoService { +export class TodoService{ + - list = []; + list : TodoItem[] = []; lastItemId = 0; - constructor(private storage: LocalStorageService) { } + constructor(private storage: LocalStorageService) { + this.list = this.storage.getTasks(); + console.log(this.list); + } + add(task) { + this.lastItemId = this.getLastId(); const id = this.lastItemId; task.id = id; - this.list.push(task); + let taskAdded = new TodoItem(task); + this.list.push(taskAdded); this.lastItemId += 10; + this.storage.setTasks(this.list); + console.log(this.storage.getTasks()); + } + getLastId() { + let lastId = 0; + this.list.forEach(e => { + if(e.id >= lastId) { + lastId = e.id; + } + }) + return lastId + 1; } remove(id) { const index = this.list.findIndex((element) => element.id === id); this.list.splice(index, 1); + this.storage.removeTask(this.list); } incompletedSize() { @@ -34,4 +54,10 @@ export class TodoService { getName() { return 'TodoService 123' + this.storage.getName(); } + + changeState(item:TodoItem) { + const index = this.list.findIndex((element) => element.id === item.id); + this.list[index] = item; + this.storage.setTasks(this.list); + } }