bugfixes, clean code

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

@@ -32,7 +32,16 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="todo">
-          <app-task *ngFor="let task of getTask()" [task]="task"></app-task>
+          <ng-container *ngIf="getTask('todo').length > 0; else noTask">
+            <app-task
+              *ngFor="let task of getTask('todo')"
+              [task]="task"
+            ></app-task>
+          </ng-container>
+
+          <ng-template #noTask>
+            <div class="empty-task">No tasks</div>
+          </ng-template>
         </div>
       </div>
       <div
@@ -45,7 +54,16 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="inprogress">
-          <app-task *ngFor="let task of getTask()" [task]="task"></app-task>
+          <ng-container *ngIf="getTask('inprogress').length > 0; else noTask">
+            <app-task
+              *ngFor="let task of getTask('inprogress')"
+              [task]="task"
+            ></app-task>
+          </ng-container>
+
+          <ng-template #noTask>
+            <div class="empty-task">No tasks</div>
+          </ng-template>
         </div>
       </div>
       <div
@@ -58,7 +76,18 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="awaitfeedback">
-          <app-task *ngFor="let task of getTask()" [task]="task"></app-task>
+          <ng-container
+            *ngIf="getTask('awaitfeedback').length > 0; else noTask"
+          >
+            <app-task
+              *ngFor="let task of getTask('awaitfeedback')"
+              [task]="task"
+            ></app-task>
+          </ng-container>
+
+          <ng-template #noTask>
+            <div class="empty-task">No tasks</div>
+          </ng-template>
         </div>
       </div>
       <div
@@ -71,7 +100,16 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="todo">
-          <app-task *ngFor="let task of getTask()" [task]="task"></app-task>
+          <ng-container *ngIf="getTask('done').length > 0; else noTask">
+            <app-task
+              *ngFor="let task of getTask('done')"
+              [task]="task"
+            ></app-task>
+          </ng-container>
+
+          <ng-template #noTask>
+            <div class="empty-task">No tasks</div>
+          </ng-template>
         </div>
       </div>
     </div>

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

@@ -121,3 +121,22 @@ section {
     padding-left: 0;
   }
 }
+
+/*------------- EMPTY TASK -------------*/
+
+.empty-task {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 243px;
+  height: 48px;
+  border-radius: 10px;
+  border: 1px dashed var(--gray);
+  background-color: var(--very-light-gray2);
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--gray);
+  margin: 15.5px 0;
+}

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

@@ -15,27 +15,27 @@ import { TaskComponent } from './task/task.component';
 export class BoardComponent {
   @ViewChild('searchField') searchField!: ElementRef;
 
-  allTasks: Task[] = [];
-
   constructor(
     public dragDropService: DragDropService,
     private taskService: TaskService
   ) {}
 
   ngOnInit() {
-    this.dragDropService.itemDropped.subscribe(({ index, status }) => {
+    this.dragDropService.itemDropped.subscribe(({ id, status }) => {
-      this.handleItemDropped(index, status);
+      this.handleItemDropped(id, status);
     });
   }
 
-  getTask() {
+  getTask(status: string) {
-    return this.taskService.allTasks;
+    return this.taskService.allTasks.filter((task) => task.status === status);
   }
 
-  handleItemDropped(index: number, status: string): void {
+  handleItemDropped(id: string, status: string): void {
-    let firebaseId = this.taskService.allTasks[index].id;
+    const index = this.taskService.allTasks.findIndex((task) => task.id === id);
-    this.taskService.allTasks[index].status = status;
+    if (index !== -1) {
-    this.taskService.updateTask(firebaseId, index);
+      this.taskService.allTasks[index].status = status;
+      this.taskService.updateTask(id, index);
+    }
     this.searchField.nativeElement.value = '';
   }
 

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

@@ -1,62 +1,41 @@
-<section>
+<section *ngIf="task.id">
-  {{ task }}
-</section>
-
-<!--
-<section *ngIf="index !== undefined">
-  {{ task.title }}
   <div
     class="content"
     draggable="true"
-    (dragstart)="dragDropService.startDragging($event, index)"
+    (dragstart)="dragDropService.startDragging($event, task.id)"
   >
     <div
       class="category"
-      [style.background-color]="
+      [style.background-color]="categoryColors.get(task.category)"
-        categoryColors.get(firebaseService.allTasks[index].category)
-      "
     >
-      {{ firebaseService.allTasks[index].category }}
+      {{ task.category }}
     </div>
-    <div class="headline">{{ firebaseService.allTasks[index].title }}</div>
+    <div class="headline">{{ task.title }}</div>
     <div class="description">
-      {{ firebaseService.allTasks[index].description }}
+      {{ task.description }}
     </div>
-    <ng-container *ngIf="firebaseService.allTasks[index].subtasksTitle > ''">
+    <ng-container *ngIf="task.subtasksTitle > ''">
       <div class="subtask">
         <div class="subtask-line">
           <span
             class="filler-full"
-            [style.width.%]="completedSubtasksPercent(index)"
+            [style.width.%]="completedSubtasksPercent()"
           ></span>
         </div>
         <div class="subtask-text">
-          {{ completedSubtasks(index) }} /
+          {{ completedSubtasks() }} / {{ task.subtasksTitle.length }} Subtasks
-          {{ firebaseService.allTasks[index].subtasksTitle.length }} Subtasks
         </div>
       </div>
     </ng-container>
     <div class="footer">
       <div class="footer-badge">
-        <ng-container *ngIf="firebaseService.allTasks[index].assigned">
+        <ng-container *ngIf="task.assigned">
-          <div
+          <div *ngFor="let assigned of task.assigned; index as i">
-            *ngFor="
-              let assigned of firebaseService.allTasks[index].assigned;
-              index as i
-            "
-          >
             <span class="footer-badged"></span>
           </div>
         </ng-container>
       </div>
-      <div
+      <div class="footer-priority prio-{{ task.priority }}"></div>
-        class="footer-priority prio-{{
-          firebaseService.allTasks[index].priority
-        }}"
-      ></div>
     </div>
   </div>
 </section>
-
-<div *ngIf="index === undefined" class="empty-task">No tasks</div>
--->

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

@@ -3,24 +3,6 @@ section {
   margin: 15.5px 0;
 }
 
-.empty-task {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  min-width: 246px;
-  height: 48px;
-  border-radius: 10px;
-  border: 1px dashed var(--gray);
-  background-color: var(--very-light-gray2);
-  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
-  font-size: 16px;
-  font-weight: 400;
-  color: var(--gray);
-  width: 246px;
-  margin: 15.5px 0;
-}
-
 .content {
   position: relative;
   display: flex;

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

@@ -11,7 +11,6 @@ import { TaskService } from '../../../services/task.service';
   styleUrl: './task.component.scss',
 })
 export class TaskComponent {
-  @Input() index: number | undefined;
   @Input() task: any;
 
   categoryColors = new Map<string, string>([
@@ -28,13 +27,13 @@ export class TaskComponent {
 
   // Subtasks
 
-  completedSubtasks(index: number) {
+  completedSubtasks() {
-    const subtasks = this.taskService.allTasks[index].subtasksDone;
+    const subtasks = this.task.subtasksDone;
     return subtasks.filter((subtask: boolean) => subtask === true).length;
   }
 
-  completedSubtasksPercent(index: number): number {
+  completedSubtasksPercent(): number {
-    const subtasks = this.taskService.allTasks[index].subtasksDone;
+    const subtasks = this.task.subtasksDone;
     const completedSubtasksCount = subtasks.filter(
       (subtask: boolean) => subtask === true
     ).length;

src/app/services/drag-drop.service.ts

@@ -4,12 +4,12 @@ import { Injectable, EventEmitter } from '@angular/core';
   providedIn: 'root',
 })
 export class DragDropService {
-  itemDropped = new EventEmitter<{ index: number; status: string }>();
+  itemDropped = new EventEmitter<{ id: string; status: string }>();
 
   constructor() {}
 
-  startDragging(event: DragEvent, index: number) {
+  startDragging(event: DragEvent, id: string) {
-    event.dataTransfer?.setData('text/plain', index.toString());
+    event.dataTransfer?.setData('text/plain', id);
   }
 
   allowDrop(event: DragEvent) {
@@ -20,9 +20,9 @@ export class DragDropService {
     event.preventDefault();
     const dataTransfer = event.dataTransfer;
     if (dataTransfer) {
-      const index = +dataTransfer.getData('text/plain');
+      const id = dataTransfer.getData('text/plain');
-      if (!isNaN(index)) {
+      if (id) {
-        this.itemDropped.emit({ index, status });
+        this.itemDropped.emit({ id, status });
       }
     }
   }

src/app/services/task.service.ts

@@ -26,7 +26,10 @@ export class TaskService {
     return onSnapshot(this.getTaskRef(), (list) => {
       this.allTasks = [];
       list.forEach((element) => {
-        this.allTasks.push(element.data());
+        const taskData = element.data();
+        taskData['id'] = element.id;
+        this.allTasks.push(taskData);
+        this.filteredTasks.push(taskData);
       });
     });
   }