bugfixes & added task service

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

@@ -1,13 +1,3 @@
-<div
-  id="task-overlay-cart"
-  class="dialog-bg d-none"
-  onclick="closeCart(event)"
-></div>
-<div
-  id="add-task-dialog"
-  class="dialog-bg d-none"
-  onclick="closeAddTask(event)"
-></div>
 <section>
   <div class="header">
     <div class="title">Board</div>
@@ -15,13 +5,14 @@
       <div>
         <input
           #searchField
+          id="search-task"
           type="text"
           placeholder="Find Task"
           (input)="searchTask()"
         />
         <span class="line"></span>
       </div>
-      <button class="btn" type="submit" onclick="openAddTaskPage()">
+      <button class="btn" type="submit">
         <div class="btn-inside">
           <span>Add Task</span>
           <img src="./../../../assets/img/board/add_white.svg" alt="check" />
@@ -38,23 +29,10 @@
       >
         <div class="headline">
           <span>To do</span
-          ><img
+          ><img src="./../../../assets/img/board/add.svg" alt="add" />
-            src="./../../../assets/img/board/add.svg"
-            alt="add"
-            onclick="openAddTaskPage('todo')"
-          />
         </div>
         <div id="todo">
-          <ng-container *ngIf="!isTaskRendered('todo')">
+          <app-task *ngFor="let task of getTask()" [task]="task"></app-task>
-            <app-task [index]="undefined"></app-task>
-          </ng-container>
-          <ng-container
-            *ngFor="let task of firebaseService.filteredTasks; index as i"
-          >
-            <ng-container *ngIf="task.status === 'todo'">
-              <app-task [index]="i"></app-task>
-            </ng-container>
-          </ng-container>
         </div>
       </div>
       <div
@@ -64,23 +42,10 @@
       >
         <div class="headline">
           <span>In progress</span
-          ><img
+          ><img src="./../../../assets/img/board/add.svg" alt="add" />
-            src="./../../../assets/img/board/add.svg"
-            alt="add"
-            onclick="openAddTaskPage('inprogress')"
-          />
         </div>
         <div id="inprogress">
-          <ng-container *ngIf="!isTaskRendered('inprogress')">
+          <app-task *ngFor="let task of getTask()" [task]="task"></app-task>
-            <app-task [index]="undefined"></app-task>
-          </ng-container>
-          <ng-container
-            *ngFor="let task of firebaseService.filteredTasks; index as i"
-          >
-            <ng-container *ngIf="task.status === 'inprogress'">
-              <app-task [index]="i"></app-task>
-            </ng-container>
-          </ng-container>
         </div>
       </div>
       <div
@@ -90,23 +55,10 @@
       >
         <div class="headline">
           <span>Await feedback</span
-          ><img
+          ><img src="./../../../assets/img/board/add.svg" alt="add" />
-            src="./../../../assets/img/board/add.svg"
-            alt="add"
-            onclick="openAddTaskPage('awaitfeedback')"
-          />
         </div>
         <div id="awaitfeedback">
-          <ng-container *ngIf="!isTaskRendered('awaitfeedback')">
+          <app-task *ngFor="let task of getTask()" [task]="task"></app-task>
-            <app-task [index]="undefined"></app-task>
-          </ng-container>
-          <ng-container
-            *ngFor="let task of firebaseService.filteredTasks; index as i"
-          >
-            <ng-container *ngIf="task.status === 'awaitfeedback'">
-              <app-task [index]="i"></app-task>
-            </ng-container>
-          </ng-container>
         </div>
       </div>
       <div
@@ -116,23 +68,10 @@
       >
         <div class="headline">
           <span>Done</span
-          ><img
+          ><img src="./../../../assets/img/board/add.svg" alt="add" />
-            src="./../../../assets/img/board/add.svg"
-            alt="add"
-            onclick="openAddTaskPage('done')"
-          />
         </div>
-        <div id="done">
+        <div id="todo">
-          <ng-container *ngIf="!isTaskRendered('done')">
+          <app-task *ngFor="let task of getTask()" [task]="task"></app-task>
-            <app-task [index]="undefined"></app-task>
-          </ng-container>
-          <ng-container
-            *ngFor="let task of firebaseService.filteredTasks; 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.scss

@@ -1,7 +1,6 @@
 section {
   margin: 0;
   background-color: var(--very-light-gray);
-  padding-right: 24px;
 }
 
 .title {
@@ -23,6 +22,7 @@ section {
   display: flex;
   align-items: center;
   position: relative;
+  padding-right: 32px;
   input {
     width: 312px;
     padding: 8px 16px;
@@ -41,7 +41,7 @@ section {
 .line {
   position: absolute;
   top: 8px;
-  right: 215px;
+  right: 250px;
   height: 18px;
   width: 1px;
   background-color: var(--gray);

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

@@ -1,40 +1,46 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
-import { TaskComponent } from './task/task.component';
 import { DragDropService } from '../../services/drag-drop.service';
 import { CommonModule } from '@angular/common';
-import { FirebaseService } from '../../services/firebase.service';
+import { Task } from '../../interfaces/task.interface';
+import { TaskService } from '../../services/task.service';
+import { TaskComponent } from './task/task.component';
 
 @Component({
   selector: 'app-board',
   standalone: true,
-  imports: [TaskComponent, CommonModule],
+  imports: [CommonModule, TaskComponent],
   templateUrl: './board.component.html',
   styleUrl: './board.component.scss',
 })
 export class BoardComponent {
   @ViewChild('searchField') searchField!: ElementRef;
 
+  allTasks: Task[] = [];
+
   constructor(
     public dragDropService: DragDropService,
-    public firebaseService: FirebaseService
+    private taskService: TaskService
   ) {}
 
   ngOnInit() {
-    this.firebaseService.updateAllTasks();
     this.dragDropService.itemDropped.subscribe(({ index, status }) => {
       this.handleItemDropped(index, status);
     });
   }
 
+  getTask() {
+    return this.taskService.allTasks;
+  }
+
   handleItemDropped(index: number, status: string): void {
-    let firebaseId = this.firebaseService.allTasks[index].id;
+    let firebaseId = this.taskService.allTasks[index].id;
-    this.firebaseService.allTasks[index].status = status;
+    this.taskService.allTasks[index].status = status;
-    this.firebaseService.updateTask(firebaseId, index);
+    this.taskService.updateTask(firebaseId, index);
     this.searchField.nativeElement.value = '';
   }
 
   isTaskRendered(taskColumn: string): boolean {
-    for (let task of this.firebaseService.filteredTasks) {
+    for (let task of this.taskService.filteredTasks) {
       if (task.status === taskColumn) {
         return true;
       }
@@ -44,7 +50,7 @@ export class BoardComponent {
 
   searchTask(): void {
     const search = this.searchField.nativeElement.value.toLowerCase();
-    this.firebaseService.filteredTasks = this.firebaseService.allTasks.filter(
+    this.taskService.filteredTasks = this.taskService.allTasks.filter(
       (task) =>
         task.title.toLowerCase().includes(search) ||
         task.description.toLowerCase().includes(search) ||

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

@@ -1,4 +1,10 @@
+<section>
+  {{ task }}
+</section>
+
+<!--
 <section *ngIf="index !== undefined">
+  {{ task.title }}
   <div
     class="content"
     draggable="true"
@@ -6,7 +12,9 @@
   >
     <div
       class="category"
-      [style.background-color]="generateCategoryColor(index)"
+      [style.background-color]="
+        categoryColors.get(firebaseService.allTasks[index].category)
+      "
     >
       {{ firebaseService.allTasks[index].category }}
     </div>
@@ -14,12 +22,41 @@
     <div class="description">
       {{ firebaseService.allTasks[index].description }}
     </div>
-    checkSubtasks(tasks[id].id)
+    <ng-container *ngIf="firebaseService.allTasks[index].subtasksTitle > ''">
+      <div class="subtask">
+        <div class="subtask-line">
+          <span
+            class="filler-full"
+            [style.width.%]="completedSubtasksPercent(index)"
+          ></span>
+        </div>
+        <div class="subtask-text">
+          {{ completedSubtasks(index) }} /
+          {{ firebaseService.allTasks[index].subtasksTitle.length }} Subtasks
+        </div>
+      </div>
+    </ng-container>
     <div class="footer">
-      <div class="footer-badge"></div>
+      <div class="footer-badge">
-      <div class="footer-priority"></div>
+        <ng-container *ngIf="firebaseService.allTasks[index].assigned">
+          <div
+            *ngFor="
+              let assigned of firebaseService.allTasks[index].assigned;
+              index as i
+            "
+          >
+            <span class="footer-badged"></span>
+          </div>
+        </ng-container>
+      </div>
+      <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

@@ -81,13 +81,13 @@ section {
   justify-content: center;
   align-items: flex-start;
   border-radius: 8px;
-  background-color: var(--very-light-gray3);
+  background-color: var(--very-light-gray);
   margin-right: 11px;
 }
 
 .filler-full {
   border-radius: 16px;
-  background-color: var(--medium-blue);
+  background-color: var(--light-blue);
   height: 8px;
 }
 
@@ -104,7 +104,7 @@ section {
   width: 100%;
 }
 
-#footer-badge {
+.footer-badge {
   display: flex;
   width: 170px;
   overflow: auto;
@@ -118,17 +118,18 @@ section {
   min-height: 32px;
   border-radius: 45px;
   border: 1px solid var(--white);
+  background-color: red;
   color: var(--white);
   font-size: 12px;
   font-weight: 400;
 }
 
-#footer-badge span {
+.footer-badge span {
   margin-right: 4px;
   text-shadow: 1px 1px 2px var(--black);
 }
 
-#footer-badge span:first-child {
+.footer-badge span:first-child {
   margin-left: 0 !important;
 }
 

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { DragDropService } from '../../../services/drag-drop.service';
-import { FirebaseService } from '../../../services/firebase.service';
+import { TaskService } from '../../../services/task.service';
 
 @Component({
   selector: 'app-task',
@@ -12,24 +12,33 @@ import { FirebaseService } from '../../../services/firebase.service';
 })
 export class TaskComponent {
   @Input() index: number | undefined;
+  @Input() task: any;
+
+  categoryColors = new Map<string, string>([
+    ['HTML', '#E54B20'],
+    ['CSS', '#214CE4'],
+    ['JavaScript', '#D5BA32'],
+    ['Angular', '#DD002D'],
+  ]);
 
   constructor(
     public dragDropService: DragDropService,
-    public firebaseService: FirebaseService
+    private taskService: TaskService
   ) {}
 
-  generateCategoryColor(index: number) {
+  // Subtasks
-    const task = this.firebaseService.allTasks[index];
+
-    if (task.category === 'HTML') {
+  completedSubtasks(index: number) {
-      return '#E54B20';
+    const subtasks = this.taskService.allTasks[index].subtasksDone;
-    } else if (task.category === 'CSS') {
+    return subtasks.filter((subtask: boolean) => subtask === true).length;
-      return '#214CE4';
+  }
-    } else if (task.category === 'JavaScript') {
+
-      return '#D5BA32';
+  completedSubtasksPercent(index: number): number {
-    } else if (task.category === 'Angular') {
+    const subtasks = this.taskService.allTasks[index].subtasksDone;
-      return '#DD002D';
+    const completedSubtasksCount = subtasks.filter(
-    } else {
+      (subtask: boolean) => subtask === true
-      return '';
+    ).length;
-    }
+
+    return (completedSubtasksCount / subtasks.length) * 100;
   }
 }

src/app/interfaces/task.interface.ts

@@ -0,0 +1,9 @@
+export interface Task {
+  title: string;
+  description: string;
+  category: string;
+  status: string;
+  subtasksTitle: string;
+  subtasksDone: boolean;
+  assigned: number;
+}

src/app/services/task.service.ts

@@ -10,27 +10,29 @@ import {
 @Injectable({
   providedIn: 'root',
 })
-export class FirebaseService {
+export class TaskService {
   firestore: Firestore = inject(Firestore);
 
   allTasks: any[] = [];
   filteredTasks: any[] = [];
 
-  updateAllTasks() {
+  unsubTask;
-    onSnapshot(collection(this.firestore, 'tasks'), (list) => {
+
-      if (!list.empty) {
+  constructor() {
-        this.allTasks = [];
+    this.unsubTask = this.subTaskList();
-        this.filteredTasks = [];
-        list.forEach((doc) => {
-          const taskData = doc.data();
-          taskData['id'] = doc.id;
-          this.allTasks.push(taskData);
-          this.filteredTasks.push(taskData);
-        });
-      } else {
-        console.info('No such document!');
   }
+
+  subTaskList() {
+    return onSnapshot(this.getTaskRef(), (list) => {
+      this.allTasks = [];
+      list.forEach((element) => {
+        this.allTasks.push(element.data());
       });
+    });
+  }
+
+  getTaskRef() {
+    return collection(this.firestore, 'tasks');
   }
 
   async updateTask(taskId: any, index: number) {