diff --git a/src/app/app.component.html b/src/app/app.component.html
index 01c82a6..c34ed49 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -4,4 +4,3 @@
-
diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts
index 204c7fc..192efbb 100644
--- a/src/app/local-storage.service.ts
+++ b/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();
}
}
diff --git a/src/app/stats/stats.component.html b/src/app/stats/stats.component.html
index b599e29..3197632 100644
--- a/src/app/stats/stats.component.html
+++ b/src/app/stats/stats.component.html
@@ -1,6 +1,11 @@
-{{completedPercentage()}} %
+ *ngIf="notEmptyListCheck()"
+ class="progressbar"
+ [ngStyle]="{width: completedPercentage() + '%'}">
+ {{completedPercentage()}}%
+
+
+ Add tasks to the list to enable statistic information...
diff --git a/src/app/stats/stats.component.ts b/src/app/stats/stats.component.ts
index 1ec80aa..4889913 100644
--- a/src/app/stats/stats.component.ts
+++ b/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;
}
}
diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html
index 786cc57..98a7f71 100644
--- a/src/app/todo-app/todo-app.component.html
+++ b/src/app/todo-app/todo-app.component.html
@@ -2,11 +2,7 @@
+ (itemStateChanged)="onItemStateChanged($event)">
-
-
-
\ No newline at end of file
+
+
diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts
index cc42271..8194b82 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/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)
}
}
diff --git a/src/app/todo-footer/todo-footer.component.html b/src/app/todo-footer/todo-footer.component.html
index a0f7423..1a636e3 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 To do {{uncompletedSize()}}
diff --git a/src/app/todo-footer/todo-footer.component.ts b/src/app/todo-footer/todo-footer.component.ts
index 6e1af04..2043277 100644
--- a/src/app/todo-footer/todo-footer.component.ts
+++ b/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() {
diff --git a/src/app/todo-form/todo-form.component.html b/src/app/todo-form/todo-form.component.html
index ec0ad47..f7f3144 100644
--- a/src/app/todo-form/todo-form.component.html
+++ b/src/app/todo-form/todo-form.component.html
@@ -1,10 +1,16 @@
-
-
+
-
+
diff --git a/src/app/todo-form/todo-form.component.scss b/src/app/todo-form/todo-form.component.scss
index 213bb36..7863ba4 100644
--- a/src/app/todo-form/todo-form.component.scss
+++ b/src/app/todo-form/todo-form.component.scss
@@ -1,3 +1,7 @@
.add-todo {
- width: 80%
+ width: 70%
}
+
+input {
+ margin-right: 0.5rem;
+}
\ No newline at end of file
diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts
index 3366020..49e0fdb 100644
--- a/src/app/todo-form/todo-form.component.ts
+++ b/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();
+ }
+}
diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html
index 127ec76..8d0e135 100644
--- a/src/app/todo-list/todo-list.component.html
+++ b/src/app/todo-list/todo-list.component.html
@@ -1,10 +1,11 @@
-
{{task.description}}
-
+
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts
index fc5d8f0..94b98e0 100644
--- a/src/app/todo-list/todo-list.component.ts
+++ b/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();
@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);
-
}
-
-}
\ No newline at end of file
+}
diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
index 9bba8cc..91fd5c4 100644
--- a/src/app/todo.service.ts
+++ b/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;
}
}