Ejercicio de servicios usando localStorage

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": {

src/app/local-storage.service.ts

@@ -5,8 +5,38 @@ import { Injectable } from '@angular/core';
 })
 export class LocalStorageService {
   // https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
+
+  lsArray = [];  //localStorageArray
+
   constructor() { }
   getName() {
     return 'LocalStorageService'
   }
+  setItem(key:string, value:string){
+    localStorage.setItem(key,value);
+  }
+  getItem(key: string){
+    localStorage.getItem(key);
+  }
+  removeItem(key) {
+    localStorage.removeItem(key);
+  }
+  clear(){
+    localStorage.clear(); 
+  }
+  getLocalStorage(){ //esta bien este metodo??
+
+   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; 
+  }
+
 }

src/app/stats/stats.component.html

@@ -3,4 +3,5 @@
     [ngStyle]="{width: completedPercentage() + '%'}"
 >
 {{completedPercentage()}} %
+
 </div>

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

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

@@ -1,12 +1,10 @@
 <app-todo-form (add)="onTodoItemCreated($event)"></app-todo-form>
 <app-todo-list
-  [list]="getList()"
-  (itemRemoved)="onTodoItemRemoved($event)"
-  (itemStateChanged)="onItemStateChanged($event)"
+  [lsList]="getLocalStorageList()"
+  (lsItemRemoved)="lsOnTodoItemRemoved($event)"
+  (lsItemChanged)="lsOnItemStateChanged($event)"
 >
 </app-todo-list>
-<app-todo-footer
-  [list]="getList()"
->
+<app-todo-footer>
 </app-todo-footer>
-<app-stats></app-stats>
+<app-stats></app-stats>

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

@@ -14,16 +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);
   }
 }

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

@@ -1,2 +1,2 @@
-<h2>Tasks Completed {{completedSize()}}</h2>
-<h2>Tasks To do {{incompletedSize()}} </h2>
+<h2>Tasks Completed localStorage --> {{lsCompletedSize()}}</h2>
+<h2>Tasks To do localStorage --> {{lsIncompletedSize()}} </h2>

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

@@ -18,13 +18,18 @@ 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);
   }
 
 }

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

@@ -4,7 +4,7 @@
 <button
   class="btn btn-primary"
   (click)="save(taskDescription)">
-  Create
+  Add
 </button>
 
 

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

@@ -1,11 +1,14 @@
-<ul class="list">
+<h2>LISTA EN localStorage</h2>
+  <ul class="list"> 
     <li
-      *ngFor="let task of list" [class.completed] = "task.isCompleted"
+      *ngFor="let task of lsList" [class.completed] = "task.isCompleted"
       class="list-item">
       {{task.description}}
       <span>
-        <button class="btn btn-danger" (click)="removeItem(task.id)">X</button>
-        <button class="btn btn-success" (click)="completeTask(task)">V</button>
+        <button class="btn btn-danger" (click)="lsRemoveItem(task.id)">X</button>
+        <button class="btn btn-success" (click)="lsCompleteTask(task)">V</button>
       </span>
     </li>
   </ul>
+
+

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

@@ -1,26 +1,22 @@
-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({
   selector: 'app-todo-list',
   templateUrl: './todo-list.component.html',
   styleUrls: ['./todo-list.component.scss']
 })
-export class TodoListComponent implements OnInit {
-  @Input() list: any[];
-  @Output() itemRemoved = new EventEmitter();
-  @Output() itemStateChanged = new EventEmitter();
-  constructor() { }
+export class TodoListComponent{
+  array = [];
+  @Input() lsList: any[];
+  @Output() lsItemRemoved = new EventEmitter();
+  @Output() lsItemChanged = new EventEmitter();
 
-  ngOnInit() {
+  lsRemoveItem(id){
+    this.lsItemRemoved.emit(id);
   }
-  removeItem(id) {
-    this.itemRemoved.emit(id);
-  }
-
-  completeTask(item:TodoItem) {
-    this.itemStateChanged.emit(item);
-
+  lsCompleteTask(task: TodoItem){
+    this.lsItemChanged.emit(task);
   }
 
 }

src/app/todo.service.ts

@@ -6,32 +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);
-    this.lastItemId += 10;
-  }
 
-  remove(id) {
-    const index = this.list.findIndex((element) => element.id === id);
-    this.list.splice(index, 1);
+    //CARGO localStorage
+    this.setItem(task.id,JSON.stringify(task));
+
+    this.lastItemId += 1;
   }
 
-  incompletedSize() {
-    return this.list.filter(item => !item.isCompleted).length;
-
+  lsRemove(id){
+    this.storage.removeItem(id);
+  }
+
+  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));
+
   }
 }