From c57eea20731c196a5de55faef024c6c07f7689fe Mon Sep 17 00:00:00 2001 From: maximesson Date: Wed, 10 Feb 2021 12:52:08 +0100 Subject: [PATCH] Filtering for all producer columns in EIC Change-Id: I0da1079e9a66037c3fe0ee9729a19395e85247df Issue-ID: NONRTRIC-423 Signed-off-by: maximesson --- .../ei-coordinator/ei-coordinator.component.html | 79 ++++++++++++++-------- .../app/ei-coordinator/ei-coordinator.component.ts | 56 ++++++++------- .../app/ei-coordinator/ei-producer.datasource.ts | 2 +- 3 files changed, 84 insertions(+), 53 deletions(-) diff --git a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html index 09d03ec..00ce9ad 100644 --- a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html +++ b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.html @@ -29,42 +29,63 @@ limitations under the License.

Producers

-
- -
+
- - - - - - - - - - - -
Producer IDProducer typeProducer status
- {{eiProducer.ei_producer_id}} - - {{this.getEIProducerTypes(eiProducer)}} - - {{this.getEIProducerStatus(eiProducer)}} -
+ + + + +
+ + + Producer ID + +
+ + {{eiProducer.ei_producer_id}} + + + + +
+
+ + + Producer types + +
+ + {{this.getEIProducerTypes(eiProducer)}} + + + + +
+
+ + + Producer status + +
+ + {{this.getEIProducerStatus(eiProducer)}} + + + + + + + + No data matching the filter "{{input.value}}" + +

Jobs

- 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 8532fcc..711b86f 100644 --- a/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts +++ b/webapp-frontend/src/app/ei-coordinator/ei-coordinator.component.ts @@ -17,13 +17,13 @@ * limitations under the License. * ========================LICENSE_END=================================== */ -import { Component, OnInit} from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { MatSort } from '@angular/material/sort'; import { animate, state, style, transition, trigger } from '@angular/animations'; import { FormBuilder, FormGroup, AbstractControl } from '@angular/forms'; -import { MatTableDataSource } from '@angular/material'; +import { MatTableDataSource, MatTable } from '@angular/material'; -import { defer, BehaviorSubject, Observable } from 'rxjs'; -import { map, withLatestFrom, startWith } from 'rxjs/operators'; +import { BehaviorSubject, Observable } from 'rxjs'; import { EIJob, EIProducer } from '../interfaces/ei.types'; import { EIJobDataSource } from './ei-job.datasource'; @@ -52,56 +52,66 @@ class EIJobInfo { export class EICoordinatorComponent implements OnInit { producers$: Observable; - filteredProducers$: Observable; + @ViewChild(MatSort, { static: true }) sort: MatSort; + @ViewChild('producersTable', { static: true }) table: MatTable; eiJobInfo = new Map(); darkMode: boolean; searchString: string; formGroup: FormGroup; jobsDataSource: MatTableDataSource; + producersDataSource: MatTableDataSource; readonly jobsFormControl: AbstractControl; + readonly producersFormControl: AbstractControl; constructor( private eiJobsDataSource: EIJobDataSource, private eiProducersDataSource: EIProducerDataSource, private ui: UiService, private formBuilder: FormBuilder) { - - this.formGroup = formBuilder.group({ filter: [""] }); - this.jobsFormControl = formBuilder.group({ - id: '', - typeId: '', - owner: '', - targetUri:'', - }) + this.formGroup = formBuilder.group({ filter: [""] }); + + this.jobsFormControl = formBuilder.group({ + id: '', + typeId: '', + owner: '', + targetUri:'' + }); + this.producersFormControl = formBuilder.group({ + ei_producer_id: '', + ei_producer_types: '', + status: '' + }); } ngOnInit() { this.eiJobsDataSource.getJobs(); + this.producers$ = this.eiProducersDataSource.loadProducers(); this.jobsDataSource = new MatTableDataSource(this.eiJobsDataSource.eiJobsSubject.value); + this.producersDataSource = new MatTableDataSource(this.eiProducersDataSource.producerSubject.value) this.jobsFormControl.valueChanges.subscribe(value => { const filter = {...value, id: value.id.trim().toLowerCase()} as string; this.jobsDataSource.filter = filter; }); + this.producersFormControl.valueChanges.subscribe(value => { + const filter = {...value, ei_producer_id: value.ei_producer_id.trim().toLowerCase()} as string; + this.producersDataSource.filter = filter; + }); this.jobsDataSource.filterPredicate = ((data, filter) => { - return this.isDataIncluding(data.ei_job_identity, filter.id) + return this.isDataIncluding(data.ei_job_identity, filter.id) && this.isDataIncluding(data.target_uri, filter.target_uri) && this.isDataIncluding(data.owner, filter.owner) && this.isDataIncluding(data.ei_type_identity, filter.typeId); }) as (EIJob, string) => boolean; - this.producers$= this.eiProducersDataSource.loadProducers(); - this.filteredProducers$ = defer(() => this.formGroup.get("filter") - .valueChanges.pipe( - startWith(""), - withLatestFrom(this.producers$), - map(([val, producers]) => - !val ? producers : producers.filter((x) => - x.ei_producer_id.toLowerCase().includes(val)))) - ); + 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 (EIProducer, string) => boolean; this.ui.darkModeState.subscribe((isDark) => { this.darkMode = isDark; diff --git a/webapp-frontend/src/app/ei-coordinator/ei-producer.datasource.ts b/webapp-frontend/src/app/ei-coordinator/ei-producer.datasource.ts index 78ddd4e..f04d9c5 100644 --- a/webapp-frontend/src/app/ei-coordinator/ei-producer.datasource.ts +++ b/webapp-frontend/src/app/ei-coordinator/ei-producer.datasource.ts @@ -84,4 +84,4 @@ export class EIProducerDataSource extends MatTableDataSource { this.producerSubject.complete(); this.loadingSubject.complete(); } -} +} \ No newline at end of file -- 2.16.6