selectCompleted function

This commit is contained in:
imelilabourne 2020-09-21 09:09:46 +08:00
parent 8ebdedea6b
commit 7206da41eb
4 changed files with 50 additions and 32 deletions
db.json
src/app/Todo-List-App

View File

@ -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
}
]
}

View File

@ -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>

View File

@ -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){
this.tasks = this.tasks.filter(task => task.id !== tasks.id);
deleteTask(taskId){
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){
// this.tasks = this.tasks.filter(task => !task.completed);
// 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);
selectAll(event):void{
this.tasks.forEach(x => x.completed = event.target.checked)
}
}

View File

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