update task service & board

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

@@ -32,7 +32,7 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="todo" class="details">
-          @for(task of todoTasks; track task) {
+          @for(task of getTaskStatus("todo"); track task) {
           <app-task [task]="task"></app-task>
           } @empty {
           <app-task-empty>No tasks</app-task-empty>
@@ -49,7 +49,7 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="inprogress" class="details">
-          @for(task of inprogressTasks; track task) {
+          @for(task of getTaskStatus("inprogress"); track task) {
           <app-task [task]="task"></app-task>
           } @empty {
           <app-task-empty>No tasks</app-task-empty>
@@ -66,7 +66,7 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="awaitfeedback" class="details">
-          @for(task of awaitfeedbackTasks; track task) {
+          @for(task of getTaskStatus("awaitfeedback"); track task) {
           <app-task [task]="task"></app-task>
           } @empty {
           <app-task-empty>No tasks</app-task-empty>
@@ -83,7 +83,7 @@
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
         <div id="done" class="details">
-          @for(task of doneTasks; track task) {
+          @for(task of getTaskStatus("done"); track task) {
           <app-task [task]="task"></app-task>
           } @empty {
           <app-task-empty>No tasks</app-task-empty>

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

@@ -15,19 +15,12 @@ import { TaskEmptyComponent } from './task/task-empty/task-empty.component';
 })
 export class BoardComponent {
   @ViewChild('searchField') searchField!: ElementRef;
-  todoTasks: Task[] = [];
-  inprogressTasks: Task[] = [];
-  awaitfeedbackTasks: Task[] = [];
-  doneTasks: Task[] = [];
-
   constructor(
     public dragDropService: DragDropService,
     private taskService: TaskService
-  ) {
-    this.taskService.subTaskList().subscribe(() => {
-      this.loadAllTasks();
-    });
-  }
+  ) {}
+
+  search!: string;
 
   ngOnInit() {
     this.dragDropService.itemDropped.subscribe(({ id, status }) => {
@@ -35,22 +28,20 @@ export class BoardComponent {
     });
   }
 
-  getTask(status: string): Task[] {
-    const search = this.searchField.nativeElement.value.toLowerCase();
-    if (this.taskService.filteredTasks.length >= 0 && search !== '') {
-      return this.taskService.filteredTasks.filter(
-        (task) => task.status === status
-      );
-    } else {
-      return this.taskService.allTasks.filter((task) => task.status === status);
+  getTaskStatus(status: string) {
+    if (this.searchField) {
+      this.search = this.searchField.nativeElement.value.toLowerCase();
+      if (this.search.length > 0) {
+        return this.taskService
+          .getFiltertTasks()
+          .filter((task) => task.status === status);
+      } else {
+        return this.taskService
+          .getAllTasks()
+          .filter((task) => task.status === status);
+      }
     }
-  }
-
-  loadAllTasks() {
-    this.todoTasks = this.getTask('todo');
-    this.inprogressTasks = this.getTask('inprogress');
-    this.awaitfeedbackTasks = this.getTask('awaitfeedback');
-    this.doneTasks = this.getTask('done');
+    return;
   }
 
   handleItemDropped(id: string, status: string): void {
@@ -68,13 +59,13 @@ export class BoardComponent {
   }
 
   searchTask(): void {
-    const search = this.searchField.nativeElement.value.toLowerCase();
-    this.taskService.filteredTasks = this.taskService.allTasks.filter(
-      (task) =>
-        task.title.toLowerCase().includes(search) ||
-        task.description.toLowerCase().includes(search) ||
-        task.category.toLowerCase().includes(search)
-    );
-    this.loadAllTasks();
+    this.taskService.filteredTasks = this.taskService
+      .getAllTasks()
+      .filter(
+        (task) =>
+          task.title.toLowerCase().includes(this.search) ||
+          task.description.toLowerCase().includes(this.search) ||
+          task.category.toLowerCase().includes(this.search)
+      );
   }
 }

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

@@ -46,7 +46,7 @@ export class TaskComponent {
 
   userBadged(id: number) {
     const userId = String(id);
-    const user = this.userService.allUsers.find((user) => user.id === userId);
+    const user = this.userService.getUsers().find((user) => user.id === userId);
     if (user) {
       if (user.firstName === 'Guest') {
         return user.firstName.charAt(0);

src/app/components/contacts/contacts.component.ts

@@ -43,8 +43,7 @@ export class ContactsComponent {
   }
 
   checkUsersFirstLetter() {
-    let usersFirstLetter = [];
-    usersFirstLetter = Array.from(
+    let usersFirstLetter = Array.from(
       new Set(
         this.loadAllUserWithoutGuest().map((user) =>
           user.firstName[0].toUpperCase()

src/app/components/summary/summary.component.ts

@@ -19,11 +19,9 @@ export class SummaryComponent {
   urgentTasksDate: String = '';
 
   constructor(private taskService: TaskService) {
-    this.taskService.subTaskList().subscribe(() => {
-      this.updateTasksCount();
-      this.updateAllTasksCount();
-      this.updateUrgentTasksCount();
-    });
+    this.updateTasksCount();
+    this.updateAllTasksCount();
+    this.updateUrgentTasksCount();
   }
 
   updateAllTasksCount() {

src/app/services/task.service.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, Injectable, inject } from '@angular/core';
+import { EventEmitter, Injectable, OnDestroy, inject } from '@angular/core';
 import {
   Firestore,
   collection,
@@ -7,36 +7,53 @@ import {
   updateDoc,
 } from '@angular/fire/firestore';
 import { Task } from '../interfaces/task.interface';
-import { Observable } from 'rxjs';
-
 @Injectable({
   providedIn: 'root',
 })
-export class TaskService {
+export class TaskService implements OnDestroy {
   firestore: Firestore = inject(Firestore);
 
   allTasks: Task[] = [];
   filteredTasks: Task[] = [];
 
-  constructor() {}
+  unsubTask;
+
+  constructor() {
+    this.unsubTask = this.subTaskList();
+  }
 
   subTaskList() {
-    return new Observable<void>((observer) => {
-      const unsubscribe = onSnapshot(
-        collection(this.firestore, 'tasks'),
-        (list) => {
-          this.allTasks = [];
-          list.forEach((element) => {
-            const taskData = { ...(element.data() as Task), id: element.id };
-            this.allTasks.push(taskData);
-          });
-          observer.next();
-        }
-      );
-      return () => unsubscribe();
+    return onSnapshot(collection(this.firestore, 'tasks'), (list) => {
+      this.allTasks = [];
+      list.forEach((element) => {
+        this.allTasks.push(this.setUserObject(element.data(), element.id));
+      });
     });
   }
 
+  setUserObject(obj: any, id: string): Task {
+    return {
+      id: id,
+      title: obj.title,
+      description: obj.description,
+      category: obj.category,
+      status: obj.status,
+      priority: obj.priority,
+      subtasksTitle: obj.subtasksTitle,
+      subtasksDone: obj.subtasksDone,
+      assigned: obj.assigned,
+      timestamp: obj.timestamp,
+    };
+  }
+
+  getAllTasks(): Task[] {
+    return this.allTasks;
+  }
+
+  getFiltertTasks(): Task[] {
+    return this.filteredTasks;
+  }
+
   async updateTask(taskId: any, index: number) {
     await updateDoc(
       doc(collection(this.firestore, 'tasks'), taskId),
@@ -54,4 +71,8 @@ export class TaskService {
       status: task.status,
     };
   }
+
+  ngOnDestroy() {
+    this.unsubTask();
+  }
 }

src/app/services/user.service.ts

@@ -17,10 +17,6 @@ export class UserService implements OnDestroy {
     this.unsubUser = this.subUserList();
   }
 
-  getUsers(): User[] {
-    return this.allUsers;
-  }
-
   subUserList() {
     return onSnapshot(collection(this.firestore, 'users'), (list) => {
       this.allUsers = [];
@@ -42,6 +38,10 @@ export class UserService implements OnDestroy {
     };
   }
 
+  getUsers(): User[] {
+    return this.allUsers;
+  }
+
   getUserDetails(userId: string, query: keyof User) {
     const filteredUsers = this.getUsers().filter((user) => user.id === userId);
     return filteredUsers.map((user) => user[query]);