Working Frontend

src/app/task-holder/task-holder.component.html

@@ -0,0 +1,56 @@
+<div class="card-container">
+  <button class="card card-small"  tabindex="0" routerLink="/add">
+    <mat-icon aria-hidden="false" aria-label="Example home icon">add</mat-icon>
+    <span>Add Task</span>
+  </button>
+  <button class="card card-small"  tabindex="0" (click)="demoData()">
+    <mat-icon aria-hidden="false" aria-label="Example home icon">shuffle</mat-icon>
+    <span>Add Random Demo Data</span>
+  </button>
+</div>
+
+<table>
+  <tr>
+    <th>done</th>
+    <th>doing</th>
+    <th>todo</th>
+  </tr>
+  <tr>
+    <td>
+      <div cdkDropList
+           #doneList="cdkDropList"
+           [cdkDropListData]="done"
+           [cdkDropListConnectedTo]="[todoList, doingList]"
+           class="example-list"
+           (cdkDropListDropped)="drop($event)">
+        <pre *ngFor="let task of done" cdkDrag>
+          <app-task (deleteTask)="deleteTask($event, 'done')" [task]="task"></app-task>
+        </pre>
+      </div>
+    </td>
+    <td>
+      <div cdkDropList
+           #doingList="cdkDropList"
+           [cdkDropListData]="doing"
+           [cdkDropListConnectedTo]="[doneList, todoList]"
+           class="example-list"
+           (cdkDropListDropped)="drop($event)">
+        <pre *ngFor="let task of doing" cdkDrag>
+          <app-task (deleteTask)="deleteTask($event, 'doing')" [task]="task"></app-task>
+        </pre>
+      </div>
+    </td>
+    <td>
+      <div cdkDropList
+           #todoList="cdkDropList"
+           [cdkDropListData]="todo"
+           [cdkDropListConnectedTo]="[doneList, doingList]"
+           class="example-list"
+           (cdkDropListDropped)="drop($event)">
+        <pre *ngFor="let task of todo" cdkDrag>
+          <app-task (deleteTask)="deleteTask($event, 'todo')" [task]="task"></app-task>
+        </pre>
+      </div>
+    </td>
+  </tr>
+</table>