selectCompleted function
This commit is contained in:
parent
8ebdedea6b
commit
7206da41eb
db.json
src/app/Todo-List-App
8
db.json
8
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
|
||||
}
|
||||
]
|
||||
}
|
@ -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>
|
@ -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)
|
||||
}
|
||||
}
|
@ -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();
|
||||
// }))
|
||||
}
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user