feat(orb-ui): #1185 Search by name on list pages (#2633)

orb-community · Sep 18, 2023 · f61aada · f61aada
1 parent cbaa4b7
commit f61aada
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 19 deletions.
diff --git a/ui/src/app/common/services/filter.service.ts b/ui/src/app/common/services/filter.service.ts
@@ -74,6 +74,10 @@ export class FilterService {
     }
   }
 
+  removeFilterByParam(param: string) {
+    this.removeFilter(this._filters.findIndex((filter) => filter.param === param && filter.name === 'Name' && filter));
+  }
+
   // make a decorator out of this?
   createFilteredList() {
     return (

diff --git a/ui/src/app/shared/components/filter/filter.component.html b/ui/src/app/shared/components/filter/filter.component.html
@@ -27,30 +27,37 @@
     <button
       (click)="addFilter()"
       [disabled]="!filterParam || filterParam === ''"
+      nbButton
       ghost
+      style="margin-right: 5px;"
       status="primary"
-      nbButton
     >
-      <i class="fa fa-plus">&nbsp;</i>
+      <nb-icon icon="plus-outline"></nb-icon>  
     </button>
   </ng-container>
-</ng-container><button *ngIf="(activeFilters$|async).length > 0" nbButton ghost class="card-button clear-filter clear-all" (click)="clearAllFilters()">Clear all filters</button>
+</ng-container>
+
+<div class="search-input-wrapper">
+  <nb-icon icon="search-outline" class="search-icon"></nb-icon>
+  <input type="text" 
+    placeholder="Search by name" 
+    [(ngModel)]="searchText"
+    nbInput
+    class="search-input custom-input"
+    (ngModelChange)="onSearchTextChange()">
+</div>
+
 <mat-chip-list>
-  <mat-chip
-    *ngFor="let filter of activeFilters$ | async; let index = index"
-    class="filter-chip"
-  >
-    {{ filter?.exact ?  filter.name + ": '" + filter?.param + "'" : filter.name + ': ' +filter?.param}}
-    <button
-      class="remove-tag-button"
-      (click)="removeFilter(index)"
-      nbButton
-      shape="round"
-    >
-      <i class="fa fa-window-close" style="color: #3089fc;">&nbsp;</i>
-    </button>
-  </mat-chip>
+  <ng-container *ngFor="let filter of activeFilters$ | async; let index = index">
+    <mat-chip *ngIf="filter.name !== 'Name'" class="filter-chip">
+      {{ filter?.exact ? filter.name + ": '" + filter?.param + "'" : filter.name + ': ' + filter?.param }}
+      <button class="remove-tag-button" (click)="removeFilter(index)" nbButton shape="round">
+        <i class="fa fa-window-close" style="color: #3089fc;">&nbsp;</i>
+      </button>
+    </mat-chip>
+  </ng-container>
 </mat-chip-list>
+
 <ng-template #input>
   <nb-form-field>
   <input
@@ -59,6 +66,7 @@
     required
     type="text"
     placeholder="{{ selectedFilter?.name }}"
+    style="max-width: 150px;"
   />
   <button nbSuffix nbButton ghost class="exact-match-button"
           [class]="selectedFilter.exact ? 'exact-match' : 'partial-match'"
@@ -86,6 +94,7 @@
       nbInput
       required
       placeholder="{{ selectedFilter?.name }}"
+      style="max-width: 150px;"
     />
   </nb-form-field>
 </ng-template>
@@ -108,6 +117,7 @@
     nbInput
     required
     type="text"
+    style="max-width: 150px;"
   />
   <button nbSuffix nbButton ghost class="exact-match-button"
           [class]="selectedFilter.exact ? 'exact-match' : 'partial-match'"

diff --git a/ui/src/app/shared/components/filter/filter.component.scss b/ui/src/app/shared/components/filter/filter.component.scss
@@ -108,3 +108,25 @@ mat-chip-list {
 .clear-filter {
   margin-left: 1rem;
 }
+.search-input {
+  width: 300px !important;
+  height: 38px !important;
+  padding-left: 35px !important;
+}
+.filter-search-container {
+  display: flex;
+  justify-content: space-between;
+}
+.search-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 8px;
+  pointer-events: none;
+  color: #8f9bb3;
+}
+
diff --git a/ui/src/app/shared/components/filter/filter.component.ts b/ui/src/app/shared/components/filter/filter.component.ts
@@ -3,10 +3,11 @@ import { MatSelectChange } from '@angular/material/select';
 import {
   FilterOption,
   FilterTypes,
+  filterString,
 } from 'app/common/interfaces/orb/filter-option';
 import { FilterService } from 'app/common/services/filter.service';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'ngx-filter',
@@ -27,12 +28,36 @@ export class FilterComponent {
 
   exact: boolean;
 
+  searchText: string;
+
+  lastSearchText: string;
+
   constructor(private filter: FilterService) {
     this.exact = false;
     this.availableFilters = [];
     this.activeFilters$ = filter.getFilters().pipe(map((filters) => filters));
+    this.searchText = '';
+  }
+
+  ngOnInit() {
+    this.availableFilters = this.availableFilters.filter(filter => filter.name !== 'Name');
+  }
+  onSearchTextChange() {
+    if (this.lastSearchText !== '') {
+      this.filter.removeFilterByParam(this.lastSearchText);
+    }
+    if (this.searchText !== '') {
+      const filterOptions: FilterOption = {
+        name: 'Name',
+        prop: 'name',
+        param: this.searchText,
+        type: FilterTypes.Input,
+        filter: filterString,
+      }
+      this.filter.addFilter(filterOptions);
+    }
+    this.lastSearchText = this.searchText;
   }
-
   addFilter(): void {
     if (!this.selectedFilter) return;