From 3186b56af5455298a6f8ff798be4855886ce2a3e Mon Sep 17 00:00:00 2001 From: pablo-nardi Date: Sat, 5 Jun 2021 10:24:20 -0300 Subject: [PATCH 1/4] prueba --- angular.json | 3 +++ src/app/local-storage.service.ts | 12 ++++++++++++ src/app/stats/stats.component.html | 1 + src/app/todo-app/todo-app.component.html | 2 +- src/app/todo-footer/todo-footer.component.ts | 3 +++ src/app/todo-form/todo-form.component.html | 2 +- src/app/todo.service.ts | 7 +++++++ 7 files changed, 28 insertions(+), 2 deletions(-) diff --git a/angular.json b/angular.json index 1c7e6d6..5ca3921 100644 --- a/angular.json +++ b/angular.json @@ -1,5 +1,8 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "cli": { + "analytics": "aae75a62-72c7-4c0c-a21b-f3c2140272bd" + }, "version": 1, "newProjectRoot": "projects", "projects": { diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts index 204c7fc..8cc1b4f 100644 --- a/src/app/local-storage.service.ts +++ b/src/app/local-storage.service.ts @@ -9,4 +9,16 @@ export class LocalStorageService { getName() { return 'LocalStorageService' } + setItem(key:string, value:string){ + localStorage.setItem(key,value); + } + getItem(key: string){ + localStorage.getItem(key); + } + removeItem(key:string) { + localStorage.removeItem(key); + } + clear(){ + localStorage.clear(); + } } diff --git a/src/app/stats/stats.component.html b/src/app/stats/stats.component.html index b599e29..843fe17 100644 --- a/src/app/stats/stats.component.html +++ b/src/app/stats/stats.component.html @@ -3,4 +3,5 @@ [ngStyle]="{width: completedPercentage() + '%'}" > {{completedPercentage()}} % + diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html index 786cc57..38c1691 100644 --- a/src/app/todo-app/todo-app.component.html +++ b/src/app/todo-app/todo-app.component.html @@ -9,4 +9,4 @@ [list]="getList()" > - \ No newline at end of file + diff --git a/src/app/todo-footer/todo-footer.component.ts b/src/app/todo-footer/todo-footer.component.ts index 6e1af04..d92b916 100644 --- a/src/app/todo-footer/todo-footer.component.ts +++ b/src/app/todo-footer/todo-footer.component.ts @@ -26,5 +26,8 @@ export class TodoFooterComponent implements OnInit { this.countCompleted =this.service.completedSize() return this.countCompleted; } + setItem(key:string, value:string){ + this.service.setItem(key,value); + } } diff --git a/src/app/todo-form/todo-form.component.html b/src/app/todo-form/todo-form.component.html index ec0ad47..0e04de8 100644 --- a/src/app/todo-form/todo-form.component.html +++ b/src/app/todo-form/todo-form.component.html @@ -4,7 +4,7 @@ diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts index 9bba8cc..95758e3 100644 --- a/src/app/todo.service.ts +++ b/src/app/todo.service.ts @@ -13,8 +13,12 @@ export class TodoService { add(task) { const id = this.lastItemId; + task.id = id; + /* this.list.push(task); + */ + this.lastItemId += 10; } @@ -34,4 +38,7 @@ export class TodoService { getName() { return 'TodoService 123' + this.storage.getName(); } + setItem(key:string, value:string){ + this.storage.setItem(key,value); + } } From 2ac8adf95645929f417770c895b98a3e08456d53 Mon Sep 17 00:00:00 2001 From: pablo-nardi Date: Sat, 5 Jun 2021 14:49:48 -0300 Subject: [PATCH 2/4] se agrego utilizacion de localSotrage --- src/app/local-storage.service.ts | 20 +++++++++++++++++++- src/app/todo-app/todo-app.component.html | 2 ++ src/app/todo-app/todo-app.component.ts | 6 ++++++ src/app/todo-list/todo-list.component.html | 17 +++++++++++++++++ src/app/todo-list/todo-list.component.ts | 7 +++++++ src/app/todo.service.ts | 14 +++++++++----- 6 files changed, 60 insertions(+), 6 deletions(-) diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts index 8cc1b4f..0976058 100644 --- a/src/app/local-storage.service.ts +++ b/src/app/local-storage.service.ts @@ -5,6 +5,9 @@ import { Injectable } from '@angular/core'; }) export class LocalStorageService { // https://developer.mozilla.org/es/docs/Web/API/Window/localStorage + + lsArray = []; //localStorageArray + constructor() { } getName() { return 'LocalStorageService' @@ -15,10 +18,25 @@ export class LocalStorageService { getItem(key: string){ localStorage.getItem(key); } - removeItem(key:string) { + removeItem(key) { localStorage.removeItem(key); } clear(){ localStorage.clear(); } + getLocalStorage(){ + + if (localStorage.length === 0){ + console.log("local storage esta vacio"); + } + else{ + console.log(`localStorage tiene ${localStorage.length} elementos`); + for (let i = 0; i < localStorage.length; i++) { + this.lsArray[i] = JSON.parse(localStorage[i]); + console.log(this.lsArray[i]); + } + } + return this.lsArray; + } + } diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html index 38c1691..8e64302 100644 --- a/src/app/todo-app/todo-app.component.html +++ b/src/app/todo-app/todo-app.component.html @@ -1,8 +1,10 @@ LISTA EN MEMORIA
+
+
+

LISTA EN localStorage

+
    +
  • + {{task.description}} + + + + +
    • +
+ + diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts index fc5d8f0..c9a766c 100644 --- a/src/app/todo-list/todo-list.component.ts +++ b/src/app/todo-list/todo-list.component.ts @@ -7,9 +7,12 @@ import { TodoItem } from '../model/todo-item'; styleUrls: ['./todo-list.component.scss'] }) export class TodoListComponent implements OnInit { + array = []; @Input() list: any[]; + @Input() lsList: any[]; @Output() itemRemoved = new EventEmitter(); @Output() itemStateChanged = new EventEmitter(); + @Output() lsItemRemoved = new EventEmitter(); constructor() { } ngOnInit() { @@ -18,6 +21,10 @@ export class TodoListComponent implements OnInit { this.itemRemoved.emit(id); } + lsRemoveItem(id){ + this.lsItemRemoved.emit(id); + } + completeTask(item:TodoItem) { this.itemStateChanged.emit(item); diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts index 95758e3..a2c7870 100644 --- a/src/app/todo.service.ts +++ b/src/app/todo.service.ts @@ -15,18 +15,19 @@ export class TodoService { const id = this.lastItemId; task.id = id; - /* this.list.push(task); - */ - - this.lastItemId += 10; + this.setItem(task.id,JSON.stringify(task)); + console.log(localStorage); + this.lastItemId += 1; } remove(id) { const index = this.list.findIndex((element) => element.id === id); this.list.splice(index, 1); } - + lsRemove(id){ + this.storage.removeItem(id); + } incompletedSize() { return this.list.filter(item => !item.isCompleted).length; @@ -41,4 +42,7 @@ export class TodoService { setItem(key:string, value:string){ this.storage.setItem(key,value); } + getAll(){ + return this.storage.getLocalStorage(); + } } From f74700ada6b27f3d6c54cfb31aa636a32c8a5de3 Mon Sep 17 00:00:00 2001 From: pablo-nardi Date: Wed, 9 Jun 2021 19:55:55 -0300 Subject: [PATCH 3/4] Finalizacion de ejercicio con localStorage --- src/app/local-storage.service.ts | 4 +-- src/app/stats/stats.component.ts | 2 +- src/app/todo-app/todo-app.component.html | 8 ++---- src/app/todo-app/todo-app.component.ts | 13 +++------ .../todo-footer/todo-footer.component.html | 4 +-- src/app/todo-footer/todo-footer.component.ts | 14 ++++++---- src/app/todo-list/todo-list.component.html | 18 ++---------- src/app/todo-list/todo-list.component.ts | 13 ++------- src/app/todo.service.ts | 28 ++++++++----------- 9 files changed, 36 insertions(+), 68 deletions(-) diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts index 0976058..8245260 100644 --- a/src/app/local-storage.service.ts +++ b/src/app/local-storage.service.ts @@ -24,7 +24,7 @@ export class LocalStorageService { clear(){ localStorage.clear(); } - getLocalStorage(){ + getLocalStorage(){ //esta bien este metodo?? if (localStorage.length === 0){ console.log("local storage esta vacio"); @@ -36,7 +36,7 @@ export class LocalStorageService { console.log(this.lsArray[i]); } } - return this.lsArray; + return this.lsArray; } } diff --git a/src/app/stats/stats.component.ts b/src/app/stats/stats.component.ts index 1ec80aa..0406f45 100644 --- a/src/app/stats/stats.component.ts +++ b/src/app/stats/stats.component.ts @@ -15,6 +15,6 @@ export class StatsComponent implements OnInit { ngOnInit(): void { } completedPercentage() { - return Math.round(this.service.completedSize() / this.service.list.length * 100) || 0 + return Math.round(this.service.lsCompletedSize() / this.service.getAll().length * 100) || 0 } } diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html index 8e64302..557c1ba 100644 --- a/src/app/todo-app/todo-app.component.html +++ b/src/app/todo-app/todo-app.component.html @@ -1,14 +1,10 @@ - + diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts index 1c7f3f6..17f49c2 100644 --- a/src/app/todo-app/todo-app.component.ts +++ b/src/app/todo-app/todo-app.component.ts @@ -14,22 +14,17 @@ export class TodoAppComponent { private service: TodoService ) {} - getList() { - return this.service.list; - } getLocalStorageList(){ return this.service.getAll(); } - onTodoItemRemoved(id) { - this.service.remove(id); - } lsOnTodoItemRemoved(id) { this.service.lsRemove(id); } - onItemStateChanged(item: TodoItem) { - item.toggleCompleted(); + lsOnItemStateChanged(task: TodoItem){ + task.isCompleted = !task.isCompleted; + this.service.lsOnItemStateChanged(task); } onTodoItemCreated(task) { - this.service.add(task) + this.service.add(task); } } diff --git a/src/app/todo-footer/todo-footer.component.html b/src/app/todo-footer/todo-footer.component.html index a0f7423..ed01bb4 100644 --- a/src/app/todo-footer/todo-footer.component.html +++ b/src/app/todo-footer/todo-footer.component.html @@ -1,2 +1,2 @@ -

Tasks Completed {{completedSize()}}

-

Tasks To do {{incompletedSize()}}

+

Tasks Completed localStorage --> {{lsCompletedSize()}}

+

Tasks To do localStorage --> {{lsIncompletedSize()}}

\ No newline at end of file diff --git a/src/app/todo-footer/todo-footer.component.ts b/src/app/todo-footer/todo-footer.component.ts index d92b916..fc16b22 100644 --- a/src/app/todo-footer/todo-footer.component.ts +++ b/src/app/todo-footer/todo-footer.component.ts @@ -18,14 +18,16 @@ export class TodoFooterComponent implements OnInit { ngOnInit() { } - incompletedSize() { - this.countTodo = this.service.incompletedSize() - return this.countTodo; + lsIncompletedSize(){ + let inc = this.service.lsIncompletedSize() + return inc; } - completedSize() { - this.countCompleted =this.service.completedSize() - return this.countCompleted; + lsCompletedSize(){ + let inc = this.service.lsCompletedSize() + return inc; } + + setItem(key:string, value:string){ this.service.setItem(key,value); } diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html index 095c48b..e910ed6 100644 --- a/src/app/todo-list/todo-list.component.html +++ b/src/app/todo-list/todo-list.component.html @@ -1,18 +1,4 @@ -

LISTA EN MEMORIA

-
    -
  • - {{task.description}} - - - - -
    • -
-
-
-

LISTA EN localStorage

+

LISTA EN localStorage

  • LISTA EN localStorage {{task.description}} - +
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts index c9a766c..829140f 100644 --- a/src/app/todo-list/todo-list.component.ts +++ b/src/app/todo-list/todo-list.component.ts @@ -8,26 +8,19 @@ import { TodoItem } from '../model/todo-item'; }) export class TodoListComponent implements OnInit { array = []; - @Input() list: any[]; @Input() lsList: any[]; - @Output() itemRemoved = new EventEmitter(); - @Output() itemStateChanged = new EventEmitter(); @Output() lsItemRemoved = new EventEmitter(); + @Output() lsItemChanged = new EventEmitter(); constructor() { } ngOnInit() { } - removeItem(id) { - this.itemRemoved.emit(id); - } lsRemoveItem(id){ this.lsItemRemoved.emit(id); } - - completeTask(item:TodoItem) { - this.itemStateChanged.emit(item); - + lsCompleteTask(task: TodoItem){ + this.lsItemChanged.emit(task); } } \ No newline at end of file diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts index a2c7870..b2f38d4 100644 --- a/src/app/todo.service.ts +++ b/src/app/todo.service.ts @@ -6,43 +6,39 @@ import { LocalStorageService } from './local-storage.service'; }) export class TodoService { - list = []; lastItemId = 0; constructor(private storage: LocalStorageService) { } add(task) { const id = this.lastItemId; - task.id = id; - this.list.push(task); + + //CARGO localStorage this.setItem(task.id,JSON.stringify(task)); - console.log(localStorage); + this.lastItemId += 1; } - remove(id) { - const index = this.list.findIndex((element) => element.id === id); - this.list.splice(index, 1); - } lsRemove(id){ this.storage.removeItem(id); } - incompletedSize() { - return this.list.filter(item => !item.isCompleted).length; - + + lsIncompletedSize(){ + return this.getAll().filter(task => !task.isCompleted).length; } - completedSize() { - return this.list.filter(item => item.isCompleted).length ; + lsCompletedSize(){ + return this.getAll().filter(task => task.isCompleted).length; } - getName() { - return 'TodoService 123' + this.storage.getName(); - } setItem(key:string, value:string){ this.storage.setItem(key,value); } getAll(){ return this.storage.getLocalStorage(); } + lsOnItemStateChanged(task){ + this.setItem(task.id,JSON.stringify(task)); + + } } From 10d3a32618c51d754f890e142c7bfa5f587aadf7 Mon Sep 17 00:00:00 2001 From: pablo-nardi Date: Sat, 12 Jun 2021 10:08:54 -0300 Subject: [PATCH 4/4] cleaning code --- src/app/todo-list/todo-list.component.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts index 829140f..d51828b 100644 --- a/src/app/todo-list/todo-list.component.ts +++ b/src/app/todo-list/todo-list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core'; import { TodoItem } from '../model/todo-item'; @Component({ @@ -6,15 +6,11 @@ import { TodoItem } from '../model/todo-item'; templateUrl: './todo-list.component.html', styleUrls: ['./todo-list.component.scss'] }) -export class TodoListComponent implements OnInit { +export class TodoListComponent{ array = []; @Input() lsList: any[]; @Output() lsItemRemoved = new EventEmitter(); @Output() lsItemChanged = new EventEmitter(); - constructor() { } - - ngOnInit() { - } lsRemoveItem(id){ this.lsItemRemoved.emit(id);