Add Search bar to filter requests

adityatelange · Dec 10, 2023 · c1371a9 · c1371a9
1 parent f10fe2b
commit c1371a9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/src/app/components/main/main.component.css b/src/app/components/main/main.component.css
@@ -103,8 +103,23 @@ as-split>as-split-area>div>button {
   color: darkblue;
 }
 
+.search {
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  height: 30px;
+  padding-inline-start: 10px;
+  font-size: 15px;
+}
+
+.search:focus {
+  outline-offset: -2px;
+}
+
+
 @media (prefers-color-scheme: dark) {
-  .mat-table {
+  .mat-table,
+  .search {
     background: 0;
   }
 
@@ -150,4 +165,8 @@ as-split>as-split-area>div>button {
   .header_key {
     color: lightblue;
   }
-}
+
+  .search {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  }
+}
diff --git a/src/app/components/main/main.component.html b/src/app/components/main/main.component.html
@@ -1,5 +1,6 @@
 <as-split direction="vertical" [gutterSize]=7>
     <as-split-area [size]="60">
+        <input matInput type="search" (input)="applyFilter($event)" placeholder="Search" id="search" class="search">
         <table mat-table [dataSource]="dataSource" matSort cdkDropList cdkDropListOrientation="horizontal"
             (cdkDropListDropped)="drop($event)">
 
@@ -112,4 +113,4 @@
             </as-split-area>
         </as-split>
     </as-split-area>
-</as-split>
+</as-split>
diff --git a/src/app/components/main/main.component.ts b/src/app/components/main/main.component.ts
@@ -118,14 +118,24 @@ export class MainComponent implements OnInit {
     const titleRegex = /<title>(.*?)<\/title>/i;
     const match = response.match(titleRegex);
     if (match && match.length > 1) {
-     return match[1];
-   }
-   return '';
+      return match[1];
+    }
+    return '';
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value ? (event.target as HTMLInputElement).value : "";
+    this.dataSource.filter = filterValue.trim();
   }
 
   @HostListener('window:keydown.esc', ['$event'])
   clearclickedRow(event: KeyboardEvent) {
     event.preventDefault();
-    this.clickedRow = undefined
+    if (this.clickedRow) {
+      this.clickedRow = undefined;
+    } else {
+      (document.getElementById('search') as HTMLInputElement).value = "";
+      this.applyFilter(event)
+    }
   }
 }