From bb5dc44bd6f32f638e9bbcad960efc94b8ea78b8 Mon Sep 17 00:00:00 2001 From: ychacon Date: Wed, 17 Mar 2021 13:51:35 +0100 Subject: [PATCH] Fix filtering in jobs and producers table Issue-ID: NONRTRIC-453 Signed-off-by: ychacon Change-Id: I3a57f3c912b112cb6afd20874032755b072bca14 --- .../ei-coordinator.component.spec.ts | 6 +++++ .../app/ei-coordinator/ei-coordinator.component.ts | 2 ++ .../jobs-list/jobs-list.component.ts | 31 +++++++++++++--------- .../producers-list/producers-list.component.ts | 30 ++++++++++++--------- 4 files changed, 45 insertions(+), 24 deletions(-) diff --git a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.spec.ts b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.spec.ts index cdc1b84..ae7ee40 100644 --- a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.spec.ts +++ b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.spec.ts @@ -101,11 +101,15 @@ describe('EICoordinatorComponent', () => { it('should refresh tables', async () => { let refreshButton = await loader.getHarness(MatButtonHarness.with({ selector: '#refreshButton' })); spyOn(component.producersList, 'loadProducers'); + spyOn(component.producersList, 'clearFilter'); spyOn(component.jobComponent, 'loadJobs'); + spyOn(component.jobComponent, 'clearFilter'); await refreshButton.click(); expect(component.jobComponent.loadJobs).toHaveBeenCalled(); + expect(component.jobComponent.clearFilter).toHaveBeenCalled(); expect(component.producersList.loadProducers).toHaveBeenCalled(); + expect(component.producersList.clearFilter).toHaveBeenCalled(); }); }); @@ -121,6 +125,7 @@ describe('EICoordinatorComponent', () => { }) class JobsListStubComponent { loadJobs() { } + clearFilter() { } } @Component({ @@ -135,6 +140,7 @@ describe('EICoordinatorComponent', () => { }) class ProducerListStubComponent { loadProducers() { } + clearFilter() { } } }); diff --git a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts index 1bb082c..5f4317f 100644 --- a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts +++ b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts @@ -51,6 +51,8 @@ export class EICoordinatorComponent implements OnInit { refreshTables() { this.jobComponent.loadJobs(); + this.jobComponent.clearFilter(); this.producersList.loadProducers(); + this.producersList.clearFilter(); } } diff --git a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts index 2991c28..fc82b92 100644 --- a/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts +++ b/webapp-frontend/src/app/ei-coordinator/jobs-list/jobs-list.component.ts @@ -39,7 +39,7 @@ export class JobsListComponent implements OnInit { @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; darkMode: boolean; - jobsDataSource: MatTableDataSource = new MatTableDataSource(); + jobsDataSource: MatTableDataSource; jobForm: FormGroup; private loadingSubject = new BehaviorSubject(false); private jobsSubject = new BehaviorSubject([]); @@ -61,22 +61,21 @@ export class JobsListComponent implements OnInit { this.loadJobs(); this.jobsSubject.subscribe((data) => { this.jobsDataSource = new MatTableDataSource(data); - //this.jobsDataSource.data = data; this.jobsDataSource.paginator = this.paginator; + + this.jobsDataSource.filterPredicate = ((data: EIJob, filter) => { + let searchTerms = JSON.parse(filter); + return this.isDataIncluding(data.ei_job_identity, searchTerms.id) + && this.isDataIncluding(data.target_uri, searchTerms.targetUri) + && this.isDataIncluding(data.owner, searchTerms.owner) + && this.isDataIncluding(data.ei_type_identity, searchTerms.typeId); + }) as (data: EIJob, filter: any) => boolean; }); this.jobForm.valueChanges.subscribe(value => { - const filter = { ...value, id: value.id.trim().toLowerCase() } as string; - this.jobsDataSource.filter = filter; + this.jobsDataSource.filter = JSON.stringify(value); }); - this.jobsDataSource.filterPredicate = ((data: EIJob, filter) => { - return this.isDataIncluding(data.ei_job_identity, filter.id) - && this.isDataIncluding(data.target_uri, filter.targetUri) - && this.isDataIncluding(data.owner, filter.owner) - && this.isDataIncluding(data.ei_type_identity, filter.typeId); - }) as (data: EIJob, filter: any) => boolean; - this.ui.darkModeState.subscribe((isDark) => { this.darkMode = isDark; }); @@ -88,6 +87,13 @@ export class JobsListComponent implements OnInit { if (!this.ui.darkModeState) this.ui.darkModeState.unsubscribe(); } + clearFilter() { + this.jobForm.get('id').setValue(''); + this.jobForm.get('typeId').setValue(''); + this.jobForm.get('owner').setValue(''); + this.jobForm.get('targetUri').setValue(''); + } + sortJobs(sort: Sort) { const data = this.jobsDataSource.data data.sort((a: EIJob, b: EIJob) => { @@ -112,7 +118,8 @@ export class JobsListComponent implements OnInit { } isDataIncluding(data: string, filter: string): boolean { - return !filter || data.toLowerCase().includes(filter); + const transformedFilter = filter.trim().toLowerCase(); + return data.toLowerCase().includes(transformedFilter); } getJobTypeId(eiJob: EIJob): string { diff --git a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts index 68f4f3f..7ffdf54 100644 --- a/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts +++ b/webapp-frontend/src/app/ei-coordinator/producers-list/producers-list.component.ts @@ -23,7 +23,7 @@ import { MatSort, Sort } from '@angular/material/sort'; import { MatTableDataSource } from '@angular/material/table'; import { forkJoin, of } from 'rxjs'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; -import { mergeMap, finalize, catchError } from 'rxjs/operators'; +import { mergeMap, finalize } from 'rxjs/operators'; import { EIService } from 'src/app/services/ei/ei.service'; import { EIProducer } from '../../interfaces/ei.types'; import { UiService } from '../../services/ui/ui.service'; @@ -37,7 +37,7 @@ export class ProducersListComponent implements OnInit { @ViewChild(MatSort) sort: MatSort; - producersDataSource: MatTableDataSource = new MatTableDataSource(); + producersDataSource: MatTableDataSource; producerForm: FormGroup; darkMode: boolean; @@ -60,20 +60,19 @@ export class ProducersListComponent implements OnInit { this.loadProducers(); this.producerSubject.subscribe((data) => { this.producersDataSource = new MatTableDataSource(data); - //this.producersDataSource.data = data; + + this.producersDataSource.filterPredicate = ((data, filter) => { + let searchTerms = JSON.parse(filter); + return this.isDataIncluding(data.ei_producer_id, searchTerms.ei_producer_id) + && this.isDataIncluding(data.ei_producer_types.join(','), searchTerms.ei_producer_types) + && this.isDataIncluding(data.status, searchTerms.status); + }) as (data: EIProducer, filter: any) => boolean; }); this.producerForm.valueChanges.subscribe(value => { - const filter = { ...value, ei_producer_id: value.ei_producer_id.trim().toLowerCase() } as string; - this.producersDataSource.filter = filter; + this.producersDataSource.filter = JSON.stringify(value); }); - this.producersDataSource.filterPredicate = ((data, filter) => { - return this.isDataIncluding(data.ei_producer_id, filter.ei_producer_id) - && this.isDataIncluding(data.ei_producer_types.join(','), filter.ei_producer_types) - && this.isDataIncluding(data.status, filter.status); - }) as (data: EIProducer, filter: any) => boolean; - this.ui.darkModeState.subscribe((isDark) => { this.darkMode = isDark; }); @@ -86,7 +85,14 @@ export class ProducersListComponent implements OnInit { } isDataIncluding(data: string, filter: string): boolean { - return !filter || data.toLowerCase().includes(filter); + const transformedFilter = filter.trim().toLowerCase(); + return data.toLowerCase().includes(transformedFilter); + } + + clearFilter() { + this.producerForm.get('ei_producer_id').setValue(''); + this.producerForm.get('ei_producer_types').setValue(''); + this.producerForm.get('status').setValue(''); } sortProducers(sort: Sort) { -- 2.16.6