update search function

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

@@ -8,8 +8,24 @@
           id="search-task"
           type="text"
           placeholder="Find Task"
+          [(ngModel)]="searchValue"
           (input)="searchTask()"
         />
+        <span>
+          @if (this.searchInput) {
+          <img
+            src="./../../../assets/img/board/clear.svg"
+            class="icon-clear"
+            alt="clear"
+            (click)="clearInput()"
+          />
+          } @else {
+          <img
+            src="./../../../assets/img/board/search.svg"
+            class="icon-search"
+            alt="search"
+          />}</span
+        >
         <span class="line"></span>
       </div>
       <button class="btn" type="submit">

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

@@ -30,12 +30,6 @@ section {
     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;
@@ -46,6 +40,32 @@ section {
     background-color: var(--gray);
     margin: 0 6px;
   }
+  .icon-clear {
+    position: absolute;
+    top: 7px;
+    right: 225px;
+    cursor: pointer;
+    &:hover {
+      filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg);
+    }
+    filter: invert(41%) sepia(8%) saturate(762%) hue-rotate(176deg)
+      brightness(94%) contrast(86%);
+    width: 20px;
+    height: 20px;
+  }
+  .icon-search {
+    position: absolute;
+    top: 4px;
+    right: 223px;
+    filter: invert(41%) sepia(8%) saturate(762%) hue-rotate(176deg)
+      brightness(94%) contrast(86%);
+    width: 25px;
+    height: 25px;
+  }
+}
+
+d-none {
+  display: none;
 }
 
 .btn-inside {

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

@@ -5,22 +5,22 @@ import { Task } from '../../interfaces/task.interface';
 import { TaskService } from '../../services/task.service';
 import { TaskComponent } from './task/task.component';
 import { TaskEmptyComponent } from './task/task-empty/task-empty.component';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-board',
   standalone: true,
-  imports: [CommonModule, TaskComponent, TaskEmptyComponent],
+  imports: [CommonModule, TaskComponent, TaskEmptyComponent, FormsModule],
   templateUrl: './board.component.html',
   styleUrl: './board.component.scss',
 })
 export class BoardComponent {
-  @ViewChild('searchField') searchField!: ElementRef;
   constructor(
     public dragDropService: DragDropService,
     private taskService: TaskService
   ) {}
-
-  search!: string;
+  searchValue: string = '';
+  searchInput: boolean = false;
 
   ngOnInit() {
     this.dragDropService.itemDropped.subscribe(({ id, status }) => {
@@ -29,19 +29,15 @@ export class BoardComponent {
   }
 
   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);
-      }
+    if (this.updateSearchInput()) {
+      return this.taskService
+        .getFiltertTasks()
+        .filter((task) => task.status === status);
+    } else {
+      return this.taskService
+        .getAllTasks()
+        .filter((task) => task.status === status);
     }
-    return;
   }
 
   handleItemDropped(id: string, status: string): void {
@@ -58,14 +54,27 @@ export class BoardComponent {
     }
   }
 
+  clearInput() {
+    this.searchValue = '';
+    this.searchTask();
+  }
+
+  updateSearchInput() {
+    if (this.searchValue) {
+      this.searchInput = this.searchValue.toLowerCase().length > 0;
+    }
+    return this.searchInput;
+  }
+
   searchTask(): void {
+    this.updateSearchInput();
     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)
+          task.title.toLowerCase().includes(this.searchValue) ||
+          task.description.toLowerCase().includes(this.searchValue) ||
+          task.category.toLowerCase().includes(this.searchValue)
       );
   }
 }

src/assets/img/board/clear.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

src/assets/img/board/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>