added the feature of search in segment section (#1394)

* added the feature of search in segment section * resolved the review comments
CarnegieLearningWeb · Apr 3, 2024 · 007fe95 · 007fe95
1 parent 27367f5
commit 007fe95
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 10 deletions.
diff --git a/...e/src/app/features/dashboard/home/components/experiment-list/experiment-list.component.ts b/...e/src/app/features/dashboard/home/components/experiment-list/experiment-list.component.ts
@@ -14,7 +14,6 @@ import { ExperimentStatePipeType } from '../../../../../shared/pipes/experiment-
 import { debounceTime } from 'rxjs/operators';
 import { UserPermission } from '../../../../../core/auth/store/auth.models';
 import { AuthService } from '../../../../../core/auth/auth.service';
-import { SettingsService } from '../../../../../core/settings/settings.service';
 import { ImportExperimentComponent } from '../modal/import-experiment/import-experiment.component';
 import { FLAG_SEARCH_SORT_KEY } from '../../../../../core/feature-flags/store/feature-flags.model';
 import { ExportModalComponent } from '../modal/export-experiment/export-experiment.component';
@@ -66,8 +65,7 @@ export class ExperimentListComponent implements OnInit, OnDestroy, AfterViewInit
   constructor(
     private experimentService: ExperimentService,
     private dialog: MatDialog,
-    private authService: AuthService,
-    private settingsService: SettingsService
+    private authService: AuthService
   ) {}
 
   ngOnInit() {
@@ -122,7 +120,7 @@ export class ExperimentListComponent implements OnInit, OnDestroy, AfterViewInit
               !!data.context.filter((context) => context.toLocaleLowerCase().includes(filter)).length
             );
           case EXPERIMENT_SEARCH_KEY.NAME:
-            return data.name.toLowerCase().includes(filter) || this.isPartitionFound(data, filter);
+            return data.name.toLocaleLowerCase().includes(filter) || this.isPartitionFound(data, filter);
           case EXPERIMENT_SEARCH_KEY.TAG:
             return !!data.tags.filter((tags) => tags.toLocaleLowerCase().includes(filter)).length;
           case EXPERIMENT_SEARCH_KEY.CONTEXT:

diff --git a/...src/app/features/dashboard/segments/components/segments-list/segments-list.component.html b/...src/app/features/dashboard/segments/components/segments-list/segments-list.component.html
@@ -7,9 +7,10 @@
       >
         <mat-select
           class="ft-14-400"
-          [(ngModel)]="selectedExperimentFilterOption"
+          [(ngModel)]="selectedSegmentFilterOption"
+          (selectionChange)="applyFilter(searchValue)"
         >
-          <mat-option class="ft-14-400" *ngFor="let filterOption of experimentFilterOptions" [value]="filterOption">
+          <mat-option class="ft-14-400" *ngFor="let filterOption of segmentFilterOptions" [value]="filterOption">
             {{ filterOption | titlecase }}
           </mat-option>
         </mat-select>
@@ -23,6 +24,7 @@
           matInput
           #searchInput
           [(ngModel)]="searchValue"
+          (keyup)="applyFilter($event.target.value)"
           [placeholder]="'global.search.text' | translate"
         />
         <mat-icon class="search-icon" matSuffix>search</mat-icon>

diff --git a/...e/src/app/features/dashboard/segments/components/segments-list/segments-list.component.ts b/...e/src/app/features/dashboard/segments/components/segments-list/segments-list.component.ts
@@ -16,7 +16,6 @@ import { SegmentsService } from '../../../../../core/segments/segments.service';
 import { Segment } from '../../../../../core/segments/store/segments.model';
 import { NewSegmentComponent } from '../modal/new-segment/new-segment.component';
 import { ImportSegmentComponent } from '../modal/import-segment/import-segment.component';
-import { CustomMatTableSource } from './CustomMatTableSource';
 import { EXPERIMENT_SEARCH_KEY } from '../../../../../core/experiments/store/experiments.model';
 import { SegmentStatusPipeType } from '../../../../../shared/pipes/segment-status.pipe';
 import { SEGMENT_STATUS } from '../../../../../core/segments/store/segments.model';
@@ -41,14 +40,25 @@ export class SegmentsListComponent implements OnInit, OnDestroy, AfterViewInit {
   allSegments: MatTableDataSource<Segment>;
   allSegmentsSub: Subscription;
   isLoadingSegments$ = this.segmentsService.isLoadingSegments$;
-  experimentFilterOptions = [
+  segmentFilterOptions = [
     EXPERIMENT_SEARCH_KEY.ALL,
     EXPERIMENT_SEARCH_KEY.NAME,
     EXPERIMENT_SEARCH_KEY.STATUS,
     EXPERIMENT_SEARCH_KEY.CONTEXT,
   ];
-  selectedExperimentFilterOption = EXPERIMENT_SEARCH_KEY.ALL;
+  statusFilterOptions = Object.values(SEGMENT_STATUS);
+  selectedSegmentFilterOption = EXPERIMENT_SEARCH_KEY.ALL;
   searchValue: string;
+  contextVisibility = [];
+
+  get filteredStatusOptions(): string[] {
+    if (typeof this.searchValue === 'string') {
+      const filterValue = this.searchValue.toLowerCase();
+      return this.statusFilterOptions.filter((option) => option.toLowerCase().includes(filterValue));
+    } else {
+      return this.statusFilterOptions;
+    }
+  }
 
   constructor(
     private authService: AuthService,
@@ -69,13 +79,40 @@ export class SegmentsListComponent implements OnInit, OnDestroy, AfterViewInit {
     this.permissions$ = this.authService.userPermissions$;
     this.allSegmentsSub = this.segmentsService.allSegments$.subscribe((segments) => {
       segments = segments.map((segment) => ({ ...segment, status: segment.status || SEGMENT_STATUS.UNUSED }));
-      this.allSegments = new CustomMatTableSource();
+      this.allSegments = new MatTableDataSource();
       this.allSegments.data = [...segments];
       this.allSegments.sort = this.sort;
       this.cdr.detectChanges();
+      this.applyFilter(this.searchValue);
     });
   }
 
+  filterSegmentPredicate(type: EXPERIMENT_SEARCH_KEY) {
+    this.allSegments.filterPredicate = (data, filter: string): boolean => {
+      switch (type) {
+        case EXPERIMENT_SEARCH_KEY.ALL:
+          return (
+            data.name.toLocaleLowerCase().includes(filter) ||
+            data.status.toLocaleLowerCase().includes(filter) ||
+            data.context.toLocaleLowerCase().includes(filter)
+          );
+        case EXPERIMENT_SEARCH_KEY.NAME:
+          return data.name.toLocaleLowerCase().includes(filter);
+        case EXPERIMENT_SEARCH_KEY.STATUS:
+          return data.status.toLocaleLowerCase().includes(filter);
+        case EXPERIMENT_SEARCH_KEY.CONTEXT:
+          return data.context.toLocaleLowerCase().includes(filter);
+      }
+    };
+  }
+
+  applyFilter(filterValue: string) {
+    this.filterSegmentPredicate(this.selectedSegmentFilterOption);
+    if (typeof filterValue === 'string') {
+      this.allSegments.filter = filterValue.trim().toLowerCase();
+    }
+  }
+
   openNewSegmentDialog() {
     this.dialog.open(NewSegmentComponent, {
       panelClass: 'new-segment-modal',