services-exercise

src/app/app.component.html

@@ -4,4 +4,3 @@
 <div class="container">
   <app-todo></app-todo>
 </div>
-

src/app/local-storage.service.ts

@@ -5,8 +5,27 @@ import { Injectable } from '@angular/core';
 })
 export class LocalStorageService {
   // https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
+
+  store: Storage = localStorage;
+
   constructor() { }
-  getName() {
-    return 'LocalStorageService'
+
+  listInitialization() {
+    let listDB       = JSON.parse(this.store.getItem('ng-tasks'));
+    let lastItemIdDB = JSON.parse(this.store.getItem('ng-tasks-last-id'));
+    if (listDB === undefined || listDB === null) {
+        listDB = [];
+        lastItemIdDB = 0;
+    }
+    return {list: listDB, lastItemId: lastItemIdDB};
+  }
+
+  listSave(list: any, lastId: number) {
+    this.store.setItem("ng-tasks", JSON.stringify(list));
+    this.store.setItem("ng-tasks-last-id", JSON.stringify(lastId));
+  }
+
+  listClear() {
+    this.store.clear();
   }
 }

src/app/stats/stats.component.html

@@ -1,6 +1,11 @@
 <div
-    class="progressbar"
-    [ngStyle]="{width: completedPercentage() + '%'}"
->
-{{completedPercentage()}} %
+  *ngIf="notEmptyListCheck()"
+  class="progressbar"
+  [ngStyle]="{width: completedPercentage() + '%'}">
+    {{completedPercentage()}}%
+</div>
+<div
+  *ngIf="!notEmptyListCheck()"
+  class="container">
+    Add tasks to the list to enable statistic information...
 </div>

src/app/stats/stats.component.ts

@@ -14,7 +14,12 @@ export class StatsComponent implements OnInit {
 
   ngOnInit(): void {
   }
+
+  notEmptyListCheck() {
+    return (this.service.list.length > 0);
+  }
+
   completedPercentage() {
-    return Math.round(this.service.completedSize() /  this.service.list.length * 100) || 0
+    return Math.round(this.service.completedSize() / this.service.list.length * 100) || 0;
   }
 }

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

@@ -2,11 +2,7 @@
 <app-todo-list
   [list]="getList()"
   (itemRemoved)="onTodoItemRemoved($event)"
-  (itemStateChanged)="onItemStateChanged($event)"
->
+  (itemStateChanged)="onItemStateChanged($event)">
 </app-todo-list>
-<app-todo-footer
-  [list]="getList()"
->
-</app-todo-footer>
-<app-stats></app-stats>
+<app-todo-footer [list]="getList()"></app-todo-footer>
+<app-stats></app-stats>

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

@@ -10,20 +10,26 @@ import { TodoService } from '../todo.service';
 })
 export class TodoAppComponent  {
 
-  constructor(
-    private service: TodoService
-  ) {}
+  constructor(private todoService: TodoService) { }
+
+  ngOnInit() {
+    this.todoService.loadList();
+  }
 
   getList() {
-    return this.service.list;
+    return this.todoService.list;
   }
-  onTodoItemRemoved(id) {
-    this.service.remove(id);
+
+  onTodoItemRemoved(index: number) {
+    this.todoService.removeTask(index);
   }
+
   onItemStateChanged(item: TodoItem) {
-    item.toggleCompleted();
+    item.isCompleted = !item.isCompleted;
+    this.todoService.saveList();
   }
-  onTodoItemCreated(task) {
-    this.service.add(task)
+
+  onTodoItemCreated(task: any) {
+    this.todoService.addTask(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 To do {{uncompletedSize()}} </h2>

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

@@ -18,8 +18,8 @@ export class TodoFooterComponent implements OnInit {
   ngOnInit() {
 
   }
-  incompletedSize() {
-    this.countTodo = this.service.incompletedSize()
+  uncompletedSize() {
+    this.countTodo = this.service.uncompletedSize()
     return this.countTodo;
   }
   completedSize() {

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

@@ -1,10 +1,16 @@
-
-<input type="text" #taskDescription class="add-todo">
+<input type="text" #taskDescription
+  placeholder="Cook some pasta"
+  class="add-todo"
+  (keyup.enter)="save(taskDescription)">
 
 <button
-  class="btn btn-primary"
+  class="btn btn-sm btn-primary"
   (click)="save(taskDescription)">
-  Create
+    Create
 </button>
 
-
+<button
+  class="btn btn-sm btn-danger"
+  (click)="clear()">
+    Clear DB
+</button>

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

@@ -1,3 +1,7 @@
 .add-todo {
-  width: 80%
+  width: 70%
 }
+
+input {
+  margin-right: 0.5rem;
+}

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

@@ -1,5 +1,6 @@
 import { Component, OnInit, Output, EventEmitter} from '@angular/core';
 import { TodoItem } from '../model/todo-item';
+import { TodoService } from '../todo.service';
 
 @Component({
   selector: 'app-todo-form',
@@ -10,7 +11,9 @@ export class TodoFormComponent {
 
   @Output() add = new EventEmitter();
 
-  save(description){
+  constructor(private todoService: TodoService) { }
+
+  save(description) {
     if(!description.value || description.value === '') {
       return;
     }
@@ -20,5 +23,8 @@ export class TodoFormComponent {
     this.add.emit(task);
     description.value = '';
   }
-}
 
+  clear() {
+    this.todoService.clearAll();
+  }
+}

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

@@ -1,10 +1,11 @@
 <ul class="list">
     <li
-      *ngFor="let task of list" [class.completed] = "task.isCompleted"
+      *ngFor="let task of list; let i = index"
+      [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-danger" (click)="removeItem(i)">X</button>
         <button class="btn btn-success" (click)="completeTask(task)">V</button>
       </span>
     </li>

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

@@ -8,19 +8,18 @@ import { TodoItem } from '../model/todo-item';
 })
 export class TodoListComponent implements OnInit {
   @Input() list: any[];
-  @Output() itemRemoved = new EventEmitter();
+  @Output() itemRemoved = new EventEmitter<number>();
   @Output() itemStateChanged = new EventEmitter();
   constructor() { }
 
   ngOnInit() {
   }
-  removeItem(id) {
-    this.itemRemoved.emit(id);
+
+  removeItem(index: number) {
+    this.itemRemoved.emit(index);
   }
 
   completeTask(item:TodoItem) {
     this.itemStateChanged.emit(item);
-
   }
-
-}
+}

src/app/todo.service.ts

@@ -9,29 +9,41 @@ export class TodoService {
   list = [];
   lastItemId = 0;
 
-  constructor(private storage: LocalStorageService) { }
+  constructor(private localStorageService: LocalStorageService) { }
 
-  add(task) {
+  loadList() {
+    const {list, lastItemId} = this.localStorageService.listInitialization();
+    this.list = list;
+    this.lastItemId = lastItemId;
+  }
+
+  saveList() {
+    this.localStorageService.listSave(this.list, this.lastItemId);
+  }
+
+  addTask(task: any) {
     const id = this.lastItemId;
     task.id = id;
     this.list.push(task);
-    this.lastItemId += 10;
+    this.lastItemId += 1;
+    this.saveList();
   }
 
-  remove(id) {
-    const index = this.list.findIndex((element) => element.id === id);
+  removeTask(index: number) {
+    // const index = this.list.findIndex((element) => element.id === id);
     this.list.splice(index, 1);
+    this.saveList();
   }
 
-  incompletedSize() {
-    return this.list.filter(item => !item.isCompleted).length;
-
+  clearAll() {
+    this.localStorageService.listClear();
   }
+
   completedSize() {
-    return  this.list.filter(item => item.isCompleted).length ;
+    return this.list.filter(item => item.isCompleted).length;
   }
 
-  getName() {
-    return 'TodoService 123' + this.storage.getName();
+  uncompletedSize() {
+    return this.list.filter(item => !item.isCompleted).length;
   }
 }