From b958fe29652ac1f2550b303d50a65b59e58028b4 Mon Sep 17 00:00:00 2001
From: brozanski <100760688+brozanski@users.noreply.github.com>
Date: Tue, 21 May 2024 00:28:36 +0200
Subject: [PATCH] Added clear search bar input button

---
 .../app/search-bar/search-bar.component.html  |  6 +++++-
 .../app/search-bar/search-bar.component.scss  | 19 +++++++++++++++++++
 .../app/search-bar/search-bar.component.ts    |  6 ++++++
 3 files changed, 30 insertions(+), 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
index 20043c00..6bcf2121 100644
--- 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
index 86f8f940..58730b48 100644
--- 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
index 5e467f48..b6e0be0e 100644
--- 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);
+  }
 }