diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 737845f..2f8aca2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -23,7 +23,7 @@ import { StatsComponent } from './stats/stats.component';
imports: [
BrowserModule,
AppRoutingModule,
- BrowserAnimationsModule
+ BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts
index 204c7fc..b954da2 100644
--- a/src/app/local-storage.service.ts
+++ b/src/app/local-storage.service.ts
@@ -1,12 +1,57 @@
import { Injectable } from '@angular/core';
+import { TodoItem } from './model/todo-item';
@Injectable({
providedIn: 'root'
})
export class LocalStorageService {
// https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
+
+ myStorage = localStorage;
constructor() { }
getName() {
- return 'LocalStorageService'
+ return 'LocalStorageService';
}
+ cargarLocalStorage(){
+ const list = [];
+ Object.values(this.myStorage).forEach(p => {
+ list.push(JSON.parse(p));
+
+ });
+ return list;
+
+ }
+
+ grabarLocalStorage(item: TodoItem){
+ item.id = this.myStorage.length;
+ localStorage.setItem(item.id.toString(), JSON.stringify(item));
+
+ }
+
+ updateLocalStorage(item: TodoItem){
+ this.myStorage.removeItem(item.id.toString());
+ this.myStorage.setItem(item.id.toString(), JSON.stringify(item));
+
+ }
+
+ deleteItem(key){
+ const value = this.myStorage.getItem(key);
+ console.dir(value);
+ if(value !== undefined && value){
+ this.myStorage.removeItem(key);
+ }
+ }
+
+ Save(list: any[]){
+ this.Clean();
+ list.forEach(x => {
+ this.myStorage.setItem(x.id.toString(), JSON.stringify(x));
+
+ });
+ }
+
+ Clean(){
+ this.myStorage.clear();
+ }
+
}
diff --git a/src/app/stats/stats.component.ts b/src/app/stats/stats.component.ts
index 1ec80aa..f4e0454 100644
--- a/src/app/stats/stats.component.ts
+++ b/src/app/stats/stats.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
import { TodoService } from '../todo.service';
@Component({
@@ -8,13 +8,21 @@ import { TodoService } from '../todo.service';
})
export class StatsComponent implements OnInit {
+ @Input() list: any[];
constructor(
private service: TodoService
) { }
ngOnInit(): void {
}
- completedPercentage() {
- return Math.round(this.service.completedSize() / this.service.list.length * 100) || 0
+ completedPercentage() {
+ this.list = this.service.list;
+ if(this.list && this.list !== undefined){
+ const completed = this.list.filter(item => item.isCompleted).length * 100;
+ const percenter = this.list.length;
+ return Math.round(completed / percenter);
+ }
+ return 0;
+
}
}
diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html
index 786cc57..64b4677 100644
--- a/src/app/todo-app/todo-app.component.html
+++ b/src/app/todo-app/todo-app.component.html
@@ -1,12 +1,12 @@
-
+
-
+
+
+
+
+
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/app/todo-app/todo-app.component.scss b/src/app/todo-app/todo-app.component.scss
index e69de29..556e8c5 100644
--- a/src/app/todo-app/todo-app.component.scss
+++ b/src/app/todo-app/todo-app.component.scss
@@ -0,0 +1,3 @@
+.buttons {
+ justify-content: space-between;
+}
\ 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..8f6b977 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/src/app/todo-app/todo-app.component.ts
@@ -1,6 +1,5 @@
import { Component, OnInit } from '@angular/core';
-import {TodoItem} from '../model/todo-item';
-import { element } from 'protractor';
+import { TodoItem } from '../model/todo-item';
import { TodoService } from '../todo.service';
/** */
@Component({
@@ -8,22 +7,50 @@ import { TodoService } from '../todo.service';
templateUrl: './todo-app.component.html',
styleUrls: ['./todo-app.component.scss'],
})
-export class TodoAppComponent {
+export class TodoAppComponent implements OnInit {
+ cant: number = 0;
+ list: any[];
constructor(
private service: TodoService
- ) {}
+ ) { }
+
+ ngOnInit() {
+ this.service.getList();
+
+ }
+
+ getList() {
+ this.list = this.service.list;
+ return this.list;
- getList() {
- return this.service.list;
}
+
onTodoItemRemoved(id) {
- this.service.remove(id);
+ var items = this.list.find(x => x.id === id);
+ this.list.splice(items.id);
+
}
- onItemStateChanged(item: TodoItem) {
- item.toggleCompleted();
+ onItemStateChanged(item: TodoItem) {
+ if (item.isCompleted) {
+ item.isCompleted = false;
+ } else {
+ item.isCompleted = true;
+ }
+
+ }
+ onTodoItemCreated(task: TodoItem) {
+ let lastId = this.list.length;
+ task.id = lastId;
+ this.list.push(task);
+ }
+
+ save() {
+ this.service.save(this.list);
+
}
- onTodoItemCreated(task) {
- this.service.add(task)
+
+ clear() {
+ this.service.clear();
}
}
diff --git a/src/app/todo-footer/todo-footer.component.ts b/src/app/todo-footer/todo-footer.component.ts
index 6e1af04..2065867 100644
--- a/src/app/todo-footer/todo-footer.component.ts
+++ b/src/app/todo-footer/todo-footer.component.ts
@@ -1,30 +1,33 @@
import { Component, OnInit, Input } from '@angular/core';
-import { TodoItem } from '../model/todo-item';
-import { TodoService } from '../todo.service';
+// import { TodoItem } from '../model/todo-item';
+// import { TodoService } from '../todo.service';
@Component({
selector: 'app-todo-footer',
templateUrl: './todo-footer.component.html',
styleUrls: ['./todo-footer.component.scss']
})
-export class TodoFooterComponent implements OnInit {
- countTodo = 0;
- countCompleted = 0;
- @Input() list;
- constructor(
- private service: TodoService
- ) { }
+export class TodoFooterComponent implements OnInit {
+ @Input() list: any = [];
+ constructor( ) { }
ngOnInit() {
}
incompletedSize() {
- this.countTodo = this.service.incompletedSize()
- return this.countTodo;
+ if(this.list && this.list !== undefined){
+ return this.list.filter(item => !item.isCompleted).length;
+ } else {
+ return 0;
+ }
+
}
- completedSize() {
- this.countCompleted =this.service.completedSize()
- return this.countCompleted;
+ completedSize() {
+ if(this.list && this.list !== undefined){
+ return this.list.filter(item => item.isCompleted).length;;
+ }else {
+ return 0;
+ }
}
}
diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts
index 3366020..daadaf0 100644
--- a/src/app/todo-form/todo-form.component.ts
+++ b/src/app/todo-form/todo-form.component.ts
@@ -10,7 +10,7 @@ export class TodoFormComponent {
@Output() add = new EventEmitter();
- save(description){
+ save(description){
if(!description.value || description.value === '') {
return;
}
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts
index fc5d8f0..6e5f220 100644
--- a/src/app/todo-list/todo-list.component.ts
+++ b/src/app/todo-list/todo-list.component.ts
@@ -10,17 +10,18 @@ export class TodoListComponent implements OnInit {
@Input() list: any[];
@Output() itemRemoved = new EventEmitter();
@Output() itemStateChanged = new EventEmitter();
- constructor() { }
+ constructor() {
+ }
- ngOnInit() {
+ ngOnInit() {
}
- removeItem(id) {
+
+ removeItem(id) {
this.itemRemoved.emit(id);
}
- completeTask(item:TodoItem) {
+ 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..1a41086 100644
--- a/src/app/todo.service.ts
+++ b/src/app/todo.service.ts
@@ -1,34 +1,57 @@
import { Injectable } from '@angular/core';
import { LocalStorageService } from './local-storage.service';
+import { TodoItem } from './model/todo-item';
+
@Injectable({
providedIn: 'root'
})
export class TodoService {
-
- list = [];
- lastItemId = 0;
+
+ list: any = [];
constructor(private storage: LocalStorageService) { }
-
- add(task) {
- const id = this.lastItemId;
- task.id = id;
- this.list.push(task);
- this.lastItemId += 10;
+
+ getList(){
+ this.list = this.storage.cargarLocalStorage();
+
+ }
+
+ add(task: TodoItem) {
+ this.storage.grabarLocalStorage(task);
+
}
remove(id) {
- const index = this.list.findIndex((element) => element.id === id);
- this.list.splice(index, 1);
+ this.storage.deleteItem(id);
}
- incompletedSize() {
- return this.list.filter(item => !item.isCompleted).length;
+ save(lstItems: any[]){
+ this.storage.Save(lstItems);
+ }
+ clear(){
+ this.storage.Clean();
+ this.list = [];
}
- completedSize() {
- return this.list.filter(item => item.isCompleted).length ;
+
+ // incompletedSize() {
+ // return this.list.filter(item => !item.isCompleted).length;
+ // // this.items = this.storage.cargarLocalStorage();
+ // // return this.items.filter(item => !item.isCompleted).length;
+
+ // }
+
+ // completedSize() {
+ // return this.list.filter(item => item.isCompleted).length;
+ // // this.items = this.storage.cargarLocalStorage();
+ // // return this.items.filter(item => item.isCompleted).length;
+
+ // }
+
+ update(item: TodoItem){
+ this.storage.updateLocalStorage(item);
+
}
getName() {