diff --git a/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-list/experiment-list.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-list/experiment-list.component.ts index 721a8a6279..d6733aa5fa 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-list/experiment-list.component.ts +++ b/frontend/projects/upgrade/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/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.html b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.html index 847f8ba8b9..22ee822a83 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.html +++ b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.html @@ -7,9 +7,10 @@ > - + {{ filterOption | titlecase }} @@ -23,6 +24,7 @@ matInput #searchInput [(ngModel)]="searchValue" + (keyup)="applyFilter($event.target.value)" [placeholder]="'global.search.text' | translate" /> search diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.ts index 94d9efd05b..be4d2a3c57 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/segments/components/segments-list/segments-list.component.ts +++ b/frontend/projects/upgrade/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; 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',