10th-Major-commit: Added Mark as Complete funcitonality to our ToDo A…

…ngular App
SidP919 · Dec 26, 2021 · bc55d60 · bc55d60
1 parent 1843d72
commit bc55d60
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 4 deletions.
diff --git a/Angular/to_do_list/src/app/subComponents/to-do-item/to-do-item.component.html b/Angular/to_do_list/src/app/subComponents/to-do-item/to-do-item.component.html
@@ -2,7 +2,9 @@
     <h4 class="d-inline-block form-control-sm">{{toDoItem.srNo}}-&nbsp;<u>{{toDoItem.title}}</u></h4>
     <p class="form-control-sm d-block">{{toDoItem.desc.substring(0,48)}}...</p>
     <div class="mb-1 d-block">
-        <img src="./../../../assets/images/tick_symbol.png" class="mx-2 my-1 d-inline-block" alt="Completed" />
-        <img src="./../../../assets/images/delete-item-icon-png.png" (click)="onDelete(toDoItem)" class="mx-2 ml-1 my-1 d-inline-block" alt="Delete" />
+        <div *ngIf="this.toDoItem.active;" class="mx-2 my-1 d-inline-block">
+            <img src="./../../../assets/images/tick_symbol.png" alt="Completed" data-toggle="tooltip" title="Mark as Completed" (click)="onComplete(toDoItem)"/>
+        </div>
+        <img src="./../../../assets/images/delete-item-icon-png.png" (click)="onDelete(toDoItem)" class="mx-2 ml-1 my-1 d-inline-block" alt="Delete" data-toggle="tooltip" title="Delete Task" />
     </div>
 </div>
diff --git a/Angular/to_do_list/src/app/subComponents/to-do-item/to-do-item.component.ts b/Angular/to_do_list/src/app/subComponents/to-do-item/to-do-item.component.ts
@@ -14,6 +14,10 @@ export class ToDoItemComponent implements OnInit {
   @Output()
   todoDeleteEmitter: EventEmitter<Todo> = new EventEmitter();
 
+  //Create EventEmitter todoCompletedEmitter to emit objects of type Todo:
+  @Output()
+  todoCompletedEmitter: EventEmitter<Todo> = new EventEmitter();
+
   constructor() { }
 
   ngOnInit(): void {
@@ -28,4 +32,10 @@ export class ToDoItemComponent implements OnInit {
 
   }
 
+  //Emit toDoItem to to-do-list component to mark it as completed:
+  onComplete(toDoItem:Todo){
+    console.log("Mark as Completed is clicked.");
+    this.todoCompletedEmitter.emit(toDoItem);
+  }
+
 }
diff --git a/Angular/to_do_list/src/app/subComponents/to-do-list/to-do-list.component.html b/Angular/to_do_list/src/app/subComponents/to-do-list/to-do-list.component.html
@@ -13,11 +13,23 @@ <h5 class="text-start text-primary ms-3">No Tasks to display.</h5>
     <div class="container">
         <div class="row">
             <div *ngFor="let todo of todosArr" class="col-lg-3 col-md-4 col-sm-4 col-6 mb-2 todo-size">
-                <app-to-do-item [toDoItem] = "todo" (todoDeleteEmitter)="deleteTodo($event)"></app-to-do-item>
+                <app-to-do-item [toDoItem] = "todo" (todoDeleteEmitter)="deleteTodo($event)" (todoCompletedEmitter)="markAsCompleted($event)"></app-to-do-item>
             </div>
         </div>
     </div>
 </ng-template>
+<div *ngIf="this.todosCompleted.length!==0;">
+    <div class="my-2">
+        <h3 class="text-primary text-start"><u>Completed Tasks:</u></h3>
+    </div>
+    <div class="container">
+        <div class="row">
+            <div *ngFor="let todo of todosCompleted" class="col-lg-3 col-md-4 col-sm-4 col-6 mb-2 todo-size">
+                <app-to-do-item [toDoItem] = "todo" (todoDeleteEmitter)="deleteTodoC($event)"></app-to-do-item>
+            </div>
+        </div>
+    </div>
+</div>
 <br>
 <br>
 <br>
diff --git a/Angular/to_do_list/src/app/subComponents/to-do-list/to-do-list.component.ts b/Angular/to_do_list/src/app/subComponents/to-do-list/to-do-list.component.ts
@@ -9,15 +9,24 @@ import { Todo } from 'src/app/models/Todo';
 export class ToDoListComponent implements OnInit {
 
   localItem:any = "";
+  localItemC:any = "";
   todosArr: Todo[] = [];
+  todosCompleted: Todo[] = [];
   constructor() {
     this.localItem = localStorage.getItem("todosArrString");
     if(this.localItem===null){
       this.todosArr = []
     }else{
-      console.log(this.localItem)
+      console.log("ToDo List: " + this.localItem)
       this.todosArr = JSON.parse(this.localItem);
     }  
+    this.localItemC = localStorage.getItem("todosArrStringC");
+    if(this.localItemC===null){
+      this.todosCompleted = []
+    }else{
+      console.log("Completed ToDo List: " + this.localItemC)
+      this.todosCompleted = JSON.parse(this.localItemC);
+    } 
   }
 
   ngOnInit(): void {
@@ -44,4 +53,22 @@ export class ToDoListComponent implements OnInit {
 
   }
 
+  //Add todo to todosCompleted and delete from todosArr:
+  markAsCompleted(todo:Todo){
+
+    this.deleteTodo(todo);
+    todo.active=false;
+    this.todosCompleted.push(todo);
+    console.log(`ToDoItem: ${todo.title} has been added to Completed TODO list.`);
+    localStorage.setItem("todosArrStringC",JSON.stringify(this.todosCompleted))
+
+  }
+
+  //Delete todo from todosCompleted:
+  deleteTodoC(todo:Todo){
+    this.todosCompleted.splice(this.todosCompleted.indexOf(todo),1);
+    console.log(`ToDoItem: ${todo.title} has been deleted.`)
+    localStorage.setItem("todosArrStringC",JSON.stringify(this.todosCompleted))
+  }
+
 }