implemented lodash

Author: sundarcodes

do-it/.angular-cli.json

@@ -21,7 +21,9 @@
       "styles": [
         "styles.css"
       ],
-      "scripts": [],
+      "scripts": [
+        "../node_modules/lodash/lodash.js"
+      ],
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",

do-it/package.json

@@ -29,16 +29,17 @@
     "@angular/cli": "1.0.0-rc.2",
     "@angular/compiler-cli": "^2.4.0",
     "@types/jasmine": "2.5.38",
+    "@types/lodash": "^4.14.64",
     "@types/node": "~6.0.60",
     "codelyzer": "~2.0.0",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",

do-it/src/app/archive/archive.component.html

@@ -6,4 +6,4 @@
         </div>
       </form>
 
-<app-todo-card [todo]="item" *ngFor="let item of todoService.getArchiveList()"></app-todo-card>
+<app-todo-card [todo]="item" *ngFor="let item of archiveList"></app-todo-card>

do-it/src/app/archive/archive.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { TodoService } from '../todo.service';
 
+import {Todo } from '../models/todo';
+
 @Component({
   selector: 'app-archive',
   templateUrl: './archive.component.html',
@@ -10,7 +12,12 @@ export class ArchiveComponent implements OnInit {
 
   constructor(private todoService: TodoService) { }
 
+  archiveList: Todo[];
   ngOnInit() {
+    this.todoService.todoList$
+    .subscribe(list => {
+      this.archiveList = list.filter(todo => todo.isDone);
+    })
   }
 
 }

do-it/src/app/todo-card/todo-card.component.html

@@ -11,8 +11,8 @@
     </span>
   </div>
   <div class="card-action">
-    <a href="#">Trash this</a>
-    <a href="#">Roll this back</a>
+    <a (click)="delete(todo.id)">Trash this</a>
+    <a (click)="revert(todo)">Roll this back</a>
   </div>
 </div>
 

do-it/src/app/todo-card/todo-card.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 
+import { TodoService } from '../todo.service';
 import { Todo } from '../models/todo';
 
 @Component({
@@ -10,9 +11,13 @@ import { Todo } from '../models/todo';
 export class TodoCardComponent implements OnInit {
 
   @Input() todo: Todo;
-  constructor() { }
+  constructor(private todoService: TodoService) { }
 
   ngOnInit() {
   }
 
+  delete(id) {
+    this.todoService.deleteTodo(id);
+  }
+
 }

do-it/src/app/todo.service.ts

@@ -3,10 +3,11 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { Http } from '@angular/http';
 import { Todo } from './models/todo';
 
+declare var _:any;
+
 @Injectable()
 export class TodoService {
 
-  todoList: Todo[] = [];
   baseURL: string = 'https://doit-5db57.firebaseio.com/todo';
 
   private todoListSub: BehaviorSubject<Todo[]>; 
@@ -19,7 +20,7 @@ export class TodoService {
    }
 
    fetchAllTodos() {
-    this.todoList = [];
+    let todoList = [];
     return this.http.get(`${this.baseURL}.json`)
     .subscribe(data => {
       let resp = data.json();
@@ -29,30 +30,12 @@ export class TodoService {
         let todoRspObj = resp[key];
         let todoModel = new Todo(todoRspObj.title, todoRspObj.category, key,
         todoRspObj.isDone, todoRspObj.endDate);
-        this.todoList.push(todoModel);
+        todoList.push(todoModel);
       }
-      this.todoListSub.next(this.todoList);
-      console.log(this.todoList);
+      this.todoListSub.next(todoList);
     });
    }
 
-   getProjectList() {
-     return this.todoList
-     .filter(todo => todo.category === 'project' && !todo.isDone);
-   }
-
-   getPersonalList() {
-     return this.todoList
-     .filter(todo => todo.category === 'personal' && !todo.isDone);
-   }
-
-   getArchiveList() {
-     console.log(this.todoList
-     .filter(todo => todo.isDone));
-     return this.todoList
-     .filter(todo => todo.isDone);
-   }
-
    addTaskToProjects(taskName: string) {
      this.postTask(new Todo(taskName, 'project'));
    }
@@ -64,15 +47,28 @@ export class TodoService {
    postTask(todo: Todo) {
     this.http.post(`${this.baseURL}.json`, todo)
         .subscribe(data => {
-          console.log(data.json());
+          // console.log(data.json());
           todo.id = data.json().name;
-          this.todoList.push(todo);
+          let todoList: Todo[] = this.todoListSub.getValue();
+          todoList.push(todo);
+          this.todoListSub.next(todoList);
         }, err => {
           console.log(err);
         })
 
   }
 
+  deleteTodo(id: string) {
+    this.http.delete(`${this.baseURL}/${id}.json`)
+    .subscribe(res => {
+      console.log(res.json());
+      // Delete the Object
+      let todoList: Todo[] = this.todoListSub.getValue();
+      _.remove(todoList, todo => todo.id === id);
+      this.todoListSub.next(todoList);
+    })
+  } 
+
   markTodoAsDone(todo: Todo) {
     // todo.isDone = true;
     // todo.endDate = Date.now();