added firebase service

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

@@ -44,9 +44,15 @@
             onclick="openAddTaskPage('todo')"
           />
         </div>
-        <div id="content-todo" *ngFor="let task of tasks; index as i">
+        <div
-          <app-task *ngIf="task.status === 'todo'" [index]="i"></app-task>
+          id="content-todo"
-          <ng-template [ngIf]="task.status === undefined || task.status === ''">
+          *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>
@@ -64,11 +70,14 @@
             onclick="openAddTaskPage('inprogress')"
           />
         </div>
-        <div id="content-inprogress" *ngFor="let task of tasks; index as i">
+        <div
-          <app-task *ngIf="task.status === 'inprogress'" [index]="i"></app-task>
+          id="content-inprogress"
-          <ng-template [ngIf]="task.status === undefined || task.status === ''">
+          *ngFor="let task of firebaseService.allTasks; index as i"
-            empthy
+        >
-          </ng-template>
+          <app-task
+            *ngIf="firebaseService.allTasks[i].status === 'inprogress'"
+            [index]="i"
+          ></app-task>
         </div>
       </div>
 
@@ -85,14 +94,14 @@
             onclick="openAddTaskPage('awaitfeedback')"
           />
         </div>
-        <div id="content-awaitfeedback" *ngFor="let task of tasks; index as i">
+        <div
+          id="content-awaitfeedback"
+          *ngFor="let task of firebaseService.allTasks; index as i"
+        >
           <app-task
-            *ngIf="task.status === 'awaitfeedback'"
+            *ngIf="firebaseService.allTasks[i].status === 'awaitfeedback'"
             [index]="i"
           ></app-task>
-          <ng-template [ngIf]="task.status === undefined || task.status === ''">
-            empthy
-          </ng-template>
         </div>
       </div>
 
@@ -109,11 +118,14 @@
             onclick="openAddTaskPage('done')"
           />
         </div>
-        <div id="content-done" *ngFor="let task of tasks; index as i">
+        <div
-          <app-task *ngIf="task.status === 'done'" [index]="i"></app-task>
+          id="content-done"
-          <ng-template [ngIf]="task.status === undefined || task.status === ''">
+          *ngFor="let task of firebaseService.allTasks; index as i"
-            empthy
+        >
-          </ng-template>
+          <app-task
+            *ngIf="firebaseService.allTasks[i].status === 'done'"
+            [index]="i"
+          ></app-task>
         </div>
       </div>
     </div>

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

@@ -2,6 +2,7 @@ import { Component } 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';
 
 @Component({
   selector: 'app-board',
@@ -11,24 +12,20 @@ import { CommonModule } from '@angular/common';
   styleUrl: './board.component.scss',
 })
 export class BoardComponent {
-  tasks = [
+  constructor(
-    {
+    public dragDropService: DragDropService,
-      id: '1',
+    public firebaseService: FirebaseService
-      category: 'HTML',
+  ) {
-      status: 'todo',
-    },
-    {
-      id: '2',
-      category: 'CSS',
-      status: 'done',
-    },
-  ];
-
-  constructor(public dragDropService: DragDropService) {
     this.dragDropService.itemDropped.subscribe(({ index, status }) => {
-      if (index >= 0 && index < this.tasks.length) {
+      this.firebaseService.allTasks[index].status = status;
-        this.tasks[index].status = status;
+      this.firebaseService.updateTask(
-      }
+        this.firebaseService.allTasks[index].id,
+        index
+      );
     });
   }
+
+  ngOnInit() {
+    this.firebaseService.updateAllTasks();
+  }
 }

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

@@ -7,12 +7,14 @@
   >
     <div
       class="category"
-      style="background-color: var(--generateTaskCategoryColor(id))"
+      [style.background-color]="generateCategoryColor(index)"
     >
-      category
+      {{ firebaseService.allTasks[index].category }}
+    </div>
+    <div class="headline">{{ firebaseService.allTasks[index].title }}</div>
+    <div class="description">
+      {{ firebaseService.allTasks[index].description }}
     </div>
-    <div class="headline">title</div>
-    <div class="description">description</div>
     checkSubtasks(tasks[id].id)
     <div class="footer">
       <div class="footer-badge"></div>

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

@@ -1,6 +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';
 
 @Component({
   selector: 'app-task',
@@ -12,5 +13,23 @@ import { DragDropService } from '../../../services/drag-drop.service';
 export class TaskComponent {
   @Input() index: number | undefined;
 
-  constructor(public dragDropService: DragDropService) {}
+  constructor(
+    public dragDropService: DragDropService,
+    public firebaseService: FirebaseService
+  ) {}
+
+  generateCategoryColor(index: number) {
+    const task = this.firebaseService.allTasks[index];
+    if (task.category === 'HTML') {
+      return '#E54B20';
+    } else if (task.category === 'CSS') {
+      return '#214CE4';
+    } else if (task.category === 'JavaScript') {
+      return '#D5BA32';
+    } else if (task.category === 'Angular') {
+      return '#DD002D';
+    } else {
+      return '';
+    }
+  }
 }

src/app/services/firebase.service.ts

@@ -0,0 +1,50 @@
+import { Injectable, inject } from '@angular/core';
+import {
+  Firestore,
+  collection,
+  doc,
+  onSnapshot,
+  updateDoc,
+} from '@angular/fire/firestore';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FirebaseService {
+  firestore: Firestore = inject(Firestore);
+
+  allTasks: any[] = [];
+
+  updateAllTasks() {
+    onSnapshot(collection(this.firestore, 'tasks'), (list) => {
+      if (!list.empty) {
+        this.allTasks = [];
+        list.forEach((doc) => {
+          const taskData = doc.data();
+          taskData['id'] = doc.id;
+          this.allTasks.push(taskData);
+        });
+      } else {
+        console.info('No such document!');
+      }
+    });
+  }
+
+  async updateTask(taskId: any, index: number) {
+    await updateDoc(
+      doc(collection(this.firestore, 'tasks'), taskId),
+      this.getCleanJson(this.allTasks[index])
+    ).catch((err) => {
+      console.error(err);
+    });
+  }
+
+  getCleanJson(task: any): {} {
+    return {
+      category: task.category,
+      description: task.description,
+      title: task.title,
+      status: task.status,
+    };
+  }
+}