From cf508534fa99b31ce4815a22513da1dd30d07449 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sun, 24 Mar 2024 13:58:29 +0100
Subject: [PATCH] bugfixes drag & drop

---
 src/app/components/board/board.component.html | 81 ++++++++++---------
 src/app/components/board/board.component.ts   | 28 ++++---
 .../components/board/task/task.component.html |  5 +-
 .../components/board/task/task.component.scss |  3 +-
 src/styles.scss                               |  4 +
 5 files changed, 72 insertions(+), 49 deletions(-)

diff --git a/src/app/components/board/board.component.html b/src/app/components/board/board.component.html
index 356e535..54e0c42 100644
--- a/src/app/components/board/board.component.html
+++ b/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>
diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts
index 99b130c..178e309 100644
--- a/src/app/components/board/board.component.ts
+++ b/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;
   }
 }
diff --git a/src/app/components/board/task/task.component.html b/src/app/components/board/task/task.component.html
index 7d3f8dc..bef8138 100644
--- a/src/app/components/board/task/task.component.html
+++ b/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>
diff --git a/src/app/components/board/task/task.component.scss b/src/app/components/board/task/task.component.scss
index bdbd8f6..dddf323 100644
--- a/src/app/components/board/task/task.component.scss
+++ b/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 {
diff --git a/src/styles.scss b/src/styles.scss
index 6ef936e..d534af4 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -24,6 +24,10 @@
   white-space: normal;
 }
 
+.d-none {
+  display: none;
+}
+
 /*------------- SCROLLBAR -------------*/
 
 *::-webkit-scrollbar {