<div class="card"> <div class="card-body" cdkDropListGroup> <div class="mb-3"> <button class="btn btn-primary" (click)="openModal(taskModal, null)">Create Task</button> </div> <div class="taskboard page-height p-0"> <div class="taskboard-wrapper todos"> <div class="taskboard-list"> <h6 class="taskboard-header font-weight-bold mt-2">Todos</h6> <div class="taskboard-cards" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="todos"> <div class="taskboard-task cursor-pointer" cdkDrag *ngFor="let todo of todos"> <div class="taskboard-task-title font-medium">{{ todo.title }}</div> <small class="card-text text-muted">{{ todo.desc }}</small> <div class="mt-2 d-flex justify-content-start align-items-center"> <a href="javascript:void(0)" class="link" (click)="openModal(taskModal, todo)"> <i-feather name="eye" class="feather-xs"></i-feather> </a> <a href="javascript:void(0)" class="text-danger ml-2" (click)="deleteTask(todo.id)"> <i-feather name="trash-2" class="feather-xs"></i-feather> </a> </div> </div> </div> </div> </div> <div class="taskboard-wrapper inprocess"> <div class="taskboard-list"> <h6 class="taskboard-header font-weight-bold mt-2">In Process</h6> <div class="taskboard-cards" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="process"> <div class="taskboard-task cursor-pointer" cdkDrag *ngFor="let inprocess of process"> <div class="taskboard-task-title font-medium">{{ inprocess.title }}</div> <small class="card-text text-muted">{{ inprocess.desc }}</small> <div class="mt-2 d-flex justify-content-start align-items-center"> <a href="javascript:void(0)" class="link" (click)="openModal(taskModal, inprocess)"> <i-feather name="eye" class="feather-xs"></i-feather> </a> <a href="javascript:void(0)" class="text-danger ml-2" (click)="deleteTask(inprocess.id)"> <i-feather name="trash-2" class="feather-xs"></i-feather> </a> </div> </div> </div> </div> </div> <div class="taskboard-wrapper pending"> <div class="taskboard-list"> <h6 class="taskboard-header font-weight-bold mt-2">Pending todos</h6> <div class="taskboard-cards" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="pendings"> <div class="taskboard-task cursor-pointer" cdkDrag *ngFor="let pendingtask of pendings"> <div class="taskboard-task-title font-medium">{{ pendingtask.title }}</div> <small class="card-text text-muted">{{ pendingtask.desc }}</small> <div class="mt-2 d-flex justify-content-start align-items-center"> <a href="javascript:void(0)" class="link" (click)="openModal(taskModal, pendingtask)"> <i-feather name="eye" class="feather-xs"></i-feather> </a> <a href="javascript:void(0)" class="text-danger ml-2" (click)="deleteTask(pendingtask.id)"> <i-feather name="trash-2" class="feather-xs"></i-feather> </a> </div> </div> </div> </div> </div> <div class="taskboard-wrapper taskdone"> <div class="taskboard-list"> <h6 class="taskboard-header font-weight-bold mt-2">Task Done</h6> <div class="taskboard-cards" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="done"> <div class="taskboard-task cursor-pointer" cdkDrag *ngFor="let taskdone of done"> <div class="taskboard-task-title font-medium">{{ taskdone.title }}</div> <small class="card-text text-muted">{{ taskdone.desc }}</small> <div class="mt-2 d-flex justify-content-start align-items-center"> <a href="javascript:void(0)" class="link" (click)="openModal(taskModal, taskdone)"> <i-feather name="eye" class="feather-xs"></i-feather> </a> <a href="javascript:void(0)" class="text-danger ml-2" (click)="deleteTask(taskdone.id)"> <i-feather name="trash-2" class="feather-xs"></i-feather> </a> </div> </div> </div> </div> </div> </div> </div> </div> <ng-template #taskModal let-modal> <div class="modal-header"> <h3 class="modal-title font-weight-bold" id="taskLabel">Task</h3> <button type="button" class="close" (click)="closeBtnClick()" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form [formGroup]="task" (ngSubmit)="onSubmit()"> <div class="modal-body"> <div class="form-group row"> <label for="name" class="col-sm-4 col-form-label">Task Title</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="Title" id="title"> </div> </div> <div class="form-group row"> <label for="position" class="col-sm-4 col-form-label">Description</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="Description" id="description"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-dark" (click)="closeBtnClick()">Close</button> <button type="submit" class="btn btn-primary" [disabled]="task.invalid">Save</button> </div> </form> </ng-template>