Added clear search bar input button

iwokonl · May 20, 2024 · b958fe2 · b958fe2
1 parent c5588b2
commit b958fe2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/Front/kantor-angular/src/app/search-bar/search-bar.component.html b/Front/kantor-angular/src/app/search-bar/search-bar.component.html
@@ -8,7 +8,11 @@
            (click)="onSearchBarClick()"
            placeholder="Wpisz nazwę lub kod waluty, aby ją wyszukać.">
 
-    <div class="icon-container">
+    <div class="icon-container" *ngIf="searchText" (click)="clearSearch()">
+      <i class="material-icons">clear</i>
+    </div>
+
+    <div class="icon-container" *ngIf="!searchText">
       <i class="material-icons">search</i>
     </div>
   </div>

diff --git a/Front/kantor-angular/src/app/search-bar/search-bar.component.scss b/Front/kantor-angular/src/app/search-bar/search-bar.component.scss
@@ -70,3 +70,22 @@ button {
   display: block;
   color: #DBDBDB;
 }
+
+.icon-container {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  transform: translateY(2px) translateX(1px);
+  justify-content: center;
+  width: 45px;
+  cursor: pointer;
+}
+
+.icon-container:first-child {
+  left: 0;
+  right: auto;
+  transform: translateY(2px) translateX(-1px);
+}
diff --git a/Front/kantor-angular/src/app/search-bar/search-bar.component.ts b/Front/kantor-angular/src/app/search-bar/search-bar.component.ts
@@ -62,4 +62,10 @@ export class SearchBarComponent implements OnInit, OnDestroy {
       this.searchResults = this.lastSearchResults;
     }
   }
+
+  clearSearch(): void {
+    this.searchText = '';
+    this.searchResults = [];
+    this.searchInput.next(this.searchText);
+  }
 }