Complete CRUD functionality for lists and tasks

monikaja · Dec 28, 2017 · bd15bd7 · bd15bd7
1 parent 27040a5
commit bd15bd7
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 61 deletions.
diff --git a/src/pages/add-task-modal/add-task-modal.html b/src/pages/add-task-modal/add-task-modal.html
@@ -20,22 +20,23 @@
 
 <ion-content>
   <ion-list no-lines>
-    <form class="container"></form>
-    <ion-item>
-      <ion-input placeholder="Task description" name="description" clearInput [(ngModel)]="model.description" required #description="ngModel"></ion-input>
-    </ion-item>
-
-    <ion-item color="danger" [hidden]="description.valid || description.untouched">
-      Description is required
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Is important</ion-label>
-      <ion-checkbox color="dark" [(ngModel)]="model.isDone" name="isDone"></ion-checkbox>
-    </ion-item>
-
-    <div class="save-button">
-      <button ion-button block type="button" (click)="save(model)" [disabled]="!description.valid">{{buttonText}}</button>
-    </div>
+    <form class="container">
+      <ion-item>
+        <ion-input placeholder="Task description" name="description" clearInput [(ngModel)]="model.description" required #description="ngModel"></ion-input>
+      </ion-item>
+
+      <ion-item color="danger" [hidden]="description.valid || description.untouched">
+        Description is required
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Is important</ion-label>
+        <ion-checkbox color="dark" [(ngModel)]="model.isDone" name="isDone"></ion-checkbox>
+      </ion-item>
+
+      <div class="save-button">
+        <button ion-button block type="button" (click)="save(model)" [disabled]="!description.valid">{{buttonText}}</button>
+      </div>
+    </form>
   </ion-list>
 </ion-content>
diff --git 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
@@ -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,24 +88,36 @@ export class ListServiceProvider {
 
   private postNewListToServer(name):Observable<ListModel>{
     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;
   }
 
   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
@@ -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<TodoModel>{
+    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<TodoModel>{
+    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<TodoModel>{
+    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;
   }
+
 }