-->
<div fxLayout="row">
- <div class="nrcp-global-page-title">Enrichment Information Coordinator</div>
- <div class="refresh-button">
- <button mat-icon-button color="primary" aria-label="Button with a refresh icon" (click)="refreshTables()">
- <mat-icon>refresh</mat-icon>
- </button>
- </div>
+ <div class="nrcp-global-page-title">Enrichment Information Coordinator</div>
+ <div class="refresh-button">
+ <button mat-icon-button color="primary" aria-label="Button with a refresh icon" (click)="refreshTables()">
+ <mat-icon>refresh</mat-icon>
+ </button>
+ </div>
</div>
<br>
<h4>Producers</h4>
<div class="table-container">
- <mat-table #producersTable [dataSource]="producersDataSource"
- matSort class="ei-coordinator-table mat-elevation-z8">
+ <mat-table #producersTable [dataSource]="producersDataSource" fixedLayout
+ matSort (matSortChange)="sortProducers($event)"
+ class="ei-coordinator-table mat-elevation-z8">
<ng-container matColumnDef="id">
- <mat-header-cell *matHeaderCellDef>
+ <mat-header-cell *matHeaderCellDef mat-sort-header>
+ <div (click)="stopSort($event)">
<form style="display: flex" [formGroup]="producersFormControl">
<mat-form-field>
<input matInput formControlName="ei_producer_id">
<mat-placeholder>Producer ID</mat-placeholder>
</mat-form-field>
</form>
+ </div>
</mat-header-cell>
<mat-cell *matCellDef="let eiProducer"> {{eiProducer.ei_producer_id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="types">
- <mat-header-cell *matHeaderCellDef>
- <br>
+ <mat-header-cell *matHeaderCellDef mat-sort-header>
+ <div (click)="stopSort($event)">
<form style="display: flex" [formGroup]="producersFormControl">
<mat-form-field>
<input matInput formControlName="ei_producer_types">
<mat-placeholder>Producer types</mat-placeholder>
</mat-form-field>
</form>
+ </div>
</mat-header-cell>
<mat-cell *matCellDef="let eiProducer"> {{this.getEIProducerTypes(eiProducer)}} </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
- <mat-header-cell *matHeaderCellDef>
- <br>
+ <mat-header-cell *matHeaderCellDef mat-sort-header>
+ <div (click)="stopSort($event)">
<form style="display: flex" [formGroup]="producersFormControl">
<mat-form-field>
<input matInput formControlName="status">
<mat-placeholder>Producer status</mat-placeholder>
</mat-form-field>
</form>
+ </div>
</mat-header-cell>
<mat-cell *matCellDef="let eiProducer"> {{this.getEIProducerStatus(eiProducer)}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="['id', 'types', 'status']"></mat-header-row>
<mat-row *matRowDef="let row; columns: ['id', 'types', 'status'];"></mat-row>
- <!-- Row shown when there is no matching data. -->
- <mat-row *matNoDataRow>
- <mat-cell colspan="3">No data matching the filter "{{input.value}}"</mat-cell>
- </mat-row>
</mat-table>
</div>
<h4>Jobs</h4>
<div class="table-container">
- <mat-table #jobsTable [dataSource]="jobsDataSource"
- matSort class="ei-coordinator-table mat-elevation-z8">
- <ng-container matColumnDef="id">
- <mat-header-cell *matHeaderCellDef>
- <br>
- <form style="display: flex" [formGroup]="jobsFormControl">
- <mat-form-field>
- <input matInput formControlName="id">
- <mat-placeholder>Job ID</mat-placeholder>
- </mat-form-field>
- </form>
- </mat-header-cell>
- <mat-cell *matCellDef="let eiJob"> {{this.getDisplayName(eiJob)}} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="typeId">
- <mat-header-cell *matHeaderCellDef>
- <br>
- <form style="display: flex" [formGroup]="jobsFormControl">
- <mat-form-field>
- <input matInput formControlName="typeId">
- <mat-placeholder>Type ID</mat-placeholder>
- </mat-form-field>
- </form>
- </mat-header-cell>
- <mat-cell *matCellDef="let eiJob">{{this.getEITypeId(eiJob)}} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="owner">
- <mat-header-cell *matHeaderCellDef>
- <br>
- <form style="display: flex" [formGroup]="jobsFormControl">
- <mat-form-field>
- <input matInput formControlName="owner">
- <mat-placeholder>Owner</mat-placeholder>
- </mat-form-field>
- </form>
- </mat-header-cell>
- <mat-cell *matCellDef="let eiJob">{{eiJob.owner}} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="targetUri">
- <mat-header-cell *matHeaderCellDef>
- <br>
- <form style="display: flex" [formGroup]="jobsFormControl">
- <mat-form-field>
- <input matInput formControlName="targetUri">
- <mat-placeholder>Target URI</mat-placeholder>
- </mat-form-field>
- </form>
- </mat-header-cell>
- <mat-cell *matCellDef="let eiJob"> {{this.getTargetUri(eiJob)}} </mat-cell>
- </ng-container>
- <mat-header-row *matHeaderRowDef="['id', 'typeId', 'owner', 'targetUri']"></mat-header-row>
- <mat-row *matRowDef="let row; columns: ['id', 'typeId', 'owner', 'targetUri'];"></mat-row>
- </mat-table>
+ <mat-table [dataSource]="jobsDataSource" fixedLayout
+ matSort (matSortChange)="sortJobs($event)"
+ class="ei-coordinator-table mat-elevation-z8">
+ <ng-container matColumnDef="id">
+ <mat-header-cell *matHeaderCellDef mat-sort-header>
+ <div (click)="stopSort($event)">
+ <form style="display: flex" [formGroup]="jobsFormControl">
+ <mat-form-field>
+ <input matInput formControlName="id">
+ <mat-placeholder>Job ID</mat-placeholder>
+ </mat-form-field>
+ </form>
+ </div>
+ </mat-header-cell>
+ <mat-cell *matCellDef="let eiJob"> {{this.getDisplayName(eiJob)}} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="typeId">
+ <mat-header-cell *matHeaderCellDef mat-sort-header>
+ <div (click)="stopSort($event)">
+ <form style="display: flex" [formGroup]="jobsFormControl">
+ <mat-form-field>
+ <input matInput formControlName="typeId">
+ <mat-placeholder>Type ID</mat-placeholder>
+ </mat-form-field>
+ </form>
+ </div>
+ </mat-header-cell>
+ <mat-cell *matCellDef="let eiJob">{{this.getEITypeId(eiJob)}} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="owner">
+ <mat-header-cell *matHeaderCellDef mat-sort-header>
+ <div (click)="stopSort($event)">
+ <form style="display: flex" [formGroup]="jobsFormControl">
+ <mat-form-field>
+ <input matInput formControlName="owner">
+ <mat-placeholder>Owner</mat-placeholder>
+ </mat-form-field>
+ </form>
+ </div>
+ </mat-header-cell>
+ <mat-cell *matCellDef="let eiJob">{{eiJob.owner}} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="targetUri">
+ <mat-header-cell *matHeaderCellDef mat-sort-header>
+ <div (click)="stopSort($event)">
+ <form style="display: flex" [formGroup]="jobsFormControl">
+ <mat-form-field>
+ <input matInput formControlName="targetUri">
+ <mat-placeholder>Target URI</mat-placeholder>
+ </mat-form-field>
+ </form>
+ </div>
+ </mat-header-cell>
+ <mat-cell *matCellDef="let eiJob"> {{this.getTargetUri(eiJob)}} </mat-cell>
+ </ng-container>
+ <mat-header-row *matHeaderRowDef="['id', 'typeId', 'owner', 'targetUri']"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: ['id', 'typeId', 'owner', 'targetUri'];"></mat-row>
+ </mat-table>
</div>
\ No newline at end of file
* limitations under the License.
* ========================LICENSE_END===================================
*/
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatSort } from '@angular/material/sort';
+import { Component, OnInit } from '@angular/core';
+import { Sort } from '@angular/material/sort';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { FormBuilder, FormGroup, AbstractControl } from '@angular/forms';
-import { MatTableDataSource, MatTable } from '@angular/material';
+import { MatTableDataSource } from '@angular/material';
import { BehaviorSubject, Observable } from 'rxjs';
})
export class EICoordinatorComponent implements OnInit {
- @ViewChild(MatSort, { static: true }) sort: MatSort;
- @ViewChild('producersTable', { static: true }) table: MatTable<Element>;
-
eiJobInfo = new Map<string, EIJobInfo>();
darkMode: boolean;
searchString: string;
ngOnInit() {
this.eiJobsDataSource.loadJobs();
this.eiProducersDataSource.loadProducers();
- this.jobsDataSource = new MatTableDataSource(this.eiJobsDataSource.eiJobs());
+ this.jobsDataSource = this.eiJobsDataSource.jobsDataSource();
this.producersDataSource = new MatTableDataSource(this.eiProducersDataSource.eiProducers());
this.jobsFormControl.valueChanges.subscribe(value => {
this.producersDataSource.filter = filter;
});
- this.jobsDataSource.filterPredicate = ((data, filter) => {
+ this.jobsDataSource.filterPredicate = ((data: EIJob, filter) => {
return this.isDataIncluding(data.ei_job_identity, filter.id)
&& this.isDataIncluding(data.target_uri, filter.target_uri)
&& this.isDataIncluding(data.owner, filter.owner)
});
}
+ sortJobs(sort: Sort){
+ console.log('Jobs new sort: ', sort);
+ const data = this.jobsDataSource.data
+ data.sort((a: EIJob, b: EIJob) => {
+ const isAsc = sort.direction === 'asc';
+ switch (sort.active) {
+ case 'id': return this.compare(a.ei_job_identity, b.ei_job_identity, isAsc);
+ case 'typeId': return this.compare(a.ei_type_identity, b.ei_type_identity, isAsc);
+ case 'owner': return this.compare(a.owner, b.owner, isAsc);
+ case 'targetUri': return this.compare(a.target_uri, b.owner, isAsc);
+ default: return 0;
+ }
+ });
+ this.jobsDataSource.data = data;
+ }
+
+ sortProducers(sort: Sort){
+ const data = this.producersDataSource.data
+ data.sort((a: EIProducer, b: EIProducer) => {
+ const isAsc = sort.direction === 'asc';
+ switch (sort.active) {
+ case 'id': return this.compare(a.ei_producer_id, b.ei_producer_id, isAsc);
+ case 'types': return this.compare(a.ei_producer_types, b.ei_producer_types, isAsc);
+ case 'status': return this.compare(a.status, b.status, isAsc);
+ default: return 0;
+ }
+ });
+ this.producersDataSource.data = data;
+ }
+
+ compare(a: any, b: any, isAsc: boolean) {
+ return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+ }
+
+ stopSort(event: any){
+ event.stopPropagation();
+ }
+
isDataIncluding(data: string, filter: string) : boolean {
return !filter || data.toLowerCase().includes(filter);
}
refreshTables() {
this.eiJobsDataSource.loadJobs();
- this.jobsDataSource.data = this.eiJobsDataSource.eiJobs();
+ this.jobsDataSource = this.eiJobsDataSource.jobsDataSource();
this.eiProducersDataSource.loadProducers();
this.producersDataSource.data = this.eiProducersDataSource.eiProducers();
}
import { EIJob } from '../interfaces/ei.types';
import { EIService } from '../services/ei/ei.service';
+import { MatTableDataSource } from '@angular/material';
+import { ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { delay } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
export class EIJobDataSource {
private jobs: Array<EIJob> = [];
+ private dataSource: MatTableDataSource<any> = new MatTableDataSource();
+ @ViewChild(MatSort, { static: true }) sort: MatSort;
- public eiJobs(): EIJob[] {
- return this.jobs;
+
+ public jobsDataSource(): MatTableDataSource<any> {
+ return this.dataSource;
}
private loadingSubject = new BehaviorSubject<boolean>(false);
producerIds.forEach(id => {
this.getJobsForProducer(id);
});
+ //this.dataSource = new MatTableDataSource();
+ this.dataSource.data = this.jobs;
+ this.dataSource.sort = this.sort;
+ console.log("datasource: "+this.dataSource.data);
});
this.rowCount = this.jobs.length;
}
private getJobsForProducer(id: string) {
console.log('Getting jobs for producer ID: ', id);
- this.eiSvc.getJobsForProducer(id).subscribe(producerJobs => {
- this.jobs = this.jobs.concat(producerJobs);
+ this.eiSvc.getJobsForProducer(id)//.pipe(delay(5000))
+ .subscribe(producerJobs => {
+ this.jobs = this.jobs.concat(producerJobs);
+ console.log("producerJobs: "+producerJobs);
+
});
}
}