bugfixes drag & drop

src/app/components/board/board.component.html

@@ -44,17 +44,17 @@
             onclick="openAddTaskPage('todo')"
           />
         </div>
-        <div
-          id="content-todo"
-          *ngFor="let task of firebaseService.allTasks; index as i"
-        >
-          <app-task
-            *ngIf="firebaseService.allTasks[i].status === 'todo'"
-            [index]="i"
-          ></app-task>
-          <ng-template [ngIf]="firebaseService.allTasks[i].status === ''">
-            empthy
-          </ng-template>
+        <div id="content-todo">
+          <ng-container *ngIf="!isTaskRendered('todo')">
+            <app-task [index]="undefined"></app-task>
+          </ng-container>
+          <ng-container
+            *ngFor="let task of firebaseService.allTasks; index as i"
+          >
+            <ng-container *ngIf="task.status === 'todo'">
+              <app-task [index]="i"></app-task>
+            </ng-container>
+          </ng-container>
         </div>
       </div>
       <div
@@ -70,17 +70,19 @@
             onclick="openAddTaskPage('inprogress')"
           />
         </div>
-        <div
-          id="content-inprogress"
-          *ngFor="let task of firebaseService.allTasks; index as i"
-        >
-          <app-task
-            *ngIf="firebaseService.allTasks[i].status === 'inprogress'"
-            [index]="i"
-          ></app-task>
+        <div id="content-inprogress">
+          <ng-container *ngIf="!isTaskRendered('inprogress')">
+            <app-task [index]="undefined"></app-task>
+          </ng-container>
+          <ng-container
+            *ngFor="let task of firebaseService.allTasks; index as i"
+          >
+            <ng-container *ngIf="task.status === 'inprogress'">
+              <app-task [index]="i"></app-task>
+            </ng-container>
+          </ng-container>
         </div>
       </div>
-
       <div
         class="content-column"
         (dragover)="dragDropService.allowDrop($event)"
@@ -94,17 +96,19 @@
             onclick="openAddTaskPage('awaitfeedback')"
           />
         </div>
-        <div
-          id="content-awaitfeedback"
-          *ngFor="let task of firebaseService.allTasks; index as i"
-        >
-          <app-task
-            *ngIf="firebaseService.allTasks[i].status === 'awaitfeedback'"
-            [index]="i"
-          ></app-task>
+        <div id="content-awaitfeedback">
+          <ng-container *ngIf="!isTaskRendered('awaitfeedback')">
+            <app-task [index]="undefined"></app-task>
+          </ng-container>
+          <ng-container
+            *ngFor="let task of firebaseService.allTasks; index as i"
+          >
+            <ng-container *ngIf="task.status === 'awaitfeedback'">
+              <app-task [index]="i"></app-task>
+            </ng-container>
+          </ng-container>
         </div>
       </div>
-
       <div
         class="content-column"
         (dragover)="dragDropService.allowDrop($event)"
@@ -118,14 +122,17 @@
             onclick="openAddTaskPage('done')"
           />
         </div>
-        <div
-          id="content-done"
-          *ngFor="let task of firebaseService.allTasks; index as i"
-        >
-          <app-task
-            *ngIf="firebaseService.allTasks[i].status === 'done'"
-            [index]="i"
-          ></app-task>
+        <div id="content-done">
+          <ng-container *ngIf="!isTaskRendered('done')">
+            <app-task [index]="undefined"></app-task>
+          </ng-container>
+          <ng-container
+            *ngFor="let task of firebaseService.allTasks; index as i"
+          >
+            <ng-container *ngIf="task.status === 'done'">
+              <app-task [index]="i"></app-task>
+            </ng-container>
+          </ng-container>
         </div>
       </div>
     </div>

src/app/components/board/board.component.ts

@@ -15,17 +15,27 @@ export class BoardComponent {
   constructor(
     public dragDropService: DragDropService,
     public firebaseService: FirebaseService
-  ) {
-    this.dragDropService.itemDropped.subscribe(({ index, status }) => {
-      this.firebaseService.allTasks[index].status = status;
-      this.firebaseService.updateTask(
-        this.firebaseService.allTasks[index].id,
-        index
-      );
-    });
-  }
+  ) {}
 
   ngOnInit() {
     this.firebaseService.updateAllTasks();
+    this.dragDropService.itemDropped.subscribe(({ index, status }) => {
+      this.handleItemDropped(index, status);
+    });
+  }
+
+  handleItemDropped(index: number, status: string): void {
+    let firebaseId = this.firebaseService.allTasks[index].id;
+    this.firebaseService.allTasks[index].status = status;
+    this.firebaseService.updateTask(firebaseId, index);
+  }
+
+  isTaskRendered(taskColumn: string): boolean {
+    for (let task of this.firebaseService.allTasks) {
+      if (task.status === taskColumn) {
+        return true;
+      }
+    }
+    return false;
   }
 }

src/app/components/board/task/task.component.html

@@ -1,8 +1,7 @@
-<section>
+<section *ngIf="index !== undefined">
   <div
     class="content"
     draggable="true"
-    *ngIf="index !== undefined"
     (dragstart)="dragDropService.startDragging($event, index)"
   >
     <div
@@ -22,3 +21,5 @@
     </div>
   </div>
 </section>
+
+<div *ngIf="index === undefined" class="empty-task">No tasks</div>

src/app/components/board/task/task.component.scss

@@ -1,6 +1,5 @@
 section {
   width: 246px;
-  height: 100%;
   margin: 15.5px 0;
 }
 
@@ -18,6 +17,8 @@ section {
   font-size: 16px;
   font-weight: 400;
   color: var(--gray);
+  width: 246px;
+  margin: 15.5px 0;
 }
 
 .content {

src/styles.scss

@@ -24,6 +24,10 @@
   white-space: normal;
 }
 
+.d-none {
+  display: none;
+}
+
 /*------------- SCROLLBAR -------------*/
 
 *::-webkit-scrollbar {