added search function

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

@@ -10,18 +10,18 @@
 ></div>
 <section>
   <div class="header">
-    <h1>Board</h1>
+    <div class="title">Board</div>
     <div class="search">
       <div>
         <input
-          id="searchfield"
+          #searchField
           type="text"
           placeholder="Find Task"
-          oninput="searchTask()"
+          (input)="searchTask()"
         />
         <span class="line"></span>
       </div>
-      <button class="btn-addtask" type="submit" onclick="openAddTaskPage()">
+      <button class="btn" type="submit" onclick="openAddTaskPage()">
         <div class="btn-inside">
           <span>Add Task</span>
           <img src="./../../../assets/img/board/add_white.svg" alt="check" />
@@ -30,13 +30,13 @@
     </div>
   </div>
   <div class="content">
-    <div id="content-headline">
+    <div class="status">
       <div
-        class="content-column"
+        class="column"
         (dragover)="dragDropService.allowDrop($event)"
         (drop)="dragDropService.drop($event, 'todo')"
       >
-        <div class="content-headline">
+        <div class="headline">
           <span>To do</span
           ><img
             src="./../../../assets/img/board/add.svg"
@@ -44,12 +44,12 @@
             onclick="openAddTaskPage('todo')"
           />
         </div>
-        <div id="content-todo">
+        <div id="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"
+            *ngFor="let task of firebaseService.filteredTasks; index as i"
           >
             <ng-container *ngIf="task.status === 'todo'">
               <app-task [index]="i"></app-task>
@@ -58,11 +58,11 @@
         </div>
       </div>
       <div
-        class="content-column"
+        class="column"
         (dragover)="dragDropService.allowDrop($event)"
         (drop)="dragDropService.drop($event, 'inprogress')"
       >
-        <div class="content-headline">
+        <div class="headline">
           <span>In progress</span
           ><img
             src="./../../../assets/img/board/add.svg"
@@ -70,12 +70,12 @@
             onclick="openAddTaskPage('inprogress')"
           />
         </div>
-        <div id="content-inprogress">
+        <div id="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"
+            *ngFor="let task of firebaseService.filteredTasks; index as i"
           >
             <ng-container *ngIf="task.status === 'inprogress'">
               <app-task [index]="i"></app-task>
@@ -84,11 +84,11 @@
         </div>
       </div>
       <div
-        class="content-column"
+        class="column"
         (dragover)="dragDropService.allowDrop($event)"
         (drop)="dragDropService.drop($event, 'awaitfeedback')"
       >
-        <div class="content-headline">
+        <div class="headline">
           <span>Await feedback</span
           ><img
             src="./../../../assets/img/board/add.svg"
@@ -96,12 +96,12 @@
             onclick="openAddTaskPage('awaitfeedback')"
           />
         </div>
-        <div id="content-awaitfeedback">
+        <div id="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"
+            *ngFor="let task of firebaseService.filteredTasks; index as i"
           >
             <ng-container *ngIf="task.status === 'awaitfeedback'">
               <app-task [index]="i"></app-task>
@@ -110,11 +110,11 @@
         </div>
       </div>
       <div
-        class="content-column"
+        class="column"
         (dragover)="dragDropService.allowDrop($event)"
         (drop)="dragDropService.drop($event, 'done')"
       >
-        <div class="content-headline">
+        <div class="headline">
           <span>Done</span
           ><img
             src="./../../../assets/img/board/add.svg"
@@ -122,12 +122,12 @@
             onclick="openAddTaskPage('done')"
           />
         </div>
-        <div id="content-done">
+        <div id="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"
+            *ngFor="let task of firebaseService.filteredTasks; index as i"
           >
             <ng-container *ngIf="task.status === 'done'">
               <app-task [index]="i"></app-task>

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

@@ -4,12 +4,10 @@ section {
   padding-right: 24px;
 }
 
-h1 {
-  margin: 0;
-}
-
-.blue {
-  background-color: var(--blue);
+.title {
+  font-size: 61px;
+  font-weight: 700;
+  padding-right: 24px;
 }
 
 /*------------- HEADER -------------*/
@@ -25,19 +23,41 @@ h1 {
   display: flex;
   align-items: center;
   position: relative;
+  input {
+    width: 312px;
+    padding: 8px 16px;
+    align-items: center;
+    border-radius: 10px;
+    border: 1px solid var(--gray);
+    background-color: var(--white);
+    background-image: url("./../../../assets/img/board/search.svg");
+    background-position-x: calc(100% - 10px);
+    background-position-y: center;
+    background-repeat: no-repeat;
+    background-size: 24px;
+  }
+}
+
+.line {
+  position: absolute;
+  top: 8px;
+  right: 215px;
+  height: 18px;
+  width: 1px;
+  background-color: var(--gray);
+  margin: 0 6px;
 }
 
 .btn-inside {
   display: flex;
   justify-content: center;
   align-items: center;
-}
-
-.btn-inside span {
+  span {
     margin-right: 4px;
   }
+}
 
-.btn-addtask {
+.btn {
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -52,35 +72,10 @@ h1 {
   font-size: 21px;
   font-weight: 700;
   margin-left: 16px;
-}
-
-.btn-addtask:hover {
+  &:hover {
     background-color: var(--light-blue);
     box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
   }
-
-.search input {
-  width: 312px;
-  padding: 8px 16px;
-  align-items: center;
-  border-radius: 10px;
-  border: 1px solid var(--gray);
-  background-color: var(--white);
-  background-image: url("./../../../assets/img/board/search.svg");
-  background-position-x: calc(100% - 10px);
-  background-position-y: center;
-  background-repeat: no-repeat;
-  background-size: 24px;
-}
-
-.line {
-  position: absolute;
-  top: 8px;
-  right: 215px;
-  height: 18px;
-  width: 1px;
-  background-color: var(--gray);
-  margin: 0 6px;
 }
 
 /*------------- HEADLINE -------------*/
@@ -89,7 +84,7 @@ h1 {
   max-width: calc(1080px + 32px);
 }
 
-#content-headline {
+.status {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
@@ -97,37 +92,32 @@ h1 {
   margin-top: 48px;
 }
 
-.content-headline {
+.headline {
   display: flex;
   justify-content: space-between;
   min-width: 246px;
-}
-
-.content-headline span {
+  span {
     color: var(--blue-gray);
     font-size: 20px;
     font-weight: 700;
   }
-
-.content-headline img {
+  img {
     border-radius: 8px;
     border: 2px solid var(--dark-blue);
     cursor: pointer;
+    &:hover {
+      filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg);
+    }
   }
-
-.content-headline img:hover {
-  filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
-    brightness(92%) contrast(92%);
 }
 
 /*------------- CONTENT -------------*/
 
-.content-column {
+.column {
   display: flex;
   flex-direction: column;
   padding-right: 32px;
-}
-
-.content-column:first-child {
+  &:first-child {
     padding-left: 0;
   }
+}

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+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';
@@ -12,6 +12,8 @@ import { FirebaseService } from '../../services/firebase.service';
   styleUrl: './board.component.scss',
 })
 export class BoardComponent {
+  @ViewChild('searchField') searchField!: ElementRef;
+
   constructor(
     public dragDropService: DragDropService,
     public firebaseService: FirebaseService
@@ -28,14 +30,25 @@ export class BoardComponent {
     let firebaseId = this.firebaseService.allTasks[index].id;
     this.firebaseService.allTasks[index].status = status;
     this.firebaseService.updateTask(firebaseId, index);
+    this.searchField.nativeElement.value = '';
   }
 
   isTaskRendered(taskColumn: string): boolean {
-    for (let task of this.firebaseService.allTasks) {
+    for (let task of this.firebaseService.filteredTasks) {
       if (task.status === taskColumn) {
         return true;
       }
     }
     return false;
   }
+
+  searchTask(): void {
+    const search = this.searchField.nativeElement.value.toLowerCase();
+    this.firebaseService.filteredTasks = this.firebaseService.allTasks.filter(
+      (task) =>
+        task.title.toLowerCase().includes(search) ||
+        task.description.toLowerCase().includes(search) ||
+        task.category.toLowerCase().includes(search)
+    );
+  }
 }

src/app/services/firebase.service.ts

@@ -14,15 +14,18 @@ export class FirebaseService {
   firestore: Firestore = inject(Firestore);
 
   allTasks: any[] = [];
+  filteredTasks: any[] = [];
 
   updateAllTasks() {
     onSnapshot(collection(this.firestore, 'tasks'), (list) => {
       if (!list.empty) {
         this.allTasks = [];
+        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!');