Fix filtering in jobs and producers table

Issue-ID: NONRTRIC-453
Signed-off-by: ychacon <yennifer.chacon@est.tech>
Change-Id: I3a57f3c912b112cb6afd20874032755b072bca14

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 (file)
--- 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 (file)
--- 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 (file)
--- 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<EIJob> = new MatTableDataSource<EIJob>();
+  jobsDataSource: MatTableDataSource<EIJob>;
   jobForm: FormGroup;
   private loadingSubject = new BehaviorSubject<boolean>(false);
   private jobsSubject = new BehaviorSubject<EIJob[]>([]);
@@ -61,22 +61,21 @@ export class JobsListComponent implements OnInit {
     this.loadJobs();
     this.jobsSubject.subscribe((data) => {
       this.jobsDataSource = new MatTableDataSource<EIJob>(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 (file)
--- 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<EIProducer> = new MatTableDataSource<EIProducer>();
+  producersDataSource: MatTableDataSource<EIProducer>;
   producerForm: FormGroup;
   darkMode: boolean;
 
@@ -60,20 +60,19 @@ export class ProducersListComponent implements OnInit {
     this.loadProducers();
     this.producerSubject.subscribe((data) => {
       this.producersDataSource = new MatTableDataSource<EIProducer>(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) {