selectCompleted function

db.json

@@ -1,10 +1,16 @@
 {
   "tasks": [
     {
-      "title": "ty po sa milktea hahaha",
+      "title": "coffee",
       "completed": false,
       "editing": false,
       "id": 2
+    },
+    {
+      "title": "sleep",
+      "completed": false,
+      "editing": false,
+      "id": 3
     }
   ]
 }

src/app/Todo-List-App/containers/TodoList/todo-list.component.html

@@ -4,7 +4,7 @@
         <div class="header">
             <h1>TODO LIST <i class="fa fa-pencil"></i></h1>
         </div>
-        <div class="info selectall"><label class="checkbox-inline"><input type="checkbox" (change)="selectAll()">Select All</label></div>
+        <div class="info selectall"><label class="checkbox-inline"><input type="checkbox" (change)="selectAll($event)">Select All</label></div>
         <div class="inputDiv">
             <input type="text" class="form-control addInput" placeholder="Things you want to do today?" [(ngModel)]="taskTitle" (keyup.enter) = "addTask()">
         </div>
@@ -12,7 +12,7 @@
             
             <ul>
                 <li *ngFor= "let task of tasks" @fade>
-                    <input type="checkbox" [(ngModel)]="task.completed">
+                    <input type="checkbox" [(ngModel)]="task.completed" >
 
                     <!-- input to focus -->
                     <div *ngIf="!task.editing; else editingTask" (dblclick) = "toggleEdit(task)" [ngClass]="{completed: task.completed}">{{task.title}}</div>
@@ -29,7 +29,7 @@
                     </ng-template>
                 
                     <div>
-                        <button class="btn btn-danger listBtn" (click)="deleteTask(task)"><i   class="fa fa-trash"> </i> Del</button>
+                        <button class="btn btn-danger listBtn" (click)="deleteTask(task.id)"><i   class="fa fa-trash"> </i> Del</button>
                     </div>
                 </li>
             </ul>
@@ -43,10 +43,9 @@
                 <div>{{ remaining()}} uncompleted tasks</div>
             </div>
             <div *ngIf="atleastOneCompleted()">
-                <button class="btn btn-warning btn-block" (click) ="clearCompleted(tasks)">Clear Completed</button> 
+                <button class="btn btn-warning btn-block" (click) ="deleteAllTask()">Clear Completed</button> 
                 <div class="alert alert-warning">You've selected an item</div>
             </div>
-            
         </div>
     </div>
 </div>

src/app/Todo-List-App/containers/TodoList/todo-list.component.ts

@@ -29,6 +29,7 @@ export class TodoList{
     tasks:Tasks[] = [];
     beforeEditing: string;
     today: number = Date.now();
+    completed: Tasks[] = [];
 
     
     constructor(private todoService: TodoService){
@@ -45,7 +46,6 @@ export class TodoList{
     }
 
     addTask(){
-        //restricting empty string
         if(this.taskTitle.trim().length === 0){
             return;
         }
@@ -66,8 +66,6 @@ export class TodoList{
             editing: false
         })
         this.taskTitle ='';
-        
-        // this.taskId++;
     }
 
     toggleEdit(event: Tasks){
@@ -87,9 +85,6 @@ export class TodoList{
                   }));
     }
 
-    console(){
-        console.log("try function");
-    }
 
     doneEditing(task: Tasks):void{
         if(task.title.trim().length === 0){
@@ -110,28 +105,41 @@ export class TodoList{
     atleastOneCompleted(): boolean{
         return this.tasks.filter(task => task.completed).length > 0;
     }
+    
     //delete function
-    deleteTask(tasks: Tasks){
+    deleteTask(taskId){
-        this.tasks = this.tasks.filter(task => task.id !== tasks.id);
+        this.tasks = this.tasks.filter(task => task.id !== taskId);
 
-        this.todoService.deleteTask(tasks)
+        this.todoService.deleteTask(taskId)
             .subscribe(data => this.tasks.filter(task => {
-                return task.id !== data;
+                return task !== data;
             }))
+
+            
+    }
+
+    deleteAllTask(){
+        const selectedProducts = this.tasks.filter(product => product.completed).map(p => p.id);
+            console.log (selectedProducts);
+            
+            selectedProducts.forEach(value => {
+                this.todoService.deleteTask(value)
+                    .subscribe(res => {
+                        this.tasks = this.tasks.filter(task => !task.completed);
+                        });
+            });
+
+            // if(selectedProducts && selectedProducts.length === 1) {
+                
+            // }
+            // else{
+                // this.todoService.deleteAllTask(selectedProducts)
+                // .subscribe(data => console.log("more than 1 elements"));
+            // }
     }
 
 
-    clearCompleted(tasks: Tasks){
+    selectAll(event):void{
-        // this.tasks = this.tasks.filter(task => !task.completed);
+            this.tasks.forEach(x => x.completed = event.target.checked)
-
-        // this.todoService.deleteAllTask(tasks)
-        //     .subscribe(data => this.tasks.filter(task => {
-        //         return task.completed !== data;
-        //     }))
-    }
-
-    selectAll():void{
-        this.tasks.forEach(task => task.completed = 
-            (<HTMLInputElement>event.target).checked);
     }
 }

src/app/Todo-List-App/services/todo.service.ts

@@ -26,12 +26,17 @@ export class TodoService{
             .pipe(map((response: any) => response.json()));
     }
 
-    deleteTask(task: Tasks){
+    deleteTask(id:number){
-        return this.http.delete(URL + '/' + task.id);
+        return this.http.delete(URL + '/' + id);
     }
 
-    deleteAllTask(task: Tasks){
+    deleteAllTask(id: number[]){
-        return this.http.delete(URL + '/' + task.id);
+        return this.http.delete<Tasks[]>(URL + '/' + id);
+                    
+        
+                    // .pipe(map((res:any) => {
+                    //     res.json();  
+                    // }))
     }