Add check list on task

Author: mufasa-dev

src/app/pages/kanban-view/kanban-view.component.html

@@ -21,7 +21,12 @@
                     <fa-icon [icon]="getIconType(task.type)" [ngClass]="'task-icon-' + task.type"></fa-icon>
                     {{task.title}}
                   </b><br />
-                  <span>{{task.description}}</span>
+                  <span class="d-block">{{task.description}}</span>
+                  @if (task.subTasks.length > 0) {
+                    <b class="d-inline text-warning">
+                      <fa-icon [icon]="faPenToSquare" /> {{ getCheckedSubTaksLength(task.subTasks) }} / {{task.subTasks.length}}
+                    </b>
+                  }
                 </div>
               }
             }

src/app/pages/kanban-view/kanban-view.component.ts

@@ -4,12 +4,13 @@ import { Board } from '../../models/board.model';
 import { Column } from '../../models/column.model';
 import { Task } from '../../models/task.model';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faBug, faC, faCalendar, faCoffee, faPencil, faPlus, faSave, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { faBug, faC, faCalendar, faCoffee, faPencil, faPenToSquare, faPlus, faSave, IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { EditBoardComponent } from '../edit-board/edit-board.component';
 import { AddTaskComponent } from "../add-task/add-task.component";
 import { TaskTypeEnum } from '../../models/enum/task.enum';
 import { CommonModule } from '@angular/common';
+import { SubTask } from '../../models/sub-task.model';
 
 @Component({
   selector: 'app-kanban-view',
@@ -31,6 +32,7 @@ export class KanbanViewComponent {
   public faPlus = faPlus;
   public faCalendar = faCalendar;
   public faBug = faBug;
+  public faPenToSquare = faPenToSquare;
 
   public enumTaskType = TaskTypeEnum;
 
@@ -61,4 +63,8 @@ export class KanbanViewComponent {
     return this.tasks.filter(x => x.column == col);
   }
 
+  getCheckedSubTaksLength(tasks: SubTask[]): number {
+    return tasks.filter(x => x.checked == true).length;
+  }
+
 }