From 6f291aa006608af0c494fbc6869276794fa5b719 Mon Sep 17 00:00:00 2001 From: "michele.artini" Date: Tue, 31 Jan 2023 15:02:51 +0100 Subject: [PATCH] dsm results pagination --- .../dnet-is-application/src/app/app.module.ts | 4 +- .../src/app/dsm/dsm-browse-dialog.html | 2 +- .../src/app/dsm/dsm-results.component.html | 16 ++++- .../src/app/dsm/dsm-search.component.html | 1 + .../src/app/dsm/dsm.component.ts | 58 +++++++++++++++++-- .../dnet-is-application/src/app/is.service.ts | 16 ++++- .../src/app/model/controller.model.ts | 44 ++++++++++++++ 7 files changed, 133 insertions(+), 8 deletions(-) diff --git a/frontends/dnet-is-application/src/app/app.module.ts b/frontends/dnet-is-application/src/app/app.module.ts index 882a6f33..d285bd2b 100644 --- a/frontends/dnet-is-application/src/app/app.module.ts +++ b/frontends/dnet-is-application/src/app/app.module.ts @@ -30,6 +30,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar'; import { ContextsComponent, ContextViewerComponent, ContextParamsDialog } from './contexts/contexts.component'; import { VocabulariesComponent, VocabularyEditorComponent, VocDialog, VocTermDialog } from './vocabularies/vocabularies.component'; import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComponent, DsmBrowseDialog } from './dsm/dsm.component'; +import { MatPaginatorModule } from '@angular/material/paginator'; @NgModule({ declarations: [ @@ -79,7 +80,8 @@ import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComp MatDialogModule, MatSortModule, ReactiveFormsModule, - MatSnackBarModule + MatSnackBarModule, + MatPaginatorModule ], providers: [], bootstrap: [AppComponent] diff --git a/frontends/dnet-is-application/src/app/dsm/dsm-browse-dialog.html b/frontends/dnet-is-application/src/app/dsm/dsm-browse-dialog.html index 0c0d3131..6376fe3d 100644 --- a/frontends/dnet-is-application/src/app/dsm/dsm-browse-dialog.html +++ b/frontends/dnet-is-application/src/app/dsm/dsm-browse-dialog.html @@ -11,7 +11,7 @@ Name - {{element.name}} + {{element.name}} diff --git a/frontends/dnet-is-application/src/app/dsm/dsm-results.component.html b/frontends/dnet-is-application/src/app/dsm/dsm-results.component.html index 8c0318ce..feced00b 100644 --- a/frontends/dnet-is-application/src/app/dsm/dsm-results.component.html +++ b/frontends/dnet-is-application/src/app/dsm/dsm-results.component.html @@ -1 +1,15 @@ -

dsm search

+

Datasource Manager: Results

+ + + + +
+ {{ds.name}} + +
\ No newline at end of file diff --git a/frontends/dnet-is-application/src/app/dsm/dsm-search.component.html b/frontends/dnet-is-application/src/app/dsm/dsm-search.component.html index 9d2b170c..5e133c45 100644 --- a/frontends/dnet-is-application/src/app/dsm/dsm-search.component.html +++ b/frontends/dnet-is-application/src/app/dsm/dsm-search.component.html @@ -15,3 +15,4 @@ + diff --git a/frontends/dnet-is-application/src/app/dsm/dsm.component.ts b/frontends/dnet-is-application/src/app/dsm/dsm.component.ts index 3428d691..fbf6335f 100644 --- a/frontends/dnet-is-application/src/app/dsm/dsm.component.ts +++ b/frontends/dnet-is-application/src/app/dsm/dsm.component.ts @@ -1,5 +1,5 @@ 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 { ActivatedRoute, Params } from '@angular/router'; 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 { Observable, combineLatest } from 'rxjs'; 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 { EmitterVisitorContext } from '@angular/compiler'; import { Router } from '@angular/router'; +import { PageEvent } from '@angular/material/paginator'; @Component({ @@ -31,7 +32,7 @@ export class DsmSearchComponent implements OnInit { } search() { - this.router.navigate(['/dsm/results/0/100'], { + this.router.navigate(['/dsm/results/0/50'], { queryParams: { value: this.searchText } }); } @@ -50,7 +51,56 @@ export class DsmSearchComponent implements OnInit { templateUrl: './dsm-results.component.html', 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) => { + this.results = page.content; + this.nResults = page.totalElements; + this.nPages = page.totalPages; + }); + } else { + this.service.dsmSearch(this.value, this.currPage, this.pageSize, (page:Page) => { + 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({ diff --git a/frontends/dnet-is-application/src/app/is.service.ts b/frontends/dnet-is-application/src/app/is.service.ts index 1b523ea4..00be5f51 100644 --- a/frontends/dnet-is-application/src/app/is.service.ts +++ b/frontends/dnet-is-application/src/app/is.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; 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 { FormGroup } from '@angular/forms'; 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>('./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>('./ajax/dsm/search/' + page + '/' + pageSize + '?value=' + encodeURIComponent(value)).subscribe({ + next: data => onSuccess(data), + error: error => this.showError(error) + }); + } + private showError(error: any, form?: FormGroup) { const msg = this.errorMessage(error); if (form) { diff --git a/frontends/dnet-is-application/src/app/model/controller.model.ts b/frontends/dnet-is-application/src/app/model/controller.model.ts index 5a312013..62cf73c5 100644 --- a/frontends/dnet-is-application/src/app/model/controller.model.ts +++ b/frontends/dnet-is-application/src/app/model/controller.model.ts @@ -102,3 +102,47 @@ export interface VocabularyTerm { encoding: string, 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 { + content: T[], + last: boolean, + first: boolean, + totalPages: number, + totalElements: number, + numberOfElements: number, + size: number, + number: number, + empty:boolean, + pageable?:any, + sort?:any +} +