From bd15bd70968d91ba6cccc57359c2d44e99a57cc0 Mon Sep 17 00:00:00 2001 From: Monica Gonzalez Garcia Date: Thu, 28 Dec 2017 16:36:52 +0100 Subject: [PATCH] Complete CRUD functionality for lists and tasks --- src/pages/add-task-modal/add-task-modal.html | 35 +++--- src/pages/todos/todos.ts | 31 ++++- src/providers/list-service/list-service.ts | 27 +++-- src/providers/todo-service/todo-service.ts | 120 ++++++++++++++----- 4 files changed, 152 insertions(+), 61 deletions(-) diff --git a/src/pages/add-task-modal/add-task-modal.html b/src/pages/add-task-modal/add-task-modal.html index 856f728..02fb742 100644 --- a/src/pages/add-task-modal/add-task-modal.html +++ b/src/pages/add-task-modal/add-task-modal.html @@ -20,22 +20,23 @@ -
- - - - - - Description is required - - - - Is important - - - -
- -
+
+ + + + + + Description is required + + + + Is important + + + +
+ +
+
diff --git a/src/pages/todos/todos.ts b/src/pages/todos/todos.ts index 04aa039..2da6803 100644 --- a/src/pages/todos/todos.ts +++ b/src/pages/todos/todos.ts @@ -1,8 +1,9 @@ import { Component } from '@angular/core'; -import { IonicPage, ModalController, NavController, NavParams } from 'ionic-angular'; +import { IonicPage, ModalController, NavController, NavParams, LoadingController } from 'ionic-angular'; import { AddTaskModalPage } from "../add-task-modal/add-task-modal"; import { TodoServiceProvider } from "../../providers/todo-service/todo-service"; import { ListModel} from "../../data/list-model"; +import {TodoModel} from "../../data/todo-model"; /** * Generated class for the TodosPage page. @@ -20,10 +21,11 @@ export class TodosPage { private list:ListModel; - constructor(public navCtrl: NavController, - public navParams: NavParams, + constructor(public navCtrl : NavController, + public navParams : NavParams, private modalCtrl : ModalController, - public todoService: TodoServiceProvider) { + public todoService : TodoServiceProvider, + private loadingCtrl : LoadingController) { this.list = this.navParams.get('list'); this.todoService.loadFromList(this.list.id); } @@ -32,25 +34,42 @@ export class TodosPage { this.todoService.saveStorage(this.list.id); } + addTodo(todo:TodoModel){ + let loader = this.loadingCtrl.create(); + loader.present(); + this.todoService.saveNewItem(todo) + .subscribe(()=>loader.dismiss(), + ()=>loader.dismiss()); + } + addItem():void{ let modal = this.modalCtrl.create(AddTaskModalPage, {listId: this.list.id}); modal.present(); modal.onDidDismiss( data => { if(data) - this.todoService.saveNewItem(data); + this.addTodo(data); }); } + editTodo(todo):void{ let modal = this.modalCtrl.create(AddTaskModalPage, {todo}); modal.present(); modal.onDidDismiss( data => { if(data) - this.todoService.saveEditItem(todo, data); + this.updateTodo(todo, data); }); } + updateTodo(todo:TodoModel, modifiedTodo: TodoModel){ + let loader = this.loadingCtrl.create(); + loader.present(); + this.todoService.saveEditItem(todo, modifiedTodo) + .subscribe(()=> loader.dismiss(), + ()=> loader.dismiss()); + } + removeTodo(item:any):void{ this.todoService.removeTodo(item); } diff --git a/src/providers/list-service/list-service.ts b/src/providers/list-service/list-service.ts index 5f48025..3594e35 100644 --- a/src/providers/list-service/list-service.ts +++ b/src/providers/list-service/list-service.ts @@ -71,7 +71,6 @@ export class ListServiceProvider { private getFromServer(){ this.http.get(AppSettings.API_BASEURL + '/lists', httpOptions) - .map(response => { return JSON.parse(JSON.stringify(response))}) .map((lists:Object[]) => { console.log(lists); return lists.map (item => ListModel.fromJson(item)) @@ -89,13 +88,12 @@ export class ListServiceProvider { private postNewListToServer(name):Observable{ let observable = this.http.post(AppSettings.API_BASEURL+'/lists', {name}, httpOptions) - .share() - .map(response => { return JSON.parse(JSON.stringify(response))}) .map((list) => { return ListModel.fromJson(list) - }); + }) + .share(); - observable.subscribe( ()=> {}, ()=> {}); + observable.subscribe(()=>{}, ()=>{}); return observable; } @@ -103,10 +101,23 @@ export class ListServiceProvider { public removeList(list: ListModel){ this.deleteListFromServer(list.id).subscribe( ()=> { - let index = this.list.indexOf((list)); + let index = this.list.indexOf(list); this.list = [...this.list.slice(0,index), ...this.list.slice(index+1)]; this.saveStorage(); - } - ) + }, + (error => { + console.log("Error removeList "+error); + }) + ); + } + + private deleteListFromServer(id:number){ + + let observable = this.http.delete(AppSettings.API_BASEURL+'/lists/'+id, httpOptions) + .share(); + + observable.subscribe(()=>{}, ()=>{}); + + return observable; } } diff --git a/src/providers/todo-service/todo-service.ts b/src/providers/todo-service/todo-service.ts index 78c2759..2bc5bc6 100644 --- a/src/providers/todo-service/todo-service.ts +++ b/src/providers/todo-service/todo-service.ts @@ -1,9 +1,12 @@ import { Injectable } from '@angular/core'; -// import { Http } from "@angular/http"; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { TodoModel} from "../../data/todo-model"; import { Storage} from "@ionic/storage"; -import { AppSettings} from "../../data/app-settings"; +import { AppSettings } from "../../data/app-settings"; +import { Observable } from "rxjs/Observable"; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/share'; +import {ListModel} from "../../data/list-model"; /* Generated class for the TodoServiceProvider provider. @@ -23,15 +26,14 @@ export class TodoServiceProvider { constructor(public http: HttpClient, public storage:Storage) { } - loadFromList(id:number):void{ - this.getFromStorage(id); - // this.getFromServer(id); + this.getFromStorage(id).then(()=>{ + this.getFromServer(id); + }) } private getFromServer(id){ - return this.http.get(AppSettings.API_BASEURL + '/lists/'+id+'/todos', httpOptions) - .map(response => { return JSON.parse(JSON.stringify(response))}) + this.http.get(AppSettings.API_BASEURL + '/lists/'+id+'/todos', httpOptions) .map((todos:Object[]) => { return todos.map (item => TodoModel.fromJson(item)) }) @@ -49,7 +51,7 @@ export class TodoServiceProvider { private getFromStorage(id:number){ return this.storage.ready().then( () => { - this.storage.get('list/'+id).then( data => { + return this.storage.get('list/'+id).then( data => { if(!data){ this.todos = []; return; @@ -70,36 +72,94 @@ export class TodoServiceProvider { }) } - toogleChecked(item):void{ - let itemIndex = this.todos.indexOf(item); + toogleChecked(todo:TodoModel){ + let updatedTodo = TodoModel.clone(todo); + updatedTodo.isDone = ! todo.isDone; + + return this.saveEditItem(todo, updatedTodo).subscribe(()=>{}, + ()=> { this.loadFromList(todo.listId)});//si hay error deshacemos la operación + } + + removeTodo(todo:TodoModel):void{ + this.deleteTodoFromServer(todo.id).subscribe( + ()=>{ + const index = this.todos.indexOf(todo); + this.todos = [ + ...this.todos.slice(0, index), + ...this.todos.slice(index+1)]; + this.saveStorage(todo.listId); + }, + error => console.log("An error occurred while trying to remove the todo ", todo) + ); + } + + private deleteTodoFromServer(id:number){ + let observable = this.http.delete(`${AppSettings.API_BASEURL}/todos/${id}`); + + return observable; + } - this.todos = [ - ...this.todos.slice(0, itemIndex), - new TodoModel(item.description, item.listId, item.isImportant, !item.isDone, item.id), - ...this.todos.slice(itemIndex+1) - ]; + saveEditItem(item:TodoModel, newItem:TodoModel):Observable{ + let observable = this.postEditTodoToServer(newItem); + + observable.subscribe( (todo:TodoModel)=> { + const index = this.todos.indexOf(item); + this.todos = [ + ...this.todos.slice(0, index), + todo, + ...this.todos.slice(index+1) + ]; + }, error => { + console.log("Error post todo to server", error); + }); + + return observable; } - saveNewItem(item:any):void{ - this.todos = [...this.todos, item]; + saveNewItem(todo:TodoModel){ + let observable = this.postNewTodoToServer(todo); + + observable.subscribe( (todo:TodoModel)=> { + this.todos = [...this.todos, todo]; + this.saveStorage(todo.listId); + }, error => { + console.log("Error post todo to server", error); + }); + + return observable; } - removeTodo(item:any):void{ - const index = this.todos.indexOf(item); - this.todos = [ - ...this.todos.slice(0, index), - ...this.todos.slice(index+1) - ]; + private postNewTodoToServer(todo:TodoModel): Observable{ + let observable = this.http.post(AppSettings.API_BASEURL + '/lists/'+todo.listId+'/todos', + { + description: todo.description, + isImportant: todo.isImportant, + isDone: todo.isDone + }) + .map(todo => TodoModel.fromJson(todo)) + .share(); + + observable.subscribe(()=>{}, ()=>{}); + + return observable; } - saveEditItem(item:any, newItem:any):void{ - const index = this.todos.indexOf(item); - this.todos = [ - ...this.todos.slice(0, index), - newItem, - ...this.todos.slice(index+1) - ]; + private postEditTodoToServer(todo:TodoModel): Observable{ + let observable = this.http.put(AppSettings.API_BASEURL + '/todos/'+todo.id, + { + description: todo.description, + isImportant: todo.isImportant, + isDone: todo.isDone, + listId: todo.listId + }) + .map(todo => TodoModel.fromJson(todo)) + .share(); + + observable.subscribe(()=>{}, ()=>{}); + + return observable; } + }