new-is-app-angular2 #12
|
@ -30,6 +30,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||||
import { ContextsComponent, ContextViewerComponent, ContextParamsDialog } from './contexts/contexts.component';
|
import { ContextsComponent, ContextViewerComponent, ContextParamsDialog } from './contexts/contexts.component';
|
||||||
import { VocabulariesComponent, VocabularyEditorComponent, VocDialog, VocTermDialog } from './vocabularies/vocabularies.component';
|
import { VocabulariesComponent, VocabularyEditorComponent, VocDialog, VocTermDialog } from './vocabularies/vocabularies.component';
|
||||||
import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComponent, DsmBrowseDialog } from './dsm/dsm.component';
|
import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComponent, DsmBrowseDialog } from './dsm/dsm.component';
|
||||||
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
@ -79,7 +80,8 @@ import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComp
|
||||||
MatDialogModule,
|
MatDialogModule,
|
||||||
MatSortModule,
|
MatSortModule,
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
MatSnackBarModule
|
MatSnackBarModule,
|
||||||
|
MatPaginatorModule
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
<ng-container matColumnDef="name">
|
<ng-container matColumnDef="name">
|
||||||
<th mat-header-cell *matHeaderCellDef style="width: 70%;" mat-sort-header sortActionDescription="Sort by Term">Name</th>
|
<th mat-header-cell *matHeaderCellDef style="width: 70%;" mat-sort-header sortActionDescription="Sort by Term">Name</th>
|
||||||
<td mat-cell *matCellDef="let element">
|
<td mat-cell *matCellDef="let element">
|
||||||
<a [routerLink]="['/dsm/results/0/10']" [queryParams]="{field: data.field, value: element.term}" mat-dialog-close>{{element.name}}</a>
|
<a [routerLink]="['/dsm/results/0/50']" [queryParams]="{field: data.field, value: element.term}" mat-dialog-close>{{element.name}}</a>
|
||||||
</td>
|
</td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
|
|
@ -1 +1,15 @@
|
||||||
<p>dsm search</p>
|
<h2>Datasource Manager: Results</h2>
|
||||||
|
|
||||||
|
<mat-paginator (page)="changePage($event)"
|
||||||
|
[pageIndex]="currPage"
|
||||||
|
[pageSize]="pageSize"
|
||||||
|
[length]="nResults"
|
||||||
|
[pageSize]="pageSize"
|
||||||
|
[pageSizeOptions]="[10, 25, 50, 100]"
|
||||||
|
aria-label="Select page">
|
||||||
|
</mat-paginator>
|
||||||
|
|
||||||
|
<div *ngFor="let ds of results">
|
||||||
|
{{ds.name}}
|
||||||
|
|
||||||
|
</div>
|
|
@ -15,3 +15,4 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component, Inject, AfterViewInit, OnInit, ViewChild } from '@angular/core';
|
import { Component, Inject, AfterViewInit, OnInit, ViewChild } from '@angular/core';
|
||||||
import { BrowseTerm, KeyValue } from '../model/controller.model';
|
import { BrowseTerm, Datasource, KeyValue } from '../model/controller.model';
|
||||||
import { ISService } from '../is.service';
|
import { ISService } from '../is.service';
|
||||||
import { ActivatedRoute, Params } from '@angular/router';
|
import { ActivatedRoute, Params } from '@angular/router';
|
||||||
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||||
|
@ -8,10 +8,11 @@ import { MatSort, Sort } from '@angular/material/sort';
|
||||||
import { Vocabulary, VocabularyTermSynonym } from '../model/controller.model';
|
import { Vocabulary, VocabularyTermSynonym } from '../model/controller.model';
|
||||||
import { Observable, combineLatest } from 'rxjs';
|
import { Observable, combineLatest } from 'rxjs';
|
||||||
import { map } from 'rxjs/operators';
|
import { map } from 'rxjs/operators';
|
||||||
import { VocabularyTerm } from '../model/controller.model';
|
import { Page } from '../model/controller.model';
|
||||||
import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
|
import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
|
||||||
import { EmitterVisitorContext } from '@angular/compiler';
|
import { EmitterVisitorContext } from '@angular/compiler';
|
||||||
import { Router } from '@angular/router';
|
import { Router } from '@angular/router';
|
||||||
|
import { PageEvent } from '@angular/material/paginator';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -31,7 +32,7 @@ export class DsmSearchComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
search() {
|
search() {
|
||||||
this.router.navigate(['/dsm/results/0/100'], {
|
this.router.navigate(['/dsm/results/0/50'], {
|
||||||
queryParams: { value: this.searchText }
|
queryParams: { value: this.searchText }
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -50,7 +51,56 @@ export class DsmSearchComponent implements OnInit {
|
||||||
templateUrl: './dsm-results.component.html',
|
templateUrl: './dsm-results.component.html',
|
||||||
styleUrls: ['./dsm.component.css']
|
styleUrls: ['./dsm.component.css']
|
||||||
})
|
})
|
||||||
export class DsmResultsComponent {
|
export class DsmResultsComponent implements OnInit {
|
||||||
|
results:Datasource[] = [];
|
||||||
|
nResults:number = 0;
|
||||||
|
currPage:number = 0;
|
||||||
|
nPages:number = 0;
|
||||||
|
pageSize:number = 0;
|
||||||
|
field?:string;
|
||||||
|
value:string = '';
|
||||||
|
|
||||||
|
constructor(public service: ISService, public route: ActivatedRoute, public router: Router, public dialog: MatDialog) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
combineLatest([ this.route.params, this.route.queryParams ],
|
||||||
|
(params: Params, queryParams: Params) => ({ params, queryParams })
|
||||||
|
).subscribe((res: { params: Params; queryParams: Params }) => {
|
||||||
|
const { params, queryParams} = res;
|
||||||
|
this.currPage = parseInt(params['page']);
|
||||||
|
this.pageSize = parseInt(params['size']);
|
||||||
|
this.field = queryParams['field'];
|
||||||
|
this.value = queryParams['value'];
|
||||||
|
|
||||||
|
if (this.field) {
|
||||||
|
this.service.dsmSearchByField(this.field, this.value, this.currPage, this.pageSize, (page:Page<Datasource>) => {
|
||||||
|
this.results = page.content;
|
||||||
|
this.nResults = page.totalElements;
|
||||||
|
this.nPages = page.totalPages;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.service.dsmSearch(this.value, this.currPage, this.pageSize, (page:Page<Datasource>) => {
|
||||||
|
this.results = page.content;
|
||||||
|
this.nResults = page.totalElements;
|
||||||
|
this.nPages = page.totalPages;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
changePage(event: PageEvent) {
|
||||||
|
console.log(event.pageIndex);
|
||||||
|
|
||||||
|
let path = '/dsm/results/' + event.pageIndex + '/' + event.pageSize;
|
||||||
|
let qp = this.field ?
|
||||||
|
{ field: this.field, value: this.value } :
|
||||||
|
{ value: this.value };
|
||||||
|
|
||||||
|
this.router.navigate([path], {
|
||||||
|
queryParams: qp
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
|
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
|
||||||
import { ResourceType, Protocol, WfHistoryEntry, SimpleResource, Context, ContextNode, Vocabulary, VocabularyTerm, KeyValue, BrowseTerm } from './model/controller.model';
|
import { Page, ResourceType, Protocol, WfHistoryEntry, SimpleResource, Context, ContextNode, Vocabulary, VocabularyTerm, KeyValue, BrowseTerm, Datasource } from './model/controller.model';
|
||||||
import { Observable, Observer } from 'rxjs';
|
import { Observable, Observer } from 'rxjs';
|
||||||
import { FormGroup } from '@angular/forms';
|
import { FormGroup } from '@angular/forms';
|
||||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||||
|
@ -200,6 +200,20 @@ export class ISService {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dsmSearchByField(field:string, value:string, page:number, pageSize:number, onSuccess: Function) {
|
||||||
|
this.client.get<Page<Datasource>>('./ajax/dsm/searchByField/' + encodeURIComponent(field) + '/' + page + '/' + pageSize + '?value=' + encodeURIComponent(value)).subscribe({
|
||||||
|
next: data => onSuccess(data),
|
||||||
|
error: error => this.showError(error)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
dsmSearch(value:string, page:number, pageSize:number, onSuccess: Function) {
|
||||||
|
this.client.get<Page<Datasource>>('./ajax/dsm/search/' + page + '/' + pageSize + '?value=' + encodeURIComponent(value)).subscribe({
|
||||||
|
next: data => onSuccess(data),
|
||||||
|
error: error => this.showError(error)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
private showError(error: any, form?: FormGroup) {
|
private showError(error: any, form?: FormGroup) {
|
||||||
const msg = this.errorMessage(error);
|
const msg = this.errorMessage(error);
|
||||||
if (form) {
|
if (form) {
|
||||||
|
|
|
@ -102,3 +102,47 @@ export interface VocabularyTerm {
|
||||||
encoding: string,
|
encoding: string,
|
||||||
synonyms: VocabularyTermSynonym[]
|
synonyms: VocabularyTermSynonym[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface Api {
|
||||||
|
id: string,
|
||||||
|
protocol: string,
|
||||||
|
compliance: string,
|
||||||
|
active: boolean,
|
||||||
|
aggrDate: string,
|
||||||
|
aggrTotal: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Organization {
|
||||||
|
name:string,
|
||||||
|
country:string
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export interface Datasource {
|
||||||
|
id: string,
|
||||||
|
name: string,
|
||||||
|
otherName?: string,
|
||||||
|
nsprefix: string,
|
||||||
|
websiteUrl?: string,
|
||||||
|
type: string,
|
||||||
|
consenttermsofuse?: boolean,
|
||||||
|
fulltextdownload?: boolean,
|
||||||
|
collectedFrom: string,
|
||||||
|
organizations: Organization[],
|
||||||
|
apis: Api[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Page<T> {
|
||||||
|
content: T[],
|
||||||
|
last: boolean,
|
||||||
|
first: boolean,
|
||||||
|
totalPages: number,
|
||||||
|
totalElements: number,
|
||||||
|
numberOfElements: number,
|
||||||
|
size: number,
|
||||||
|
number: number,
|
||||||
|
empty:boolean,
|
||||||
|
pageable?:any,
|
||||||
|
sort?:any
|
||||||
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue