From 95934a733dc330030e9910bcefe11f6a00f260d5 Mon Sep 17 00:00:00 2001 From: imelilabourne Date: Mon, 21 Sep 2020 15:55:28 +0800 Subject: [PATCH] deleteCompletedTasks Functionality (#4) --- db.json | 14 ++--- .../TodoList/todo-list.component.html | 2 +- .../TodoList/todo-list.component.ts | 52 ++++++++----------- .../Todo-List-App/services/todo.service.ts | 14 ++--- 4 files changed, 36 insertions(+), 46 deletions(-) diff --git a/db.json b/db.json index 7cdfca1..60c051e 100644 --- a/db.json +++ b/db.json @@ -1,16 +1,16 @@ { "tasks": [ { - "title": "coffee", + "title": "123", + "completed": false, + "editing": false, + "id": 1 + }, + { + "title": "2dasd", "completed": false, "editing": false, "id": 2 - }, - { - "title": "sleep", - "completed": false, - "editing": false, - "id": 3 } ] } \ No newline at end of file diff --git a/src/app/Todo-List-App/containers/TodoList/todo-list.component.html b/src/app/Todo-List-App/containers/TodoList/todo-list.component.html index b8791d1..ab40660 100644 --- a/src/app/Todo-List-App/containers/TodoList/todo-list.component.html +++ b/src/app/Todo-List-App/containers/TodoList/todo-list.component.html @@ -43,7 +43,7 @@
{{ remaining()}} uncompleted tasks
- +
You've selected an item
diff --git a/src/app/Todo-List-App/containers/TodoList/todo-list.component.ts b/src/app/Todo-List-App/containers/TodoList/todo-list.component.ts index 68b0df4..d403680 100644 --- a/src/app/Todo-List-App/containers/TodoList/todo-list.component.ts +++ b/src/app/Todo-List-App/containers/TodoList/todo-list.component.ts @@ -1,5 +1,6 @@ import { animate, style, transition, trigger } from '@angular/animations'; import { Component } from '@angular/core'; +import { takeLast } from 'rxjs/operators'; import { Tasks } from 'src/app/Todo-List-App/models/todo-interface'; import { TodoService } from '../../services/todo.service'; @@ -10,14 +11,14 @@ import { TodoService } from '../../services/todo.service'; styleUrls: ['todo-list.component.css'], animations: [ trigger('fade', [ - transition(':enter', [ - style({opacity: 0, transform: 'translateX(-40px)'}), - animate(500, style({opacity:1, transform: 'translateY(0px)'})) - ]), - transition(':leave', [ - style({opacity: 0, transform: 'translateX(0px)'}), - animate(1000, style({opacity:1, transform: 'translateX(-50px)'})) - ]) + // transition(':enter', [ + // style({opacity: 0, transform: 'translateX(-30px)'}), + // animate(500, style({opacity:0, transform: 'translateY(0px)'})) + // ]), + // transition(':leave', [ + // style({opacity: 0, transform: 'translateX(0px)'}), + // animate(500, style({opacity:0, transform: 'translateX(-30px)'})) + // ]) ]) ] }) @@ -29,7 +30,6 @@ export class TodoList{ tasks:Tasks[] = []; beforeEditing: string; today: number = Date.now(); - completed: Tasks[] = []; constructor(private todoService: TodoService){ @@ -44,11 +44,9 @@ export class TodoList{ .getTodo() .subscribe(data => this.tasks = data); } - + addTask(){ - if(this.taskTitle.trim().length === 0){ - return; - } + if(this.taskTitle.trim().length === 0)return; this.todoService.addTask({id:this.taskId, title: this.taskTitle, @@ -56,16 +54,15 @@ export class TodoList{ editing: false}) .subscribe((data: Tasks) => { console.log(data); + }); + this.tasks.push({ + id:this.taskId, + title: this.taskTitle, + completed: false, + editing: false }) - - //display - this.tasks.push({ - id:this.taskId, - title: this.taskTitle, - completed: false, - editing: false - }) - this.taskTitle =''; + this.taskTitle =''; + this.ngOnInit(); } toggleEdit(event: Tasks){ @@ -77,7 +74,6 @@ export class TodoList{ event.editing = !event.editing; this.todoService.editTodo(event) .subscribe(data => this.tasks = this.tasks.map((task: Tasks )=>{ - if (task.title === event.title){ task = Object.assign({}, task, event); } @@ -114,15 +110,13 @@ export class TodoList{ .subscribe(data => this.tasks.filter(task => { return task !== data; })) - - } - deleteAllTask(){ - const selectedProducts = this.tasks.filter(product => product.completed).map(p => p.id); - console.log (selectedProducts); + deleteCompletedTask(){ + const selectedItems = this.tasks.filter(item => item.completed).map(i => i.id); + console.log (selectedItems); - selectedProducts.forEach(value => { + selectedItems.forEach(value => { this.todoService.deleteTask(value) .subscribe(res => { this.tasks = this.tasks.filter(task => !task.completed); diff --git a/src/app/Todo-List-App/services/todo.service.ts b/src/app/Todo-List-App/services/todo.service.ts index a6b82f5..e7cb55a 100644 --- a/src/app/Todo-List-App/services/todo.service.ts +++ b/src/app/Todo-List-App/services/todo.service.ts @@ -1,4 +1,4 @@ -import { HttpClient, HttpHeaders} from "@angular/common/http"; +import { HttpClient, HttpHeaders, HttpResponse} from "@angular/common/http"; import { Injectable } from "@angular/core"; import { Observable } from "rxjs"; import { Tasks } from "../models/todo-interface"; @@ -23,20 +23,16 @@ export class TodoService{ editTodo(task: Tasks):Observable{ return this.http .put(URL + '/' + task.id, task) - .pipe(map((response: any) => response.json())); + .pipe(map((response: any) => response)); } deleteTask(id:number){ return this.http.delete(URL + '/' + id); } - deleteAllTask(id: number[]){ - return this.http.delete(URL + '/' + id); - - - // .pipe(map((res:any) => { - // res.json(); - // })) + deleteCompletedTask(id: number[]){ + return this.http.delete(URL + '/' + id) + .pipe(map((res:any) => res.json())); }